私はHTML5で何かを描画するためにjavascriptを使用して実験しています。
そして、私は形状がインタラクティブであることを望みます。
私は、現在のマウスの位置は、JavaScriptによる形（任意の形、多分不規則な形）に落ちるかどうかを計算できることを知っています。
しかしそれはあまりにも簡単です。
このcalcをいくつかの納得させるためにいくつかのapiまたはlibにしていますか？
ような、ただ例です。HTML5のキャンバス内の任意の図形をドラッグ
var anyshape = new Shape();
anyshape.addEventListen('mousemove', onMouseMove);
又は
var anyshape = new Shape();
anyshape.onMouseMove = function(){};
Fabric.jsボックスの外にドラッグ形を提供します。クリック/ホバーされたオブジェクトなどのイベントリスニングと検出もサポートされています。
var myShape = /* any shape */;
canvas.observe('mouse:down', function(e) {
if (e.memo.target === myShape) {
/* mouse down on myShape */
}
});
event inspector demoもご覧ください。
あなたはすべての機能を自分で実装するか、ライブラリを使用する必要があります。
ライブラリを使用したくない場合は、可動シェイプを作成するときにfew tutorialsと書いています。
SVGを見て、あなたのニーズに合ったものかどうかを確認することを強くお勧めします。イベントリスナーとヒットテストが組み込まれた複雑なパスは、すでにSVGにあります。
あなたのチュートリアルは、私が必要とするものではありません。 – Magic
それは正確ではありませんが、概念は同じです。作成したい図形についてすべてを把握し、ヒットテストを自分で行うか、ライブラリを使用する必要があります。クリーンな組み込みの方法はありません。あなたのためにもっと良いものはSVGです。ここにはたくさんのものが組み込まれています。 –
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-path-tutorial/キネティックスはあなたにとって最も簡単で最も簡単な方法です。 forループに複数のsvgとイベントリスナーを追加するだけで済みます。
for{
create shape code
add event listener
console log - kinetic rocks
}
しかし、我々は、形状を大量に持っている場合。 if elseやswitch/caseのようなものを書くべきです。これらのコードを維持するのは頭痛です。私はよりクリーンな方法が必要です。 – Magic