javascript - RaphaelJS 上的可拖动字体

Question

我试图使一些使用 print() 可拖动的文本添加。我发现了一些 SO 帖子，但代码不起作用 - 我已将其作为小提琴重新发布 - 在 chrome 和 FF 上，文本飞离屏幕。如果我将 getBBox() 参数设置为 false，它会在第一次拖动时起作用，但是在随后的拖动中，鼠标会发生偏移。

var w = document.body.clientWidth,
    h = document.body.clientHeight,
    paper = Raphael(0, 0, w, h);

var font = paper.getFont("Vegur");
var text = paper.print(20,20,"my dragable text",font,50);

var start = function () {
    text.oBB = text.getBBox();
},
move = function (dx, dy) {
  var bb = text.getBBox(true); // Setting to false works once
  text.transform('...T'+[text.oBB.x - bb.x + dx, text.oBB.y - bb.y + dy]);
},
up = function () {

};

text.drag(move, start, up);

Answer 1

弄清楚了...

var start = function() {
  //get original position before any transform
  var obb = this.getBBox(true);
  //get position after last transform
  var nbb = this.getBBox(false);
  //store difference
  this.ox = nbb.x - obb.x
  this.oy = nbb.y - obb.y;
},
move = function(dx, dy) {
  //apply difference to mouse moves
  this.transform('T' + [this.ox + dx, this.oy + dy]);
},
up = function() {
};