Question

我有两个可以拖动的视觉对象。我想在它们之间“粘合”一条线，这样当我拖动一个对象时，线条会调整并保持卡在拖动对象上的相同相对点上（想想node-red，jointjs，cad / cam）。

使用元素组（0,0）创建可视对象。通过翻译组对象的矩阵来实现拖动。（我想使用矩阵，因为这将有助于将来放大和缩小）。

我想我想创建一种新的“线”，它包含两个元素 - 起点和终点。起点与视觉对象1分组，端点与对象2分组。如果拖动对象2，则线的端点将包含在组2的矩阵变换中，并将一直停留在该对象上。（与对象1和起始点类似）。

我是snap和js的新手。我坚持如何创建一个包含起点和端点元素的新“line”元素（例如如何扩展行原型或“子类”）。

需要建议。感谢。

Answer 1

我认为这就是你要找的东西。它在屏幕上的两个正方形之间附加一条线，您可以拖动它。

为可拖动的矩形创建一个快照插件。

Snap.plugin(function (Snap, Element, Paper, global, Fragment) {

获取当前的转型。

    function dragStart(x, y, e) {
        this.current_transform = this.transform();
    }

更新当前转型。

    function dragMove(dx, dy, x, y, e) {
        this.transform(this.current_transform+'T'+dx+','+dy);
        this.updatePaths();
    }

保存当前转换。

    function dragEnd(e) {
        this.current_transform = this.transform();
    }

浏览每个保存的路径并更新其路径属性。调用prependTo - 确保它在矩形后面。

    function updatePaths() {
        var key;
        for(key in this.paths) {
            this.paths[key][0].attr({"path" : this.getPathString(this.paths[key][1])});
            this.paths[key][0].prependTo(paper);
        }
    }

获取每个元素的坐标。

    function getCoordinates() {
        return [this.matrix.e + (this.node.width.baseVal.value / 2),
          this.matrix.f + (this.node.height.baseVal.value / 2)];
    }

使用两个元素坐标获取路径字符串。

    function getPathString(obj) {
        var p1 = this.getCoordinates();
        var p2 = obj.getCoordinates();
        return "M"+p1[0]+","+p1[1]+"L"+p2[0]+","+p2[1];
    }

添加两个元素的路径。使用他们的ID作为参考。 Snap会自动为元素创建一个随机ID，因此我们不需要。

    function addPath(obj) {
        var path = paper.path(this.getPathString(obj))
            .attr({
              fill:'none', 
              stroke:'blue',
              strokeWidth:1
            });

        path.prependTo(paper);
        this.paths[obj.id] = [path, obj];
        obj.paths[this.id] = [path, this];            
    }

创建draggableRectangle原型并附加所有功能。

    Paper.prototype.draggableRect = function (x, y, w, h) {

        var rect = paper.rect(0,0,w,h).attr({id: id}).transform("T"+x+","+y);
        rect.paths = {};
        rect.drag(dragMove, dragStart, dragEnd);
        rect.updatePaths = updatePaths;
        rect.getCoordinates = getCoordinates;
        rect.getPathString = getPathString;
        rect.addPath = addPath;

        return rect;
    };
});

创建论文。

var paper = Snap("#svgout");

创建可拖动的矩形。

var rect1 = paper.draggableRect(0, 0, 40, 40);
var rect2 = paper.draggableRect(0, 0, 40, 40);

将它们相互连接。

rect1.addPath(rect2);

以下是JSFiddle

的链接

snap svg粘合线端点用于拖放

1 个答案: