Question

我正在开发一个原型来模拟这个tool并提供像

这样的最小功能

拖放简单对象
通过路径连接相关对象
从此结构生成JSON

我选择了SVG和Snap.svg框架（很难决定在D3和Snap.svg之间，但最后只是因为它是Raphael的最新版本和继承者）才能实现它。在实施过程中我坚持下面

问题1：如何在不同的SVG元素之间拖动对象？尝试拖动此Fiddle中的元素，在其父级维度之外拖动对象时会隐藏这些元素。下面的小提琴片段供您阅读。

HTML/SVG:
<div class="stencil">
    <svg id="stencil" height="300" version="1.1" width="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    </svg>
</div>
<div class="paper">
    <div class="paper__scroller">
        <svg id="paper" height="1000" version="1.1" width="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        </svg>
    </div>
</div>

Javascript:
(function(){
    var pap = Snap("#paper"),
        stencil = Snap("#stencil"),
        cir = stencil.circle(30, 50, 20),
        rec = stencil.rect(70, 33, 35, 35);
        stencilElements = stencil.group(rec, cir);

    stencilElements.attr({
        fill: "#f00",
        stroke: "#000",
        strokeWidth: 2,
        "fill-opacity": 0.5
    });

    cir.clone().drag();
    rec.clone().drag();

}());

问题2：如何通过拖动对象时相应调整/移动的路径连接相关对象？

问题3：如何将生成的图形/图表转换为JSON结构？

真的很感激任何参考或暗示实现这一点。

SVG：在两个不同的SVG元素之间拖动对象

0 个答案: