带集合的 Raphaeljs 变换 [英] Raphaeljs transformations with sets

问题描述

我有这 4 个矩形，每个矩形都应用了一些旋转变换.我将所有这些矩形放在一个集合中，然后对其应用变换.这样做会丢失单个矩形上的旋转变换.我不希望这种情况发生.我该如何解决这个问题?

I have these 4 rectangles and each rectangle has some amount of rotation transformation applied to it. I put all these rectangles in a set and then applied transformation on it. Doing so the rotation transformation on the individual rectangles was lost. I do not want that to happen. How can I work around this?

JS Fiddle 代码

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

}

推荐答案

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

Whenever you do a new transform on an element it resets any previous transforms, I'm sure there are numerous ways to achieve what you want, one way would be to just do the move at the same time as the rotation.

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

NOTE: In your case you have to do the move before the rotation.

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/

更新:

经过进一步分析后，您可以附加和前置转换，因此如果您想保持您的设置不变，您也可以这样做:

After further analysis you are able to append and prepend transformations, so if you want to keep your set as you had it you can also do:

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...");

}

元素转换文档 状态，您使用...之前或之后取决于如果您想添加或附加.

The docs for element transform state that you use ... before or after depending on if you want to prepend or append.

http://jsfiddle.net/Vqn93/3/

这篇关于带集合的 Raphaeljs 变换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！