我已经做了很多关于拖动 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度状态。为什么?任何解决方案?
最佳答案
问题在于,每当通过应用包含移动、旋转、缩放等指令的字符串来转换元素时,它都会重置转换对象,因此之前的转换会丢失。为避免这种情况,请在转换字符串的开头添加“...”。喜欢,
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
希望这对您有所帮助。
关于javascript - 如何使用 Raphael js 库拖动旋转的形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16802801/