RaphaelJS上的可拖动字体

时间:2013-02-08 18:53:01

标签: javascript svg raphael

我试图使用print()draggable添加一些文本。我发现了一些SO帖子,但代码不起作用 - 我把它作为fiddle重新发布 - 在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);

1 个答案:

答案 0 :(得分: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() {
};