1

我已经做了很多关于拖动由 Raphael 的库创建的对象的示例。现在我正在使用集合，并且还能够编写代码来拖动它们。

现在，当我旋转一个对象然后拖动它时，我的问题就出现了。

查看此代码示例：demo

var paper = Raphael('stage', 300, 300);
var r = paper.rect(50,100,30,50).attr({fill:"#FFF"}).rotate(45),
    t = paper.text(30, 140, "Hello");

var p = paper.set(r, t);

r.set = p, t.set = p;


p.newTX=0,p.newTY=0,p.fDx=0,p.fDy=0,p.tAddX,p.tAddY,p.reInitialize=false,

start = function () {

},
move = function (dx, dy) {
    var a = this.set;
    a.tAddX=dx-a.fDx,a.tAddY=dy-a.fDy,a.fDx=dx,a.fDy=dy;
    if(a.reInitialize)
    {
        a.tAddX=0,a.fDx=0,a.tAddY=0;a.fDy=0,a.reInitialize=false;
    }
    else
    {
        a.newTX+=a.tAddX,a.newTY+=a.tAddY;
        a.attr({transform: "t"+a.newTX+","+a.newTY});
    }

},
up = function () {
    this.set.reInitialize=true;
};
p.drag(move, start, up);

通过查看 DEMO，您可以看到该集合是使用旋转矩形创建的，但是一旦您拖动它，它就会回到 0 度状态。为什么？有什么解决办法吗？

4

2 回答 2

5

问题在于，每当通过应用包含移动、旋转、缩放等指令的字符串来转换元素时，它都会重置转换对象，因此之前的转换会丢失。为避免这种情况，请在转换字符串的开头添加“...”。喜欢，

var el = paper.rect(10, 20, 300, 200);
// translate 100, 100, rotate 45°, translate -100, 0
el.transform("t100,100r45t-100,0");
// NOW, to move the element further by 50 px in both directions
el.transform("...t50,50");

如果使用“t50,50”而不是“...t50,50”，则“t100,100r45t-100,0”的变换效果将丢失，“t50,50”规则的变换效果将丢失。

拉斐尔进一步研究参考：http ://raphaeljs.com/reference.html#Element.transform

希望这可以帮助。

于 2013-05-30T11:27:12.757 回答
1

我找到了解决这个问题的简单方法。因为我需要一个菱形而不是矩形，所以我创建了一个代表那个菱形的路径。然后这条路径就变成了一个旋转了 45 度的正方形。事实证明这很容易，因为我为我的程序拥有的拖动功能可以完美地与路径配合使用。

于 2013-07-07T06:47:43.030 回答