转换后在SVG中找到点

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

一些与此类似： -

大小= “s2,2,0,0”;

translate =“t90,45”;

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

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

任何人都可以告诉我如何应用此转换（这一个具体或一般适用于任何应用的转换），所以我可以保留职位？

来源

2013-05-13 Alex Ainsworth

通用的解决方案：

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-13 13:26:22 NRC

@Alex ainsworth，用一般的解决方案改进了答案，一般适用于任何一组转换。 – NRC 2013-05-13 20:00:54

谢谢NRC很好地解释它 – 2013-05-15 13:01:43

@AlexAinsworth，乐于帮助。但是，由于您是StackOverflow的新手（从您的配置文件中可以看出），我想让您知道（如果尚未）提高您最喜欢的答案或满足您的需求的概念。它可以帮助我们获得更多有意义的点数，他们有兴趣回答。帮助我们建设更强大的社区。希望你不介意。 :) – NRC 2013-05-16 12:49:36

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

_element_.getCTM().inverse();

shold您提供表示施加到_element_所有变换的反转的变换矩阵。这种方法并不涉及raphael具体。

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

来源

2013-05-13 13:30:37 collapsar

据我所知，拉斐尔只能转换一个元素。因此，在这种情况下，转换完整路径可能很昂贵并且不必要。 – NRC 2013-05-13 13:40:34

转换后在SVG中找到点

回答

相关问题