2013-02-08 84 views
0

我試圖使用print()拖拽添加一些文本。我發現了一些SO貼子,但代碼無效 - 我已將它作爲fiddle轉貼 - 在Chrome和FF上,文字從屏幕飛出。如果我將getBBox()參數設置爲false,它將首先進行拖動,但隨後在後續拖動時鼠標將偏移。RaphaelJS上的可拖拽字體

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

想通了......

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() { 
};