Raphael JS嵌套变换
Raphael JS嵌套变换
提问于 2012-06-01 11:48:16
我在Raphael中有几个嵌套集，我想像photoshop中的图层一样使用它们。也就是说:集合中的对象可能有它们自己的转换，并且作为一个集合的位置，它们在其中变得相对定位。而set也可能有自己的转变。
现在，当应用一个集合转换时，它只分别对每个元素执行，并且相对于页面的绝对位置。
有了这个力学，我遇到了这样一个简单的问题:我有一个集合和一个矩形。然后用缩放(0.5、0.5、0.5、0、0)调整矩形的大小；然后要拖动整个集合。我使用set.translate(x，y)执行拖动。因此，我得到的矩形移动速度比其他非缩放项目慢两倍。
var rdr = this;
this.paper = Raphael(0,0,1000,1000);
this.set = this.paper.set();
this.set.push(this.paper.rect(0,0,100,100)); // non-scaled rectangle
this.set.push(this.paper.rect(0,0,100,100).scale(0.5,0.5,0,0)); // scaled rectangle
$("body").bind("mousedown.RDR",function(e) {
var ox = e.pageX;
var oy = e.pageY;
$("body").bind("mousemove.RDR",function(e) {
rdr.set.translate(e.pageX-ox,e.pageY-oy);
ox = e.pageX;
oy = e.pageY;
}).bind("mouseup.RDR",function() {
$("body").unbind("mouseup.RDR").unbind("mousemove.RDR");
});
});如何纠正此代码以使矩形以相同的速度移动？
从理论上讲，我需要同时移动一组对象的方法是控制转换的顺序。我还没有找到内置的解决方案，所以有一个小问题可以插入已经应用于元素的“在”转换之前的转换：
Raphael.el.translateBefore = function(x,y) {
var matrix = this.matrix;
var transform = matrix.toTransformString();
transform = ("t"+x.toString()+","+y.toString()) + "," + transform;
this.transform(transform);
return this;
}
this.paper = Raphael(this.containerId,this.paperWidth,this.paperHeight);
// добавляем метод для raphael.set через жопу, не нашел нормальный способ
this.paper.set().__proto__.translateBefore = function(x,y) {
_.each(this,function(el) {
el.translateBefore(x,y);
});
return this;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2012-06-06 14:27:53
http://raphaeljs.com/reference.html#Element.transform
// if you want you can append or prepend transformations
el.transform("...t50,50");
el.transform("s2...");页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10849678
复制相关文章
相似问题
腾讯云开发者
