問題タブ [konvajs]

プロジェクトでKonvaJsを使用しています。にバインドされたドラッグを実装する必要がありますKonva.Layer。私のレイヤーには他にもたくさんの形や画像があります。レイヤーの動きを幅と高さの 50% まで制限する必要があります。このplunkrで行った方法。この問題は、ユーザーがマウス ホイールを使用してレイヤーをズームインまたはズームアウトすると発生します。ズーム後、ドラッグ バウンドの動作が異なる理由がわかりません。私は数学を正しく行うことができないようです。ユーザーがズームを実行していないときにレイヤーの移動が制限される方法など、同じ動作が必要です。これは私がやっていることです:

HTML ページの画像をクリックして、画像を Konva ステージにレンダリングすることができます。jQueryを使用して画像をfadeIn()しようとしていますが、ここで行き詰まっています。

jsfiddle: https://jsfiddle.net/tommy6s/5w5swLde/8/

私はいくつかの助けを使うことができます。ありがとうございました

何らかの目的でキャンバスに入力タイプの範囲が必要です。それを使用してフォントサイズを変更する必要があります。私はすでにシェイプを作成し、ドラッグも可能にしていますが、円コントローラーは線を超えています。

ビンをプレビューして、意味を確認してください。ジャスビン

入力範囲が機能するように、ドラッグ領域を線のみに制限したい。

これは、KonvaJs ライブラリのドキュメントです。

いくつかの SVG パスを表示するキャンバスがあります。これらは、KonvaJs を使用して描画しました。ユーザーは、これらのパスのいずれかをクリックしてズームインできる必要があります。パスをクリックすると、キャンバスは、パスがキャンバスのフル サイズに収まるポイントにズームする必要があります。この JsFiddleを参照してください。(パスは別のソースからインポートされます)。

次のようにレイヤーをスケーリングできることを知っています。

しかし、適切なスケールを取得するために必要な値xと値がわかりません。y

それで、私の質問: KonvaJsを使用して、パスをコンテナに合わせてズーム/スケーリングする方法は?

私が何を意味するか知っていることを願っています。そうでない場合、AmCharts の Mapsはまさに私がやりたいことを実行してくれます。国をクリックすると、キャンバスが拡大されます。ズーム アニメーションがあると便利ですが、必須ではありません。AmCharts は私のニーズ (残りの部分) に合わないため、使用していません。

注: 以前に KineticJs を使用していたため、KonvaJs を使用し始めました。私が理解しているように、KineticJs はもう維持されていませんが、KonvaJs はそのフォークです (間違っていたら訂正してください)。これを行うためのより良いライブラリを知っている場合は、お知らせください。

私のスクリプトには非常に奇妙な動作があります: 時々のみ (一度に 3 ～ 4 回連続して実行されることはめったにありませんが、7 回目から 150 回目の試行ごとに行われる可能性が高くなります)、スクリプトはロードされますが、白いキャンバスしか表示されず、エラーメッセージを取得します：

Uncaught TypeError: Cannot read property 'getParent' of undefinedKonva.Util.addMethods.add @ konva.min.js:44draw @ floorplansurvey.php:950(匿名関数) @ floorplansurvey.php:985images.(匿名関数).onload @ floorplansurvey .php:390

リロードすると、再び機能することがよくあります...ここで何が起こっているのかまったくわかりません。バグを強制/再現することはできません。何かお手伝いできることがあれば、どうもありがとうございます。より明確な分析のための戦略でさえ役立つでしょう。具体的でなく、長いコードで申し訳ありません

編集： https ://jsfiddle.net/17548hmv/1/の下でjsfiddleを作成しました

エラーが発生するまで数回実行してください。これらは次のコード スニペットです。

@ floorplansurvey.php:390:

@ floorplansurvey.php:985images.(匿名関数).onload:

@ floorplansurvey.php:950(匿名関数):

@ konva.min.js:44draw: 私はこれを理解していません

Var ソースは次のように定義されます。

...等々

これは関数 draw です:

複数のオブジェクトを選択するために、HTML Canvas で選択ボックスを作成する方法を説明する、KineticJS を使用して複数のオブジェクトを選択するという優れたチュートリアルがありますが、著者のMichelle Higginsは、選択ボックスに含まれるオブジェクトを選択するコードを作成しました。

次の JavaScript コードは、アルゴリズムを表しています。

問題は、選択ボックスを作成して、それが受け入れるオブジェクトだけでなく、接触するオブジェクトを選択する方法ですか?

PS: これは動作中のjsbinです。

KonvaJS (最近 KineticJS から移植したもの) を独特の方法で使用するプロジェクトがあります。私は基本的にこれを使用して、建物の 3D 表現をアイソメ ビューで表示します (こちらを参照) 。

最初はすべて問題なく動作していましたが、建物のサイズが大きくなるにつれて、パフォーマンスが低下し始めました。これは、建物の照明を表現する必要があり、各照明器具には 3 つのポリゴンがあるためです。レイヤーとグループのみを使用します。ステージはドラッグ可能で、すべての照明器具が選択可能であるため、マウス イベントを使用します。

私が直面している主な問題は、ドラッグ時およびポイントとズーム時にステージを再描画することです。たとえば、私はほぼ 2000 の照明器具を備えた大きな建物を持っていますが、それを扱うことは不可能です。

これが私のノードリストの簡略版です。

• ステージ
  • 層
    • 壁ISO (グループ)
      • nx ポリゴン
    • floorISO (グループ)
      • nx ポリゴン
    • 照明器具ISO (グループ)
      • シングル照明器具（グループ）
        • 3×ポリゴン
      • シングル照明器具（グループ）
      • ...

別のレイヤーを使用する必要がありますか? それは良くなるでしょうか？不足しているものはありますか？3D フレームワークを使用するべきだったと考え始めています。

プロジェクトでKonvaJsを使用しています。Konva.Lineを設定してポリゴンを作成していますclosed:true。ポイントがポリゴンの内側にあるかどうかを把握する必要があります。ポリゴン内のポイントを見つけるためにレイキャスティングアルゴリズムを使用していますが、正常に動作しています。ただし、ポリゴンをドラッグすると問題が発生します。ドラッグしても頂点(ポイント)は同じままなので、新しい座標を取得できません。ポリゴンのポイントを使用できるように変更するにはどうすればよいですか? これがplunkrです。