17

以前にここで svg マウス座標に関する質問があったことは知っていますが、私が経験している現在の動作に非常に困惑しており、どのスレッドもそれに対処していないようです。

座標をキャプチャするために使用する方法：

var pt = svg.createSVGPoint();  // Created once for document

function alert_coords(evt) {
    pt.x = evt.clientX;
    pt.y = evt.clientY;

    // The cursor point, translated into svg coordinates
    var cursorpt =  pt.matrixTransform(svg.getScreenCTM().inverse());
    console.log("(" + cursorpt.x + ", " + cursorpt.y + ")");
}

問題は、マウス クリック座標をユーザー空間の svg 座標に変換することです。座標を使用して画面上で長方形をドラッグしています。カーソルが svg 空間で右に移動するにつれて、座標はますます歪んでいます。これを簡単にテストするために、(100, 500)、(500, 500)、(1000, 500)、および (1000, 200) のグローバル SVG 空間に 3 つの四角形を配置します。単純なログ機能を使用して、私が受け取る座標 (マウスの不正確さのプラスまたはマイナス 5) は (98, 473)、(487, 470)、(969, 471)、(969, 190) です。マウスが x 軸または y 軸に沿って遠くに行くほど、不正確になることがわかります。マウス座標をキャプチャするのと同じ方法を使用して、これをフィドルで複製しようとしましたが、そこで複製できません... もう 1 つ重要な点として、svg ドキュメントをログに記録すると、幅と高さがビューボックスの値よりもわずかに小さい値に設定されるという事実があります。ビューボックスの値が「0 0 1400 700」の場合、幅は 1380、高さは 676 です。とにかく、これがフィドルです。すべてのsvgプロパティは、私のプログラムと同じです。

http://jsfiddle.net/ASLma/11/

4

1 に答える 1

9

問題はブラウザで直接svgを開いたようです。代わりに、embed タグを使用して HTML ページに埋め込んだところ、うまく機能しました。マウス座標の精度に関してそれが問題になる理由はわかりませんが、解決策は解決策です。

于 2012-10-12T17:30:16.147 に答える