1

keith-wood jquery プラグインを動的に使用して、SVG キャンバスを HTML でインラインで作成しました。

SVG 要素で viewBox 属性を使用して、SVG キャンバスのコンテンツをスケーリングしました。

SVG キャンバス内に、それぞれ 1x1 単位の繰り返しパターン (タイル) で四角形を描画します。

800x800 のボード:

    var svg = $(containerDiv).svg('get');
    svg.configure({viewBox: minX + "" + minY + "" + width + "" + height});
    var pat1 = svg.pattern('pat1', 0, 0, 1, 1, {patternUnits: 'userSpaceOnUse'});
    var rectTile = svg.rect(pat1, 0, 0, 1, 1);
    var rectBoard = svg.rect(0, 0, 800, 800, {fill: 'url(#pat1)'});

ユーザーが SVG 内の要素の 1 つにカーソルを合わせたときに、マウス イベントの pageX と pageY のピクセル座標を、viewBox のスケーリングを考慮してタイルの座標に変換したいと考えています。したがって、ユーザーが最初のタイルにカーソルを合わせた場合、e.pageX と e.pageY を指定すると、{x: 0, y: 0} が返されます。ここで、e は mousemove jquery イベント オブジェクトです。

これを計算するにはどうすればよいですか?

ありがとう

4

0 に答える 0