Question

我有一组路径，我在inkscape中创建了一个地理地图，并使用Raphael放在网页上。当我通过Raphael加载它时，我正在应用一个变换，以便地图填充可用空间。

类似于此： -

size =“s2,2,0,0”;

translate =“t90,45”;

countries.transform（translate + size）; //国家基本上是一组路径

现在，当我点击地图时，我得到一个XY点。我想保存这些坐标，以便在转换地图之前每次单击都对应于原始坐标空间。即我想要应用反向变换，以便在加载时未映射地图时，我点击的点将出现在正确的位置。

任何人都可以告诉我如何应用这种转换（特别是这个转换或任何应用转换）这样我可以保留这些位置吗？

Answer 1

通用解决方案：

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;

希望这有帮助。

Answer 2

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

_element_.getCTM().inverse();

shold为您提供了一个变换矩阵，表示应用于_element_的所有变换的反演。这种方法与raphael无关。

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

Answer 3

我整理了一个简单的函数：

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

我在此pen上做了一个简单的示例，其中举了一个使用CSS动画制作动画的圆的示例，并使用上述代码来获取实际的变换位置。

在变换后在SVG中找到点

3 个答案: