0

私は、インクスケープで地理マップを作成し、Raphael を使用して Web ページに配置したパスのセットを持っています。Raphael を介してそれらをロードすると、マップが使用可能なスペースを埋めるように変換を適用しています。

これに似たもの:-

サイズ = "s2,2,0,0";

翻訳 = "t90,45";

countries.transform(翻訳 + サイズ); // 国は基本的に一連のパスです

マップをクリックすると、XY ポイントが表示されます。これらの座標を保存して、マップを変換する前に、各クリックが元の座標空間に対応するようにします。つまり、ロード時にマップが変換されていない場合に、クリックしたポイントが適切な位置に表示されるように、逆変換を適用したいと考えています。

位置を保持できるように、この変換 (適用された変換に具体的または一般的に適用する方法) を適用する方法を誰かに教えてもらえますか?

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

に適用されるすべての変換の反転を表す変換行列を提供する必要があります_element_。この方法は特にラファエルとは関係ありません。

注：仕様により、自分でテストしませんでした。

于 2013-05-13T13:30:37.900 に答える