7

我是 svg 的新手，我想我会尝试 snap svg。我有一组要拖动的圆圈，并且正在寻找该组的坐标。我正在使用 getBBox() 来执行此操作，但它没有像我预期的那样工作。我希望 getBBox() 更新它的 x 和 y 坐标，但它似乎没有这样做。这看起来很简单，但我想我错过了一些东西。这是代码

var lx = 0,
  ly = 0,
  ox = 0,
  oy = 0;
  moveFnc = function(dx, dy, x, y) {
      var thisBox = this.getBBox();
      console.log(thisBox.x, thisBox.y, thisBox);
      lx = dx + ox;
      ly = dy + oy;
      this.transform('t' + lx + ',' + ly);
  }
  startFnc = function(x, y, e) {  }
  endFnc = function() {
      ox = lx;
      oy = ly;  
      console.log(this.getBBox());
  };

var s = Snap("#svg");
var tgroup = s.group();
tgroup.add(s.circle(100, 150, 70), s.circle(200, 150, 70));
tgroup.drag(moveFnc, startFnc, endFnc);

jsfiddle 位于http://jsfiddle.net/STpGe/2/

我错过了什么？我将如何获得组的坐标？谢谢。

4

3 回答 3

9

正如罗伯特所说，它不会改变。但是 getBoundingClientRect 可能会有所帮助。

this.node.getBoundingClientRect(); //from Raphael

Jsfiddle 在这里显示了差异http://jsfiddle.net/STpGe/3/。

编辑：其实我很想先去这里，我发现这个非常有用的获取元素的边界框来解释它的变换

于 2013-11-04T19:09:45.263 回答
7

根据SVG 规范，getBBox 在应用变换后获取边界框，因此在变换属性建立的坐标系中，位置是相同的。

想象一下，就像您在方格纸上绘制形状，设置一个变换移动整个方格纸，但是当您查看方格纸上形状的位置时，它并没有改变，是方格纸移动了，但您没有测量它。

于 2013-11-04T18:46:34.250 回答
1

尝试使用 group.matrix 对象来获取组对象的 x 和 y 坐标。

moveFnc = function(dx, dy, x, y, event) {
  lx = this.matrix.e;
  ly = this.matrix.f;
  this.transform('translate(' + lx + ',' + ly+')');
}
于 2013-12-11T10:53:49.463 回答