2

クリックすると色が変わる円のあるキャンバスがある場合は、canvas要素でクリックイベントを使用して、その計算を処理できます（距離式の計算<=半径）。しかし、（ベン図のように）2つの円が重なっていて、上の円だけが色を変えると仮定して、2つの円の中央をクリックするとどうなりますか？この場合、最初の円の計算を適用すると、両方の円の色が変わります。

上記の例のように、オブジェクトが重なっているという観点から、キャンバス内のイベントをどのように処理しますか？うまくいけば、高速で効率的なアルゴリズムですか？

4

2 に答える 2

1

Canvasは、FlashやDOMツリーとは異なり、並べ替え順序やzインデックスがあります。これはフラットなラスターイメージに少し似ており、描画したものの順序とスタック順序を記憶するには、JavaScriptの他のロジックに依存する必要があります。

この種の双方向性が必要な場合は、サードパーティのライブラリを使用するのが常に最善であることがわかりました（実際には、あまり機能しない1つまたは2つのサークルの場合を除きます）。

インタラクティブな「シェイプ」ベースのJavaScriptグラフィックスの場合、実際にはキャンバスツールよりもSVGツールであるRaphael.jsまたはD3を使用するので、おそらくそれはあなたには向いていませんが、シンプルでクロスブラウザーです。

また、processing.js（Processing the Java libのjsポート）もあります。これは、フラッシュのように感じられ、すべてのレベルとオブジェクトを追跡できます。他にもたくさんありますが、それは別のトピックです。

非常に単純な場合、オプションは次のようになります。

  1. オブジェクトまたは配列内のキャンバス上で合成されたすべての形状/要素の座標を保持します。これは、z-index / sortシーケンスも追跡し、それによって何が上にあるかを知らせます。
  2. クリックのマウス座標でimagedataを使用して、クリックされたものを確認します
  3. 互いに合成された複数のキャンバスを使用し、クリックイベントの作業をDOMに任せます
于 2012-08-30T08:56:51.280 に答える
1

EaselJSのような、実行しようとしていることに対してより優れたAPIを備えたフレームワークが必要になる場合があります。Barebones canvas 2d-contextは、display-object/spriteの動作に関してはあまり提供しません。

上記の回答では、レイヤーを表すためのある種のリストについても言及しています。実装はそれほど難しいことではないと思います。半径とともに確認するもう1つの条件です。

于 2012-08-30T08:59:20.167 に答える