【问题标题】:Line connector not displayed but endpoints are displayed未显示线连接器,但显示端点
【发布时间】:2015-08-25 12:06:27
【问题描述】:

使用以下内容:

  • svg js,
  • svg.connectable.min.js
  • 和 svg.draggy.min.js

我正在使用拖放创建一个线路连接器,如下例所示: http://jsfiddle.net/L2sjjc3b/16/

但在我的程序中同样不起作用。我可以看到行路径是在控制台中创建的,但未显示在输出中。这是我的笨蛋:http://plnkr.co/edit/oAQ4bj4WhXdLxPg8eCyL?p=preview

<div id="canvas" tabindex="0">
    <script>
        var draw = SVG('canvas').size('100%', '100%');
        var clientX, clientY, offsetX, offsetY;
        var x, y;
        var shapeId = "";

        function getId(id)
        {
            shapeId = id;
            console.log(shapeId);
        }
        function createShape(event)
        {
            var $stageContainer = $("#canvas");
            var stageOffset = $stageContainer.offset();
            clientX = event.clientX;
            clientY = event.clientY;
            offsetX = stageOffset.left;
            offsetY = stageOffset.top;
            x = clientX - offsetX;
            y = clientY - offsetY;
            console.log("x is: " + x + " " + "y is: " + y);

            switch (shapeId)
            {
                case('newConnector'):
                    createLine(x, y);
                    break;
                default:
                    console.log("Nothing to drag");
            }
        }
        function createLine(x, y)
        {
            var links = draw.group();
            var markers = draw.group();
            var nodes = draw.group();

            var g1 = nodes.group().translate(20, 80).draggy();
            g1.circle(10).fill("#FF5252").opacity(0.4);

            var g2 = nodes.group().translate(100, 80).draggy();
            g2.circle(10).fill("#C2185B").opacity(0.8);

            var conn1 = g1.connectable({
                container: links,
                markers: markers,
                marker: 'default',
                targetAttach: 'perifery',
                color: 'black'
            }, g2);
        }
    </script>
</div>

【问题讨论】:

    标签: javascript jquery svg svg.js


    【解决方案1】:

    使用旧版本的 svgjs 修复它:http://cdnjs.cloudflare.com/ajax/libs/svg.js/1.0.1/svg.min.js

    所以显然新版本有问题。

    【讨论】:

      猜你喜欢
      • 2021-08-19
      • 2013-12-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-03-10
      相关资源
      最近更新 更多