Question

我正在尝试使用Snap来操纵SVG，但是在沿路径拖动一组元素时遇到了一些问题。

    var data = [{"msmittens007":39717783},{"starboynaseem321":60806140},{"creeper333888":32048827},{"simontax":52222895},{"marissahill55":44062186},{"tgibs1":52704223},{"angelsunrise7":57944274},{"nicks24":51306000},{"opticbomb":21804587},{"KhloeTheMoaiOwie":26598082}];

    var valueCollection = []; 
      for (var i= 0; i<data.length; i++){
          for(var key in data[i]){ 
          var value = data[i][key]; // you can use this value      
           valueCollection.push(value);  // for sample pushing into array you can use as per you need here
           }
        }

我可以拖动组，它会停留在我放弃的位置，但是当我再次开始拖动时，该组会回到它的原点，如果我发疯了，它就会变得非常错误。

我是SVG的新手，我尝试了一些教程来学习，但是这些东西已经脱离了我的联盟，我真的很感激你的一些见解

编辑：我的here更好，谢谢你指出Ian。

Answer 1

我认为问题在于你每次都要重置牛。在前面的例子中，他们使用attr（'cx'）而不是ox，所以他们总是引用形状的原始位置来偏移。每次重置时，差异始终为零，因此重置为临时。所以你需要做一些修改。

因此，在我们做任何事情之前，让所有'牛'成为'原始位置'。并将'sx'称为'起始位置'，我们可以找出每个阻力开始。我们需要这个来添加'dx'（在拖动中添加差值）。

我们可以直接存储原始位置...然后稍后更改变换以引用原始位置，而不是起始位置。

group.drag(move, start, end);
group.data("ox", +group.getBBox().cx);
group.data("oy", +group.getBBox().cy);

start = function () {
    this.data("sx", +this.getBBox().cx);
    this.data("sy", +this.getBBox().cy);
},

move = function (dx, dy) {

    var tmpPt = {
        x: this.data('sx') + dx,
        y: this.data('sy') + dy
    };

    l = gradSearch(l, tmpPt);

    pt = path.getPointAtLength(l);

    // We change this!!!
    if (!isNaN(pt.x) && !isNaN(pt.y)) {
       this.transform('t' + (pt.x - this.data("ox")) + ',' + (pt.y - this.data("oy")) );
};
},

jsfiddle

Snap.svg沿路径拖动一组并保存位置

1 个答案: