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