0

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?

4

3 回答 3

2

通用解决方案：

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

具体解决方案：

令 (x1, y1) 为要保留的点。

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;

希望这可以帮助。

于 2013-05-13T13:26:22.777 回答
0

你必须反转当前的变换矩阵：

_element_.getCTM().inverse();

shold 为您提供一个转换矩阵，表示应用于_element_. 这种方法与拉斐尔没有具体关系。

注意：按规范，我自己没有测试。

于 2013-05-13T13:30:37.900 回答
0

我整理了一个简单的功能：

// point: SVGPoint
// element: The element containing the point
function getTransformedPoint(point, element) {
  const matrix = element.getCTM().inverse();
  return point.matrixTransform(matrix);
}

我在这支笔上做了一个简单的例子，一个使用 CSS 动画动画的圆圈的例子，并使用上面的代码来获得实际的变换位置。

于 2020-12-06T10:06:08.353 回答