0

私はhtml5でインタラクティブマップを表示することに取り組んでいます。

次のような数値の配列(座標を表す)としてマップのゾーンを作成しました:

Zone1=[{x=3,y=4}, {x=8,y=5}]

また、次のようなゾーンの配列であるマップも作成しました。

map=[zone1, zone2....]

関数を使用してキャンバスにゾーンを描画するのに問題はありませんcontext.lineTo()。同じ方法で、クリック時にマウスの位置をキャプチャし、ユーザーがポイント イン ポリゴン アルゴリズムを使用してクリックしたゾーンを特定できます。

クリックしたときにゾーンの色を塗りつぶしたいときに問題が発生します。

誰にもアイデアがありますか？

PS:

  • 私が作った形は不規則です
  • jQuery などの JavaScript ライブラリを使用することには興味がありません
4

2 に答える 2

1

HTML5 Canvas は、操作できるオブジェクトの形状の概念を認識していません。状況には 2 つのオプションがあります。

  • SVG を使用して必要なものを描画します ( W3Schoolsの例を確認 してください) 。
  • 抽象化を追加して形状の概念を提供する JS キャンバス ライブラリを使用します ( EasleJSを確認してください) 。
  • キャンバス上に独自の抽象化を書き、形状を提供します

ただし、そのようなライブラリを使用しても、「形状」は完全に再描画されることを知っておく必要があります。おそらく、シーン全体が再描画されます。SVG はこれを軽減します。形状/オブジェクトの数が増えるとパフォーマンスが低下します。

于 2012-11-09T14:08:18.170 に答える
0

できません。作成したシェイプは、キャンバスに追加されると変数にも参照にもなりません。古い色の上に新しい色で形状を再描画することもできますが、ライブラリを使用してこれを処理することをお勧めします。

自分で使ったことがあるので、Kinetic.js をお勧めしますが、選択肢はたくさんあります。

于 2012-11-09T13:38:13.353 に答える