Question

我是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/

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

Answer 1

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

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

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

编辑：其实我很想先去这里，我觉得这很有用Get bounding box of element accounting for its transform

Answer 2

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

想象一下，就像你在方格纸上绘制形状一样，变换会移动整个方格纸，但是当你在方格纸上看到形状的位置它没有改变时，它是被移动的方格纸，但你不是测量那个。

Answer 3

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

moveFnc = function(dx, dy, x, y, event) {
  lx = this.matrix.e;
  ly = this.matrix.f;
  this.transform('translate(' + lx + ',' + ly+')');
}

使用snap.svg获取拖动时svg组的坐标

3 个答案: