我有这4个矩形和每个矩形具有应用于其旋转变换的一些量。 我把所有这些矩形在一组,然后把它应用转型。 这样做对个人矩形旋转变换丢失。 我不希望这样的事情发生。 我怎样才能解决此问题?
JS小提琴代码
window.onload = function(){
var paper = Raphael(0,0,500,500);
var rect01 = paper.set();
paper.setStart();
var a = paper.rect(10,10,50,10).transform("r10");
var b = paper.rect(10,30,50,10).transform("r-10");
var c = paper.rect(10,50,50,10).transform("r10");
var d = paper.rect(10,70,50,10).transform("r-10");
var rect01 = paper.setFinish();
rect01.transform("t100,100");//comment out this line to view the individual transformations
}
每当你做任何复位以前变换的元素新的变换,我敢肯定有很多方法可以实现你想要的,一个办法是只做移动在同一时间旋转。
注:在你的情况,你所要做的旋转前的举动。
window.onload = function(){
var paper = Raphael(0,0,500,500);
var a = paper.rect(10,10,50,10).transform("t100,100r10");
var b = paper.rect(10,30,50,10).transform("t100,100r-10");
var c = paper.rect(10,50,50,10).transform("t100,100r10");
var d = paper.rect(10,70,50,10).transform("t100,100r-10");
}
http://jsfiddle.net/Vqn93/2/
更新:
经过进一步的分析,你能够追加和前面加上转换,所以如果你想保持你的设置,你有它,你也可以这样做:
window.onload = function(){
var paper = Raphael(0,0,500,500);
var rect01 = paper.set();
paper.setStart();
var a = paper.rect(10,10,50,10).transform("r10");
var b = paper.rect(10,30,50,10).transform("r-10");
var c = paper.rect(10,50,50,10).transform("r10");
var d = paper.rect(10,70,50,10).transform("r-10");
var rect01 = paper.setFinish();
// prepend the translation before all the rotations
rect01.transform("t100,100...");
}
在为元素的文档转换您使用......之前或取决于如果你想前面或后面附加后的状态。
http://jsfiddle.net/Vqn93/3/