javascript - 捕捉 svg 拖动一组集合

Question

我希望能够使用 Snap SVG 将一组集合作为一个组进行拖动。到目前为止，我只能将子集(矩形和文本框)作为一个项目进行拖动，但我想要实现的是集体“表格”是可拖动的，而其中的字段仍保留为单独的形状，因此我可以保持它们之间的联系正常工作。这可能吗？(编辑 - 我从 Raphael 重构为 Snap 并尝试将集合放入一个组中进行拖动)

这里是骗子的链接:http://plnkr.co/edit/9ewo0OcgThwB4KyMTxIL?p=preview

还有下面的代码:

    // Code goes here

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

Paper.prototype.connection = function (obj1, obj2, line, bg) {
    if (obj1.line && obj1.from && obj1.to) {
        line = obj1;
        obj1 = line.from;
        obj2 = line.to;
    }
    var bb1 = obj1.getBBox(),
        bb2 = obj2.getBBox(),
        p = [{x: bb1.x + bb1.width / 2, y: bb1.y - 1},
        {x: bb1.x + bb1.width / 2, y: bb1.y + bb1.height + 1},
        {x: bb1.x - 1, y: bb1.y + bb1.height / 2},
        {x: bb1.x + bb1.width + 1, y: bb1.y + bb1.height / 2},
        {x: bb2.x + bb2.width / 2, y: bb2.y - 1},
        {x: bb2.x + bb2.width / 2, y: bb2.y + bb2.height + 1},
        {x: bb2.x - 1, y: bb2.y + bb2.height / 2},
        {x: bb2.x + bb2.width + 1, y: bb2.y + bb2.height / 2}],
        d = {}, dis = [];
    for (var i = 0; i < 4; i++) {
        for (var j = 4; j < 8; j++) {
            var dx = Math.abs(p[i].x - p[j].x),
                dy = Math.abs(p[i].y - p[j].y);
            if ((i == j - 4) || (((i != 3 && j != 6) || p[i].x < p[j].x) && ((i != 2 && j != 7) || p[i].x > p[j].x) && ((i != 0 && j != 5) || p[i].y > p[j].y) && ((i != 1 && j != 4) || p[i].y < p[j].y))) {
                dis.push(dx + dy);
                d[dis[dis.length - 1]] = [i, j];
            }
        }
    }
    if (dis.length == 0) {
        var res = [0, 4];
    } else {
        res = d[Math.min.apply(Math, dis)];
    }
    var x1 = p[res[0]].x,
        y1 = p[res[0]].y,
        x4 = p[res[1]].x,
        y4 = p[res[1]].y;
    dx = Math.max(Math.abs(x1 - x4) / 2, 10);
    dy = Math.max(Math.abs(y1 - y4) / 2, 10);
    var x2 = [x1, x1, x1 - dx, x1 + dx][res[0]].toFixed(3),
        y2 = [y1 - dy, y1 + dy, y1, y1][res[0]].toFixed(3),
        x3 = [0, 0, 0, 0, x4, x4, x4 - dx, x4 + dx][res[1]].toFixed(3),
        y3 = [0, 0, 0, 0, y1 + dy, y1 - dy, y4, y4][res[1]].toFixed(3);
    var path = "M" + x1.toFixed(3) + "," + y1.toFixed(3) + "C" + [ x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join();
    if (line && line.line) {
        line.bg && line.bg.attr({path: path});
        line.line.attr({path: path});
    } else {
        var color = "#000";
        return {
            bg: bg && bg.split && this.path(path).attr({stroke: bg.split("|")[0], fill: "none", "stroke-width": bg.split("|")[1] || 3}),
           line: this.path(path).attr({stroke: color, fill: "none"}),
            from: obj1,
            to: obj2
        };
    }
}

});


var el;
(function () {
    var color, i, ii, tempS, tempT;
    var dragger = function () {
        this.data("ox", this.attr("x"));
        this.data("oy", this.attr("y"));
        if (this.type != "text") this.animate({"fill-opacity": .2}, 500);

        //this.pair.ox = this.pair.attr("x");
        this.pair.data("ox", this.pair.attr("x"));
        //this.pair.oy = this.pair.attr("y");
        this.pair.data("oy", this.pair.attr("y"));
        if (this.pair.type != "text") this.pair.animate({"fill-opacity": .2}, 500);
    },
        move = function (dx, dy) {
            var att = {x: parseInt(this.data("ox")) + dx, y: parseInt( this.data("oy")) + dy};
            this.attr(att);
            //att = {x: this.pair.ox + dx, y: this.pair.oy + dy};
            att = {x: this.pair.data("oy") + dx, y: this.pair.data("oy") + dy};
            this.pair.attr(att);
            for (var i = connections.length; i--;) {
                s.connection(connections[i]);
            }
        },
        up = function () {
          if (this.type != "text") this.animate({"fill-opacity": 0}, 500);

          // Fade paired element on mouse up
          if (this.pair.type != "text") this.pair.animate({"fill-opacity": 0}, 500);
        },
        s = Snap("#svgout"),
        connections = [],
        shapes = [  // Users
                    s.rect(250, 80, 80, 20),
                    s.rect(250, 100, 80, 20),
                    s.rect(250, 120, 80, 20),
                    // Groups
                    s.rect(380, 80, 80, 20),
                    s.rect(380, 100, 80, 20),
                    s.rect(380, 120, 80, 20)
                ],
        texts = [   
                    s.text(290, 90, "Users"), //0
                    s.text(290, 110, "id"), //1
                    s.text(290, 130, "name"), //2
                    s.text(420, 90, "Groups"), //3
                    s.text(420, 110, "id"), //4
                    s.text(420, 130, "owner") //5
                ];
    for (var i = 0, ii = shapes.length; i < ii; i++) {
        color = "grey";
        tempS = shapes[i].attr({fill: color, stroke: color, "fill-opacity": 0, "stroke-width": 2, cursor: "move"});
        tempT = texts[i].attr({fill: color, stroke: "none", "font-size": 15, cursor: "move"});


        //shapes[i].drag(move, dragger, up);
        //texts[i].drag(move, dragger, up);

        // Associate the elements
        //tempS.pair = tempT;
        //tempT.pair = tempS;
    }
    connections.push(s.connection(shapes[1], shapes[5]));
    var group1 = s.g(shapes[0], shapes[1], shapes[2], texts[0], texts[1], texts[2]);
    group1.drag(move, dragger, up);

})();

Answer 1

使用 Snap 会更容易一些，因为您根本不需要担心设置。 graffle/转换代码工作正常，但它只适用于矩形和圆形，因此实际上看起来可能有点复杂，但我们可以让它适用于通过变换拖动的任何形状。

为了做到这一点，我们需要创建一个插件来获取一个边界框来说明其变换，我不认为 Snap 目前会这样做(尽管有方法 getBBox(1) 我不认为这是正如我想象的那样工作)

因此，最初需要一个插件来获取转换后的bbox(可能有更有效的方法，但只是做一个快速解决方案)...

Element.prototype.getTransformedBB = function() {
    var bb = this.getBBox(1);
    var t = this.node.getTransformToElement( this.paper.node );
    var m = Snap.matrix( t );
    var obj = { x: m.x( bb.x, bb.y ), y: m.y( bb.x, bb.y ), x2: m.x( bb.x2, bb.y2 ), y2: m.y( bb.x2, bb.y2 ),
             cx: m.x( bb.cx, bb.cy ), cy: m.y( bb.cy, bb.cy ) }
    obj['width'] =  obj.x2 - obj.x
    obj['height'] = obj.y2 - obj.y
    return obj;
};

然后在连接代码中使用 getTransformedBB，而不是 getBBox()...

var bb1 = obj1.getTransformedBB(),
    bb2 = obj2.getTransformedBB(),

现在您正在使用 Snap，您可以使用适用于所有形状的简单拖动处理程序...

 var dragger = function () {

    this.data('origTransform', this.transform().local )
    this.animate({"fill-opacity": .5}, 500);
},
 move = function (dx, dy) {
        this.attr({ transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]})
        for (var i = connections.length; i--;) {
            s.connection(connections[i]);
        }
 },
 up = function () {
      this.animate({"fill-opacity": 1}, 500);
 },

如果您只使用矩形，您可能不需要 TransformedBB 的东西，但我认为这个解决方案可能适用于更奇怪的组情况。

plunker

来自组顶部的连接有点奇怪，不确定这是否是原始代码的错误或什么，但如果需要，您可以通过在矩形上放置白色填充并制作来解决它确保这是在连接后添加的。