問題タブ [konvajs]

次のコードを使用して、クリックしている画像の ID を取得しようとしています。

Konva コードは次のとおりです。

ご覧のとおり、画像の作成中にid: 'IDofImg' がありますが、必要な ID を出力していないようです。

現在、クリックすると次のように出力されます。

私は何が欠けていますか？

ここでフィドル

ユーザーがどの画像をクリックしたかを確認するために、キャンバスにリスナーを追加したいと思っています。

現在、私は次のコードを持っています（そしてそれはうまく動作します）：

ただし、複数の画像がある場合は、画像ごとに zzzz.on('click',...を作成する必要はありません。

Konva に addEventListener があることに気付いたので、以下を実行してみました。

そして、特定の画像を呼び出してもうまくいかないようですか？JSFIDDLEでこれを試すと、エラーが発生します。

取得したエラーに加えて、画像のみをクリックするたびに起動するようにaddEventListenerを設定するにはどうすればよいですか?

私は、KonvaJS で 1 次元のボール バウンスの問題を実験していましたが、損失はありませんでした。したがって、ボールは単純に振動しているように見えるはずです。

この方程式は、こちらから入手できます。（読み方についてはこちらをクリック）。

完全なコードはgithubで入手できます(セットアップについては README.md を確認してください)。

以下のコードは、アニメーション部分を担当します。

私にとって、上向きのアニメーションが高速になることは理にかなっています。方程式はそう言っています。しかし、その結果としてのアニメーションはスムーズではありません。私は、ボールが上向きに速く上昇し、上向き (頂点) の高さに達する前に減速し、再び落下すると予想しています。

理論的に言えば、2 回の移動にかかる時間は同じになるはずです。ただし、このアニメーションの場合はそうではありません。したがって、私の方程式が間違っているか、アニメーションで何かを微調整する必要があります。

イベントの処理に関して、 KonvaJSと KineticJSに違いはありますか? 同じコードを使用すると、イベント likemouseoverおよび other は KineticJS を使用してのみ機能します。助言がありますか？

html5ビデオとキャンバスを使用してデバイスカメラのmediaStreamにアクセスし、写真を撮ってキャンバスに画像をレンダリングするWeb機能が機能しています。うまく機能しますが、キャンバスの代わりに konvajs ステージを使用したいと思います。

コード

完全なコードはこちら: https://jsfiddle.net/tommy6s/63qbt12b/

konvajs ライブラリを使用して複数の画像をキャンバスに描画しています。画像は特定の点で透明です。

ここで、画像にクリック ハンドラーをアタッチしたいのですが、その時点で画像が透明な場合はクリック ハンドラーを起動しないでください。

ただし、現在、一番上の画像はすべてのクリック ハンドラーを取得します。画像の透明部分のクリック イベントを無視する方法はありますか?