轉換後在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中找到點

回答

相關問題