html - キャンバス: マウス イベント

Question

キャンバス内の特定の円または長方形にイベント ハンドラを追加できないことはわかっています。しかし、EaselJS、KineticJS、Paper.js、Fabric.js など、特定の要素のイベント処理をサポートする優れたフレームワークがいくつかあります。

誰かが私にどのように機能するか説明できますか?

解決策は2つしかないと思います。
1. 要素ごとに新しいキャンバス領域を作成し、それらを相互に配置します。このようにして、各リージョンにイベント ハンドラーを与えることができます。
2. 1 つのキャンバス領域と 1 つのイベント ハンドラしかありません。このように、特定の要素がクリックされたかどうかを調べるには、複雑な数学的計算を行う必要があります。円または長方形しかない場合、この解決策は簡単かもしれません。しかし、多くの曲線があるパスがある場合、この解決策は非常に困難です。

ライブラリを使用したくありません。誰かが私を助けることができれば、それは素晴らしいことです。

Answer 1

これは、キャンバス描画ライブラリがどのように機能するかについての簡単な要約です。

変更されていないキャンバスは、単なる大きなビットマップです。キャンバスに図形を描くと、それらはアクセスできなくなり、忘れられたピクセルになります。

キャンバス描画ライブラリは、すべての形状を「保持された」オブジェクトに保存します。各シェイプオブジェクトには、描画ライブラリが必要なときにいつでも再描画できるように、それ自体に関する十分な情報があります。

キャンバス描画ライブラリは、オブジェクトの「コントローラ」です。ライブラリには、必要に応じてすべての形状オブジェクトを追跡、操作、および再描画するために必要なアルゴリズムがあります。

次の情報は、すべてのシェイプオブジェクトについて保持されます。

基本的な識別

• ID、
• 形状名
• 親またはコンテナ

形状の固有のプロパティ：

• 長方形の形状（長方形、画像、テキスト）は、幅と高さを知っています。
• 円形（円、楕円、正多角形、星）は、半径とサイドカウントを知っています。
• 線は長さを知っています。
• 曲線形状（円弧、ベジエ、パス）は、アンカーポイントとコントロールポイントを認識しています。
• テキストも知っています…まあ、テキスト！
• 画像はピクセルデータも知っています（通常はjavascript Imageオブジェクトに保存されます）

変革の情報：

• X/Y座標の開始
• 平行移動—開始座標からの累積移動。
• 回転-この形状の累積回転（通常はラジアン）。
• スケーリング-累積されたサイズ変更
• 他の変換（あまり一般的ではありません）はスキューとワープです
• 階層化情報—現在のz-index

スタイリング情報：

• StrokeColor、
• StrokeWidth、
• 塗りつぶしの色、
• 不透明度、
• isVisible、
• lineCaps、
• コーナーラディウス

追跡能力：

• バウンディングボックス—この形状を完全に含む最小の長方形
• これは、マウスがこのオブジェクト内にあるかどうかを確認するための「ヒットテスト」に使用されます（選択およびドラッグ用）

Answer 2

ライブラリを使用したくない場合は、このスレッドの私の回答が役立つ場合があります。markE が言うように、キャンバスが書き込まれると、そのデータを追跡する方法はありません (個々のピクセルをループしてその色をテストしない限り、ピクセル レベルの衝突検出にのみ役立ちます)。