HTML5キャンバスを使用した不規則なイメージのドラッグアンドドロップ

Question

HTML5で以下のようなアプリケーションを作成したいと考えています。

HTML5 Canvas Animals on the Beach Game with KineticJS

そのデモに伴う問題は、しかしイベントの上にマウスが動物を囲む長方形にのみ正確です。もっと正確にこれを行う方法はありますか？それはKinectJSかそうでなければ何ですか？

Answer 1

は、一般に、2つの方法があります。

1. 次に使用（手動で定義する）hitboxesとして各画像にカスタムパスを使用してポイント・イン・パスアルゴリズム
2. ゴーストキャンバスを使用して（私がthis old tutorialで詳しく述べたように）新しいチュートリアルへのリンクを無視してください。古いチュートリアルでは必要なものを使います。

ここでの最初の方法ははるかに高速ですが、より多くのコードと手作業が必要です。 2番目の方法はピクセル完全ですが、はるかに遅くなります。それでも、膨大な量のオブジェクトがなければ、それはあなたのニーズに合うかもしれません。