私は非常に素晴らしいFabricJSフレームワークを使い始めましたが、オブジェクトの配置が CSS の規則とは少し異なることに気付きました。CSS がポジショニング ピボットを左上隅に配置するのに対し、FabricJS はそれをオブジェクトの中央に配置します。

CSS

FabricJS

この設定を制御する方法はありますか? ありがとう。

編集：

これは、プロジェクトのロードマップの既存の項目です。将来的にはそうなるでしょうが、現在はサポートされていません。

背景のある単純なfabric.canvas要素があり、その幅と高さを上の画像と同じに設定しました。次に、キャップ画像を追加しました。問題は、サイズ変更コントロールがずれていることです。私もこれを画像で明らかにしました。

これが私がページにキャンバスを追加する方法です

そして、これは私が画像を追加する方法です

を使用してアプリケーションを作成していますfabric.jsが、非常に奇妙な動作が発生しています。fabric.Canvas通常の(not )を使用して、画像とテキストの両方のインスタンスを追加していますが、fabric.StaticCanvas追加後にこれらのアイテムを移動またはサイズ変更できません。各タイプを数個だけ追加しました。基本的な機能は、いくつかのボタンのクリック イベントに関連付けられたコールバックにラップされますが、ファブリックのコア機能は次のようになります (簡略化されていますが、ファブリック関連のコードに関してはほとんどすべてが同じです)。

上記のコードは要素を適切にレンダリングしますが、サイズ変更や移動はできず、静的に動作します。奇妙なことに、Chrome 開発パネルを開いたり閉じたりすると (F12 または [Ctrl/CMD]+SHIFT+I を 2 回使用)、キャンバスが機能を回復し、すべてが再び機能します。私もサーバー側でいくつかのことを行っています (これは私が行っていることの単なるサンプルです) が、これをこの奇妙な動作にさらに追跡する方法がわかりません。私は最新のコード（githubリポジトリから構築）を使用しています。考え？

に編集可能なオブジェクトを入れてfabric.Group、オブジェクトの1つを移動できるようにする方法はありますか？

私は Fabric.js を発見しました。ドキュメンテーションは少し不足していますが、私が構築している HTML ベースの Dream Board ツールに必要なすべてを処理してくれるようです。ただし、JQueryUI ではうまく機能しないようです。

オブジェクトのいずれかを JQueryUI ウィジェット、ボタン、ダイアログ ボックスなどに設定すると、コントロール ハンドルがキャンバス アイテムの上半分で応答しないように見えます。回転が大幅に減少し、アイテムの操作が難しくなります。誰かがこれに遭遇しましたか？これは既知の問題ですか? 私はgithubをチェックし、SOを無駄に検索しようとしました。

ありがとうございました！

http://seismicdevelopment.com/test/no-jquery-uis.html - JQuery UI ウィジェットがありません...期待どおりに動作します。

http://seismicdevelopment.com/test/with-jquery-uis.html - [画像を追加] をクリックすると、画像が表示されますが、他のページと比較すると、画像の角が欠けていることがわかります。インタラクティブに...画像を移動することはできますが、回転とスケーリングは非常に難しいです。

base64でエンコードされた画像として新しいウィンドウでキャンバスを開かずに、キャンバスをPNGとして保存したい。

私はこのコードを使用しました：

ボタンが画像をPNGまたはJPGとして保存するようにしたい。

現在のキャンバスの状態をおそらく JSON 文字列としてサーバー側のデータベースに保存し、後でloadFromJSON. 通常、これは次を使用して簡単に実現できます。

その後

ただし、組み込みObject#setメソッドを使用して、キャンバスに追加する生地オブジェクトにいくつかのカスタム属性も設定しています。

問題は、サーバー側でリクエストを確認すると、カスタム属性がキャンバスから解析されず、他のすべてのものと一緒に送信されていることがわかります。これはおそらく、toObjectメソッドがオブジェクト クラスのデフォルト属性ではないものを削除する方法に関係しています。サーバーから送信された JSON 文字列からキャンバスを保存および復元でき、復元されたキャンバスにもカスタム属性が含まれるように、この問題に取り組む良い方法は何でしょうか? ありがとう。

この回答fabric.Imageで提案されているように、キャンバス内から拡張されたカスタムオブジェクトを使用しています。サーバーからjson文字列を取得すると、キャンバスにロードしようとすると奇妙なエラーが発生します。

コンソールに奇妙なプリントアウトが表示されます：Cannot call method 'setupState' of undefined (fabric.min.js: 1118)。呼び出しをに置き換えようとしましたがcanvas.loadFromJSON(json)、代わりに漠然としたSyntaxError: Unexpected token oエラーが発生しました。fabric.Imageリンクされたスレッドで提案された変更の前に通常のコードを使用した場合、このコードは正常に機能しました。追加のデータを使用してfavricのImageクラスを拡張したときに、これが欠落している可能性があるのではないかと心配しています。考え？

fabric.js ( http://fabricjs.com ) を使用してイメージをロードしましたが、要素で「lockUniScaling」が機能しません。

これは機能します：

この要素に「lockUniScale」を取得するにはどうすればよいですか?

他の要素を追加すると、item(1)、item(2)、...を使用してそれらを取得できますが、画像要素を取得できません。

ヒントはありますか？

Fabric.js ライブラリを使用して Canvas で「地図のような」アプリケーションを作成しています。私は基本的に画像を置いてから、正しい座標で画像の上に円を置きます。ドットの位置と名前は、ajax 呼び出しから受け取った JSON データとして取得されます。個々のサークルを参照して、そのサークルに関する詳細情報を取得できるようにする必要があります (各サークルには、より詳細な情報がポップアップ表示されます)。

これを行う方法を説明しているドキュメントのどこにも見つかりません。次のようにオブジェクトにIDを追加しようとしました:

tokens.add(new fabric.Circle({ radius: 25, fill: '#f55', top: 100, left: 70, id: "foo" }));

運が悪いのでそれを取得します。どんな助けでも大歓迎です。また、これはこのコミュニティとの最初のやり取りであるため、質問が十分に詳細でない場合、またはその他の問題がある場合はお詫び申し上げます。