Transform and Scale in Raphael 2

[DOH]

Trying to get my head around the new matrix transform and scale. Scale
does not appear to behave as in Raphael1 probably because of the
transformation matrix. So using getBBox to find the position of an
object and translate to move it to a new position does not work as in
Raphael1 if the object has been scaled. Is there an easy way to
translate a scaled object? In Raphael2 the translate appears to be
scaled too and it all gets very confusing!

Also animate appears to animate all the prior transformations of an
object rather than just the particular transformation referred to in
the transform. Is this to be expected? If so how should it be
implemented to restrict to one transformation?

some code here:
--------------------------------------
var tri= paper.path("M 100 100 L 150 100 L 125 140 z").attr({
fill: "blue",
});
var bBox =tri.getBBox(true);
tri.translate(0,40);
tri.rotate(60);

tri.animate({
transform:""
}, 10000, "elastic");

};
--------------------------------------
omitting tri.rotate(60); and changing animate's transform value to
"r60" gives the same result of animating not only the rotate but also
the translate.

Anyone got advice as to how one should implement the code so that only
the rotate is animated?

[DOH]

OK solved.

You need to store the object's transformation matrix at some point so
that you can restore it when needed omitting any subsequent
transformations. So for a button that changes size and colour when
hovered over

In Raphael 1.52
// Hover navigation buttons
arrowback.hover(function(){
this.animate({
scale: [1.2, 1.2],
"fill": calcellbgd_hover
}, 500, ">");
}, function(){
this.stop();//if moveout stop animation early
this.scale(calscale, calscale).attr("fill", "#FFFFFF");
});


In Raphael 2.00
// Hover navigation buttons
arrowback.hover(function(){
tstr=this.transform();// record transformation string
this.scale(1.2, 1.2);
this.animate({
fill: calcellbgd_hover
}, 500, ">");
}, function(){
this.stop();//if moveout stop animation early
this.attr("fill", "#FFFFFF"); this.transform(tstr); // and
restore original state
});



Hope that is useful to others too.

[charles thomas]

DOH

This is in reply to your original query.

As you know I "reviewed" the Beta some time ago but obviously missed a whole bunch of stuff.

The query you raised hilights the fact that scale, translate and rotate ("rotation") do not exist anymore in 2.0 as attributes but a new "transform" attribute does.

The only point you actually missed, I think, was that you can reset the transform before each and every call to animate.

http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2&q=element.animate

Thanks for your inputs (Also prievious about Text in 2 for IE8)

Regards Charles

---

From: DOH <phild...@gmail.com>
To: Raphaël <raph...@googlegroups.com>
Sent: Friday, July 22, 2011 11:41:19 AM
Subject: Re: Transform and Scale in Raphael 2

--
You received this message because you are subscribed to the Google Groups "Raphaël" group.
To post to this group, send an email to raph...@googlegroups.com.
To unsubscribe from this group, send email to raphaeljs+unsub...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/raphaeljs?hl=en-GB.

[DOH]

Thanks Charles, and yes I was aware that you can reset the transform,
but in my case the buttons had already undergone a transformation to
correctly position them on the page (perhaps I should have pointed
that out). Consequently resetting the transformation would send them
back to their origins so for my purposes I needed to record their
current transformation before animating. However it would also have
been better if I had used the transform append scale string as shown
here so that it was animated as with the original Raphael 1.52.

// Hover navigation buttons
arrowback.hover(function(){
tstr=this.transform();// record transformation string
this.scale(1.2, 1.2);
this.animate({

transform: "...s1.2 1.2",

fill: calcellbgd_hover
}, 500, ">");
}, function(){
this.stop();//if moveout stop animation early

this.attr("fill", "#FFFFFF"); this.transform(tstr); // and
restore original state
});

On Jul 23, 3:36 pm, charles thomas <charles...@yahoo.com> wrote:
> DOH
>
> This is in reply to your original query.
>
> As you know I "reviewed" the Beta some time ago but obviously missed a whole bunch of stuff.
> The query you raised hilights the fact that scale, translate and rotate ("rotation") do not exist anymore in 2.0 as attributes but a new "transform" attribute does.
>
> The only point you actually missed, I think, was that you can reset the transform before each and every call to animate.
>

> http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2&q=element...

>
> Thanks for your inputs (Also prievious about Text in 2 for IE8)
>
> Regards Charles
>
> ________________________________

> From: DOH <phildejo...@gmail.com>

> To unsubscribe from this group, send email to raphaeljs+...@googlegroups.com.

[DOH]

OOps left the this.scale(1.2, 1.2); in by mistake when cutting and
pasting should be :-

// Hover navigation buttons
arrowback.hover(function(){
tstr=this.transform();// record transformation string

this.animate({
transform: "...s1.2 1.2",
fill: calcellbgd_hover
}, 500, ">");
}, function(){
this.stop();//if moveout stop animation early
this.attr("fill", "#FFFFFF"); this.transform(tstr); // and
restore original state
});