FAQ

[Raphaël] Get x,y coordinates after transformation

Victor Ponomariov
Jun 18, 2012 at 10:32 pm
Hello everyone.
I need to implement next task:

I need X, Y coordinate axis, which has their own range (X: 0...4000,
Y: -100...0 for example), and on the canvas I need to draw rectangles,
which can be transformed (resized and moved). I use free transform
plugin and everything works fine, except that after transformation the
rectangles don't change their x,y, width, height, they get transform
attribute.

Is there a way to get top left coordinate of each rectangle and its
size without working with this transform matrix?

Sorry for my english and thanks in advance

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

Search Discussions

1 response

  • Sebastian Gurin at Jun 22, 2012 at 8:45 pm
    Victor yes: First remember the "transform" attribute do not change the
    shape itself but the shape's coordinate system so it is ok x, h, width and
    height attributes do not change after transformation.

    Then for getting the "real" coords and size of a transformed shape you can
    use the matrix property like this:

    var r = paper.rect(100,130,120,70, 6).attr({fill: "red"});
    alert("rectangle X: "+r.attr("x"));
    paper.text(200,100,"Click the rect to transform it...").attr({"font-size":
    19});
    r.click(function(e){
    r.attr({transform: "s1.2t-30,-20"});
    /* realX is the rectangle's X coordinate after applying current rect
    transformation matrix. */
    var realX = r.matrix.x(r.attr("x"),r.attr("y"));
    alert("rectangle X: "+realX);
    });

    I tried to explain this more detailed in my raphael tutorial at
    http://cancerbero.vacau.com/raphaeltut/#sec-types-transform
    On Thursday, June 14, 2012 4:35:30 PM UTC-3, Victor Ponomariov wrote:

    Hello everyone.
    I need to implement next task:

    I need X, Y coordinate axis, which has their own range (X: 0...4000,
    Y: -100...0 for example), and on the canvas I need to draw rectangles,
    which can be transformed (resized and moved). I use free transform
    plugin and everything works fine, except that after transformation the
    rectangles don't change their x,y, width, height, they get transform
    attribute.

    Is there a way to get top left coordinate of each rectangle and its
    size without working with this transform matrix?

    Sorry for my english and thanks in advance
    --
    You received this message because you are subscribed to the Google Groups "Raphaël" group.
    To view this discussion on the web, visit https://groups.google.com/d/msg/raphaeljs/-/pKF420ozBY0J.
    To post to this group, send an email to raphaeljs@googlegroups.com.
    To unsubscribe from this group, send email to raphaeljs+unsubscribe@googlegroups.com.
    For more options, visit this group at http://groups.google.com/group/raphaeljs?hl=en-GB.

Related Discussions

Discussion Navigation
viewthread | post