Finding the coordinates of a rotated image in Raphael

Question

I have a page with a rectangular image. The user can rotate the image to any angle and move it to any position on the paper.

Without the rotation I can just use the getBBox() method to find the corners but with rotation it doesn't work.

How can I find the corners of a rotated image in Raphael?

Answer 1

You can use the x and y functions on the Matrix object to find the image corner coordinates after transformation. http://raphaeljs.com/reference.html#Matrix.x

All 4 corners of image:

var paper = Raphael(0, 0, 500, 500);
var el=  paper.image("http://www.abcgallery.com/R/raphael/raphael57a.jpg", 100, 100, 210, 258);
el.transform('t20r45');
var x = el.matrix.x(el.attr("x"), el.attr("y"));
var y = el.matrix.y(el.attr("x"), el.attr("y"));

var x2 = el.matrix.x(el.attr("x") + el.attr("width"), el.attr("y"));
var y2 = el.matrix.y(el.attr("x") + el.attr("width"), el.attr("y"));

var x3 = el.matrix.x(el.attr("x"), el.attr("y") + el.attr("height"));
var y3 = el.matrix.y(el.attr("x"), el.attr("y") + el.attr("height"));

var x4 = el.matrix.x(el.attr("x") + el.attr("width"), el.attr("y") + el.attr("height"));
var y4 = el.matrix.y(el.attr("x") + el.attr("width"), el.attr("y") + el.attr("height"));

paper.circle(x, y,5);
paper.circle(x2, y2, 5);
paper.circle(x3, y3, 5);
paper.circle(x4, y4, 5);

http://jsfiddle.net/eWdE8/5/

---

Old answer, only for finding the coordinates of the bounding box:

You should use getBBox() with isWithoutTransform set to false (which is the default), and it will work.

var paper = Raphael(0, 0, 500, 500);
var el  =  paper.image("http://www.abcgallery.com/R/raphael/raphael57a.jpg", 100, 100, 210, 258);
el.transform('r45')
console.log(el.getBBox(false)) // After transform
console.log(el.getBBox(true))  // Before transform

http://jsfiddle.net/eWdE8/