7

Raphaelを使用して、ユーザーがキャンバス上に円や長方形を描画できるようにする単純なアプリのコードを適応させようとしています。（ https://gist.github.com/673186の元のコード）

元のコードは古いバージョンのjQueryを使用しており、正常に機能していました。http://jsfiddle.net/GHZSd/を参照してください

ただし、jQueryの更新バージョンを使用すると、例が壊れます。http://jsfiddle.net/GHZSd/1/を参照してください

これは、新しいバージョンのjQueryでは定義されevent.layerXてevent.layerYいないためです。私の質問は、これらの値を置き換えるためにどのコードを使用できるかということです。私はいくつかの計算を行うだけでいくつかのことを試しました（event.originalEvent.layerX / layerXは今のところまだ存在しているので、それらの値になるものを追加/減算しようとしています）が、これまでのところ1つで機能しますブラウザはそれらすべてで動作するわけではありません。

これまでに質問されたことがある場合は申し訳ありませんが、StackOverflowやその他の場所で具体的な回答を見つけることができませんでした。

4

2 に答える 2

10

それで、Chromeチームが奇妙な理由でlayerXとlayerYを削除したいので、私はこの問題について少し考えました。

まず、コンテナの位置が必要です。

var position = $paper.offset();

（フィドルを開かずに読んでいる人にとって、$ paperはsvgが描画されるdivです）

これにより、2つの座標、position.topおよびが得られるposition.leftため、ページのどこにコンテナがあるかがわかります。

次に、クリックすると、ページの座標であるe.pageXandを使用e.pageYします。layerXとlayerYをエミュレートするには(e.pageX - position.left)、(e.pageY - position.top)

Etvoilà：http：//jsfiddle.net/GHZSd/30/

Chrome、Safari、FF、Operaで動作します。

于 2012-04-12T23:46:26.683 に答える
1 
const bbox = e.target.getBoundingClientRect();
const x = e.clientX - bbox.left;
const y = e.clientY - bbox.top;
于 2020-05-31T13:30:26.860 に答える