Question

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.0/joint.css" />
</head>
<body>
    <!-- content -->
    <div id="myholder"></div>

    <!-- dependencies -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
    <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/jointjs/2.1.0/joint.js"></script>

    <!-- code -->
    <script type="text/javascript">

        var graph = new joint.dia.Graph;

        var paper = new joint.dia.Paper({
            el: document.getElementById('myholder'),
            model: graph,
            width: 600,
            height: 100,
            gridSize: 1
        });

        var rect = new joint.shapes.standard.Rectangle();
        rect.position(100, 30);
        rect.resize(100, 40);
        rect.attr({
            body: {
                fill: 'red'
            },
            label: {
                text: 'free',
                fill: 'white'
            }
        });
        rect.addTo(graph);

        var rect2 = rect.clone();
        rect2.translate(300, 0);
        rect2.attr('label/text', 'transform!');
        rect2.addTo(graph);

			var link1 = new joint.dia.Link({
        attrs: {
            '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z' },
            '.connection': { stroke: 'black' }
        }
    });
link1.source(rect);
link1.target(rect2);
link1.addTo(graph);

    </script>
</body>
</html>

jointJs中的链接工具没有freeTransform可以通过拖动将其从一个位置移动到另一个位置。假设我只想单独拖动一个链接工具而不选择任何其他元素，那么将很难替换该链接-tool。我已在以下链接中复制了该问题：https://jsfiddle.net/aL52fzub/1/

我试图为链接元素创建光晕，但是当我尝试为相同元素创建freeTransform时，它会抛出错误。

我用过joint.ui.FreeTransform({})，但抛出错误。

预期结果：只需拖动链接工具即可单独移动它。

如果没有在JointJs中选择任何其他元素，则无法在纸张上单独拖动链接工具

0 个答案: