I have a set of paths that i have created a geographical map with in inkscape and used Raphael to put on a webpage. When i load them through Raphael i am applying a transform so that the map fills the available space.
something similar to this :-
size = "s2,2,0,0";
translate = "t90,45";
countries.transform(translate + size); // countries are basically a set of paths
Now, when i click on the map i get an XY point. I want to save these coordinates so that each click corresponds to the original coordinate space BEFORE i transformed the map. i.e. i want to apply a reverse transformation so that the points i clicked would appear in their proper position if the map had not been transformed when loaded.
Can anyone tell me how to apply this transformation (this one specifically or in general to any applied transformation) so i can preserve the positions?
Generic solution:
function getOriginalPt (x, y, element) {
var matrix = element.matrix.invert(),
x1 = x * matrix.a + y * matrix.b + matrix.e,
y1 = x * matrix.c + y * matrix.d + matrix.f;
return {x: x1, y: y1};
}
// USAGE
var paper = Raphael(0, 0, 500, 400),
rect = paper.rect(10, 50, 100, 100).transform('t50,90s2,2,15,30t200,-50'),
bBox = rect.getBBox(),
originalPt = getOriginalPt(bBox.x, bBox.y, rect);
Specific solution:
Let (x1, y1) be the point to preserve.
var pt = {x: x1, y: y1},
scaleOrigin = {x: 0, y: 0},
scale = {x: 2, y: 2},
translate = {x: 90, y: 45};
// EDITED
pt.x = (pt.x - scaleOrigin.x - translate.x) / scale.x + scaleOrigin.x;
pt.y = (pt.y - scaleOrigin.y - translate.y) / scale.y + scaleOrigin.y;
Hope this helps.