Question

我想用 snapsvg 拖动群组。该组只能在x轴上拖动。所以我建立了这个：

window.onload = function () {
    var were = function() {
        var that = this;
        this.wer = Snap("100%", 500);
        this.x = 0;
        this.y = 0;
        this.group = this.wer.g();

        this.construct = function() {
            for(var i = 1; i <= 100; i++) {
                that.one(i - 1, 0);
            }

            that.group.drag(
                function (dx, dy, x, y, e) {
                    this.attr({
                        x: Snap.snapTo(20, that.x + dx, 100000000),
                        y: 0
                    });
                },

                function (x, y, e) {
                    that.x = e.toElement.x.baseVal.value;
                    that.y = e.toElement.y.baseVal.value;
                }
            );
        };

        this.one = function(x, y) {
            this.width = 19;
            this.height = 60;

            that.group.add(that.wer.rect(x * (this.width + 1), y, this.width, this.height).attr({
                "fill": "#CCC"
            }));
        }
    }

    var test = new were();
    test.construct();
}

但它不起作用。

如果我只在组中的一个元素上应用相同的拖动功能，它就可以工作。如果我删除拖动功能中的功能，它也有效。但我没有看到错误。

Answer 1

问题是组是容器对象，并且没有x，y属性。它们基本上是它们元素的总和，你可以通过变换来移动它们。

基本原则是相似的。您存储起始变换，并调整相对于该变换的平移。您可以对其进行设置，以便不会更改垂直平移。

使用提供的小提琴jStiller，你可以得到像this fiddle

这样的例子

var s = Snap("#svg");

var block = s.rect(150, 0, 100, 100, 20, 20).attr({
  fill: "rgb(236, 240, 241)",
  stroke: "#1f2c39",
  strokeWidth: 3
});

var block2 = block.clone().transform('t0,100');
var group = s.g(block, block2);

group.drag(
  function (dx, dy, x, y, e) {  
    var tdx = +this.data('ot').split().dx + dx;

    var newTx = Snap.snapTo(50, tdx, 100000000)
    this.attr({
      transform: 't' + [newTx, 0]  
    });
  },
  function (x, y, e) {
     this.data('ot', this.transform().localMatrix);
});

用snapsvg拖动一个组

1 个答案: