文章/答案/技术大牛

发布

社区首页 >问答首页 >CellView.highlight()破坏变化？

问CellView.highlight()破坏变化？
EN

Stack Overflow用户

提问于 2016-07-13 21:18:50

回答 1查看 1.3K关注 0票数 1

我的应用程序使用Jointjs。

我最近从Jointjsv0.9.7升级到v0.9.10，因为我这样做了，单元格突出显示似乎不起作用。我将所有内容简化为一个测试应用程序，我可以看到调用了highlight()函数，但没有设置highlighted类。

我在要点和小提琴中放置了一个简化的测试页面。本报告还转载于下文，以防有帮助。

有什么重大变化吗？在v0.9.10中突出显示应该如何工作？

<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.10/joint.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.10/joint.core.css" />
</head>

<body>
    <div id="paper" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.10/joint.js"></script>
    <script>
        //there is a problem with jointjs in the latest version of Chrome. This fixes it
        SVGElement.prototype.getTransformToElement =
            SVGElement.prototype.getTransformToElement || function (toElement) {
                return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
            };

        var highlighted = false;

        var graph = new joint.dia.Graph;
        var paper = new joint.dia.Paper({
            el: $('#paper'),
            width: 400,
            height: 400,
            model: graph,
            gridSize: 1,
            interactive: false
        });

        paper.on('cell:pointerclick', function (cellView) {

            if (highlighted) {
                cellView.unhighlight();
            } else {
                cellView.highlight();
            }

            highlighted = !highlighted
        });

        var element = new joint.shapes.basic.Rect({
            position: { x: 100, y: 30 },
            attrs: { text: { text: 'my shape' } },
            size: { height: 92.7051, width: 150 }
        });

        graph.addCell(element);
    </script>
</body>

</html>

jointjs

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-07-15 16:59:10

默认的荧光笔已在JointJS v0.9.10中更改。当您高亮显示一个元素时--一个具有模拟元素形状的SVGPathElement类名的joint-highlight-stroke将直接附加到ElementView。这解决了具有CSS属性outline的浏览器之间的差异，而SVG元素基本上不受支持。

可用的highlighters驻留在joint.highlighters名称空间中(stroke默认值、opacity、addClass用于向后兼容性)。

为了恢复原始行为，请使用以下内容。

// a highlighter definition
var myHighlighter = {
    name: 'addClass',
    options: {
        className: 'highlighted'
    }
}

// add `myHighlighter` to an `el` (`null` for the entire cellView) DOM element.
cellView.highlight(el, myHighlighter);
// remove `myHighlighter` from an `el` DOM element.
cellView.unhighlight(el, myHighlighter);

请注意，新的更改允许使用多个高亮笔突出显示cellViews。

演示

抱歉给你带来不便。荧光笔的实际文档将尽快出现在JointJS存储库中。

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38361870

复制

相似问题

问CellView.highlight()破坏变化？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CellView.highlight()破坏变化？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CellView.highlight()破坏变化？
EN