Geek asks and answers

Raphael transformation transformation does not behave

I am doing an animated conversion in Raphael (and Snap.svg, which does the same).

If I applied the rotation to the base element, it rotates normally, as expected. However, if I already applied the previous conversion (even if its t0,0 or r0), the element seems to zoom out and back up, as if it should always fit into its previous bounding box or something like that .

Below is an example

var r1 = s.rect(0,0,100,100,20,20).attr({ fill: "red", opacity: "0.8", stroke: "black", strokeWidth: "2" }); 
r1.transform('t0,0'); // any transform leads to shrink on rotate...
r1.animate({ transform: 'r90,50,50' }, 2000);


var r2 = s.rect(150,0,100,100,20,20).attr({ fill: "blue", opacity: "0.8", stroke: "black", strokeWidth: "2" });
r2.animate({ transform: 'r90,200,50' }, 2000);

Is there something obvious that I do not see in the animated transformations of what is happening?

+3
source share
1 answer

There are several different things that you need to understand in order to understand what is happening here.

-, , . , :

var r1 = s.rect(0,0,100,100,20,20)
        .attr({ fill: "red", opacity: "0.8", stroke: "black", strokeWidth: "2" }); 
r1.transform('t0,0'); 
    // any transform leads to shrink on rotate...
r1.animate({ transform: 't0,0r90,50,50' }, 5000); 
    //unless you repeat that transform in the animation instructions

http://jsfiddle.net/96D8t/3/

, :

var r1 = s.rect(0,0,100,100,20,20)
        .attr({ fill: "red", opacity: "0.8", stroke: "black", strokeWidth: "2" }); 
r1.transform('r0,50,50'); // no shrinking this time...
r1.animate({ transform: 'r90,50,50' }, 2000);

http://jsfiddle.net/96D8t/4/

, 0,0 0 ? , , .

Snap/Raphael , ( ) .

2D-

a   c   e
b   d   f

( )

x y, x, y , 1:

newX = a*oldX + c*oldY + e;
newY = b*oldX + d*oldY + f;

do-nothing, t0,0,

1   0   0
0   1   0

,

{a:1,  c:0,  e:0,
 b:0,  d:1,  f:0}

, , newX 1 X, newY 1 .

r90,50,50:

0   -1   100
1    0   0

I.e., (50 100),

newX = 0*50 -1*100 + 100*1 = 0
newY = 1*50 + 0*100 + 0    = 50

(50 100) 90 (50,50), (0,50), .

,

1   0   0
0   1   0


0   -1   100
1    0   0

,

0.5   -0.5   50
0.5    0.5   0

45 (50,50).

, , , , .

, , , , .

+7

More articles:


All Articles