HTML5 キャンバスにいくつかの画像を描画しており、マウス クリックでヒットするかどうかを確認したいと考えています。簡単に思えますが、画像の境界はありますが、画像は変換されます(変換およびスケーリングされます)。残念ながら、コンテキストには現在の変換行列を取得するメソッドがなく、行列乗算用の API もありません。唯一の解決策は、自分で変換を追跡し、行列の乗算を実装することです。提案を歓迎します。
4510 次
1 に答える
17
これは、3D (OpenGL) グラフィックスの世界でもよくある問題です。
解決策は、補助キャンバス オブジェクト (表示されない) を作成し、その中に画像を再描画することです。描画は、各要素が一意の色で描画されることを除いて、メイン キャンバスの描画とまったく同じです。次に、マウス ピックに対応するピクセルを検索し、その色を読み取ります。これにより、対応する要素 (存在する場合) が得られます。
これは、OpenGL の世界で一般的に使用される方法です。「opengl object picking」などのグーグル用語で説明を見つけることができます。これは多くの検索結果の 1 つです。
更新: HTML5 キャンバス仕様にヒット領域が含まれるようになりました。これらがブラウザでどの程度サポートされているかはまだわかりません。
于 2010-06-30T17:43:38.160 に答える