1

我有这 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

}
4

1 回答 1

3

每当你对一个元素进行新的变换时，它会重置任何以前的变换，我相信有很多方法可以实现你想要的，一种方法是在旋转的同时进行移动。

注意：在您的情况下，您必须在旋转之前进行移动。

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/

于 2012-10-15T08:21:40.737 回答