0

私は単一の HTML5 キャンバスを持っています。100 以上のダイナミック ポリゴンを描画しました。これらのポリゴンは、パス (beginPath、moveto、lineTo、...、closePath) のコレクションです。

各ポリゴンは配列に格納されます。各要素に座標といくつかの属性情報を保存します。

ポリゴンを描画しましたが、すべて順調です。ポリゴンの上にカーソルを置いたときに、いくつかの属性を表示するためにマウスを置きたいと思います。

ポリゴン オブジェクトは実際にはオブジェクトではないため、どのポリゴン オブジェクトにもイベントをアタッチできないことがわかりました。

ホバリングしているポリゴンを確認する最も一般的/最速の方法は何ですか?

注: 私は純粋な HTML5 を使用したいと考えています。キネティックやその他のライブラリは使用していません。

ありがとう

4

2 に答える 2

0

私が書いたので、偏見を前もって認めますが、alphapun.chを使用して、キャンバスの代わりに（またはキャンバスに加えて）実際の要素を使用してポリゴンを描画できます。そうすれば、イベントを適切に検出できます。

于 2012-05-09T01:10:23.533 に答える
0

通常のテクニックは 2 つのパスです。

配列内の各ポリゴンについて:

  • 各ポリゴン情報とともに「境界矩形」を保存し、マウスカーソルがその矩形内にあるかどうかをテストします
  • 最初のテストが肯定的である場合は、よりコストのかかる「ポリゴン内のポイント」アルゴリズムを適用します。

そのアルゴリズムの例を次に示します。

function isPointInPoly(poly, pt){
  for (var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
  ((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y))
  && (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x)
  && (c = !c);
  return c;
}
于 2012-05-09T01:11:31.993 に答える