問題タブ [konvajs]

この投稿の回答に従いました。画像をテクスチャパターンで塗りつぶすと、完全に機能しています。

KonvaJSで同じことを行う方法はありますか?

konva.js では、2 つのテキスト項目を持つグループがあります。グループを作りましたdraggable。x印刷してyテキストにドラッグした後、変更されませんでした：

コードの残りの部分はまったく同じですKonva Text Demo

KonvaJSでanyを定義すると、呼び出されるたびにそれが呼び出されます。sceneFunc()Shapedraw()

1. Shape.draw()
2. layer.draw()
3. stage.draw()

sceneFunc()問題は、コンテキストのクリアを防ぎ、以前の呼び出しで過去の描画を保持する方法です。

画面サイズに合わせて div をスケーリングする Web アプリがあります。div の幅が 500px で画面が 600px だとしましょう。JavaScript で div にtransform: scale(1.2)css プロパティを設定すると、画面サイズに一致します。div 内には、拡大縮小されたキャンバスがあります。KonvaJS を使用して要素を描画し、それらをドラッグする必要があります。コンピューターでアプリを実行すると、ドラッグはうまく機能しますが、モバイル、iPad、または iPhone で実行すると、ドラッグにオフセットがあり、ドラッグできるようにするには、要素の外側に指を置く必要があります。ここで簡単なアプローチを見ることができますhttps://jsfiddle.net/aapdl/47x75uuq/2/ 各ボックスをコンピューターにドラッグしてから、モバイル、iPad、または iPhone にドラッグしてみてください。ありがとう。

Konvajs を使用して以下のタスクを実行したいと思います。

1. キャンバスに 2 つの長方形グループを描画します。各グループには、長方形、テキスト、および円が含まれています
2. マウスを使用して円からドラッグすると、ドラッグ中に矢印が描画されます。
3. 矢印を別のグループにドロップすると、描画が停止し、2 つのグループが端から端まで接続されます

このようなもの：

シェイプ間の接続をサポートするネイティブ メソッドはありますか? 誰か例を教えてください。

キャンバスにさまざまなサイズの 100 個の円を描いていますが、重なってはいけません。これらの円も右から左にアニメーション化され (画面から消えると、キャンバスの右端にループして戻ります)、垂直方向の「ボブ」もいくつかありますが、これも他の円と重なることはありません。

以下は私が現在試みているもので、ブラウザをロックしているようです。円のコレクションをループしてdetectOverlap()関数を実行し、円のコレクションに渡します。

次に、detectOverlap()関数は円をループし、次のチェックを実行します。

の場合hit == 0、ループが中断され、オーバーラップがないと見なされます。それ以外の場合は、新しい X/Y 位置をランダムに計算し、プロセスを再開します。

これは効率が悪いようです。これを行うためのパフォーマンスのヒントはありますか?

キャンバス クラス (エントリ ポイント) : このクラスは「ステージ」であり、バブル オブジェクトを構築してキャンバスに追加します。

バブル クラス: 画面に描画されるデータを表すクラスです。これらのオブジェクトが互いに重ならないようにする必要があります。

EDIT : @MarcB からのコメントに基づいてこれを試してみましたが、ブラウザはまだロックしているようです。パフォーマンスのボトルネックが発生していますが、100 個の項目がすべて独自のwhile()ループを実行していますか?