26

SVG 仕様の一部を実装しているブラウザー (Firefox など) は、無料でヒット テストを行ってくれます。SVG オブジェクトにマウスダウン リスナーをアタッチすると、形状がクリックされるたびに通知が届きます。これは、特に複雑な多角形の場合は驚くべきことです。

この機能をもう少しヒット テストに利用できる方法はないかと考えています。特定の長方形が私の SVG 形状と交差するかどうかを知りたいです。

たとえば、要素に 3 つの複雑なポリゴンを追加します。今、長方形 (40, 40, 100, 100) がそれらのいずれかと交差しているかどうかを知りたいです。このすべてのコードを自分で追加する代わりに、すでに利用可能な優れたヒット テスト サポートに接続する方法を知っている人はいますか?

ありがとう

4

4 に答える 4

29

SVG 1.1 DOM には適切なメソッドがあります (残念ながら、mozilla にはまだ実装されていません)。

var nodelist = svgroot.getIntersectionList(hitrect, null);

完全な動作例については、こちらを参照してください。

于 2010-02-01T17:27:18.143 に答える
18

長方形全体を交差させる方法がわかりません。しかし、ポイントを交差させることができるので、それからより複雑なチェックアウトを構築できます:

var el= document.elementFromPoint(x, y);

特定のページ相対座標で最もスタックされた要素を提供します。<svg>SVG 内の形状がヒットしない場合、要素を取得します。

これは非標準のMozilla 拡張機能ですが、WebKit でも機能します。残念ながら、Opera には存在しますが、内部は検索されない<svg>ため、そのブラウザでは要素は常に SVGSVGElement になります。

于 2010-02-01T15:14:14.457 に答える
2

Chrome のバージョンの checkIntersection (および getIntersectionList) は、要素自体ではなく、要素の境界ボックスをテストします。このかなり複雑なアプローチを使用してキャンバスを使用することで、クロムで動作する独自の checkIntersection を作成できました。これは、小さな四角形ではうまく機能し、大きな四角形では遅くなるため、ヒット テストには適しています。この手法は、Chrome の checkIntersection のポリフィルとして機能し、小さな四角形や、checkIntersection の実装が壊れている可能性のある他のブラウザーで機能します。

  1. SVG の outerHTML を含むデータ URI を使用する画像を作成します (スタイル ルールも含める必要がある場合があります)。そのようにします (この画像はページ内にある必要はありません)。必要に応じて、onload イベント ハンドラーを使用して、いつ読み込まれるかを判断できます。
  2. ヒット テストの四角形に使用するキャンバスを作成します (このキャンバスはページ内にある必要はありません)。

長方形が図形と交差するかどうかをテストするには、次のようにします。

  1. キャンバスが長方形と同じサイズであることを確認します (幅と高さを設定します)。
  2. キャンバス コンテキストclearRect()メソッドを使用してキャンバスをクリアする
  3. キャンバスに重なるイメージの部分がdrawImage()を使用してテストする領域に対応するように、-x、-y でキャンバスに SVG を描画します。
  4. コンテキストのgetImageData()を使用してキャンバスの ImageData を取得します。データ配列の 4 番目ごとの要素はアルファ バイトであり、ゼロ以外の値は、SVG の一部が四角形に重なっていることを意味します。4 番目のバイトがすべて 0 の場合、SVG は長方形と交差していません。
于 2017-05-03T17:44:25.657 に答える
0

getIntersectionListはOperaで正常に動作します。私の問題は、これに関するSVG 1.1 Full仕様の関数では、ヒットとして検出されるために要素をレンダリングする必要があることです（そしてポインターイベントのターゲットになる可能性があります）。残念ながら、これにより、これらの関数は、現在世界の一部しか表示されていないゲームの世界でのヒットテストには使用できなくなります。

于 2011-10-27T19:39:26.727 に答える