問題タブ [fabricjs]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
3 に答える
5372 参照

javascript - 動的 svg ファビコン?

私はSVGとしてアイコンを持っています。ファビコンとして色違いで揃えたいです。

SVG 要素には toDataUrl() がないため、サーバーを使用しないソリューションはありません。

クライアント側のソリューションのアイデアはありますか?

0 投票する
2 に答える
4161 参照

javascript - html キャンバス zindex

キャンバス内の要素の zindex を変更するにはどうすればよいですか?

コード例:

fabric.js ライブラリの使用。

今後の参考のために:

fabric.Element.html#bringForward

0 投票する
2 に答える
10304 参照

html - Fabric.js - 複数の画像を描画する際の問題

私はこのスクリプトを使用しています:

3 番目の画像描画は適切に機能しており、上下に表示されています。しかし、4 番目を追加すると、3 番目の後ろに隠れてしまいます。画像の zindex を指定すると、まだ 3 番目以下です。

これの何が問題なのですか?ここで何か間違ったことをしていますか?助けてください。

ありがとう
ピーター

0 投票する
1 に答える
1147 参照

javascript - Html5 Canvas + fabric.js での独立した合成

キャンバスで下の画像のようなことをする必要があります。

ここをクリックしてご覧ください

ユーザーは、画像のサイズと位置を変更するよりも、画像を黄色い縁取りの四角形にドラッグ アンド ドロップします。画像は黄色の枠内で切り取られます。クリッピングを使おうと思ったのですが、グローバルクリッピングを使うと。画像が他のセクションに重なっています。これについて何ができますか?独立したクリッピング エリアのように動作するようにします。

0 投票する
1 に答える
2337 参照

html - fabric.js でビューポートを作成する方法

canvas を使用して、できれば fabric.js を使用して、可視領域、より大きなオブジェクトへのウィンドウ (スクロール可能なビューを作成するため) を作成する方法

0 投票する
3 に答える
25416 参照

text - fabric.jsを使用してキャンバスにテキストを描画します

キャンバスにテキストを描きたいのですが、サンプル例はありますか?キャンバスにはすでに描画された図形が含まれています。キャンバス上のその図形の上にテキストを表示したいのですが、どうすればよいですか?

0 投票する
1 に答える
7331 参照

javascript - fabric.js キャンバスにマスク レイヤーを追加する

編集可能なfabric.js HTML5 キャンバスの上に丸いマスクを追加したいという問題があります。同様の問題は、この記事で説明されています。

HTML 5 Canvas でイメージ マスクを作成する

私の問題は、fabric.js キャンバスの上にこのレイヤーを追加すると、キャンバスがこの透明な円の中で編集できなくなることです。これは、一番上の要素 (マスク) がクリック/ドラッグ イベントをキャプチャすることを意味しますが、アイテムをこのマスク要素の下に移動したいと思います。アイデアを探して、この問題を回避する方法。

0 投票する
3 に答える
6469 参照

javascript - Fabricjsを使用して図形内に画像を描画します

私は現在、canvasとJavascriptでの画像操作に取り組んでいます。私はそれにfabric.jsを使用しています。ユーザーに画像をアップロードして、提供されているテンプレートとマージしてもらいたいだけです。すなわち、

テンプレート

アップロードした画像を中央の空の円にのみ表示したいので、ドラッグして調整できます。

  • テンプレートを上位レイヤーとして保持すると、キャンバスがテンプレートでいっぱいになるため、ユーザーはドラッグして調整できません。
  • アップロードした画像を上層として保持すると、画像が円からはみ出します。

ユーザーに使いやすいインターフェースを提供することで、これをどのように解決できますか?fabric.jsでClipTo関数を試しましたが、画像オブジェクトでは機能しません。

0 投票する
1 に答える
2544 参照

javascript - fabric.js: オブジェクト: PathGroup で選択

すみません、fabric.js で PathGroup を使用すると問題が発生します。3 つのオブジェクトを PathGroup に追加し、この PathGroup をキャンバスに追加します。次に、object:selected イベントを観察します。ユーザーが 3 つのオブジェクトのいずれかを選択すると、e.memo.target (この PathGroup オブジェクトを参照) によってどれが選択されているかわかりません。オブジェクトの移動に便利なので、PathGroup を使用します。私のサンプルコードは次のとおりです。

ご協力いただきありがとうございます!html5スターター