問題タブ [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 投票する
5 に答える
25362 参照

fabricjs - fabric.jsで画像の高さと幅を設定するには?

fabric.Image.fromURL を使用してキャンバスに画像をロードし、デフォルトの画像の幅と高さで正常に動作していました。今、画像の幅と高さを最小限に抑えたいと思っています。これを行う方法?

前もって感謝します。

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

jquery - JQuery を使用する fabric.js と CMS、$ 変数との競合の問題

CMS 用に作成している製品に fabric.js を統合しようとしています。問題は、ファブリック デモ サイトのベースにしているコードで、すべてのファブリック機能/コードを開始するコードの上に次の行があることです。

CMS が通知のためにバックグラウンドで ajax コードを実行しているのを見て、$:

私はその行を削除して変更しようとしましたが、明らかにうまくいきませんでした:)。上記は両方とも、CMS の main.js ファイルを参照しています。$ を別のものに変更し ($$ と z を試しました)、エラーはなくなりましたが、キャンバス上のオブジェクトを選択しようとすると多くの奇妙な動作が発生し、フィルターが機能しなくなったため、これは機能しません。$ のすべてのインスタンスを正しく置き換えたことを確認しました。JQuery の noConflict メソッドも試してみましたが、うまくいきませんでした。

ここで明らかな何かが欠けていますか?私は助けを求めてウェブを探しましたが、製品を作成するときにユーザーにコアファイルの変更を強制するのは悪い形である CMS 内で JQuery を使用する例を見つけることができません。2 つを最初から一緒に使用したい場合、どうすればそれができるかはわかっていると思いますが、CMS コアの js コードを変更せずにこれを行うのは難しいことがわかります。誰にもヒントはありますか?どうもありがとう。

0 投票する
0 に答える
162 参照

javascript - 高解像度の画像ファイルを指すようにfabric.Objectのソースを変更する方法

私はfabricjsを使用しています。キャンバス内の画像オブジェクトのソースを変更して、プロパティを変更せずに高解像度画像を指すようにする必要があります。これにより、使用時にcanvas.toDataURLWithMultiplier('jpeg', 2)画質が影響を受けなくなります。

これを行う方法を見つけるのを手伝ってください。

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

javascript - fabric.js のサイズ変更および回転コントロールをカスタム イメージに置き換えますか?

私は、fabric.jsのサイズ変更と長方形の回転をカスタム画像に置き換える方法の例を探しています....誰かがこれをしましたか?

ありがとう。

0 投票する
0 に答える
843 参照

javascript - 複数のドラッグ 複数の要素を canvas 要素にドロップする

私のプロジェクトの一部は、複数の画像を div 要素からキャンバスにドラッグ アンド ドロップすることです。画像は .svg タイプであり、ライブラリfabric.jsを使用してそれらの画像をレンダリングします。私が直面している問題は、ファイルがキャンバスに複数回ドロップされないことです。

各レベルでのアラートは、drag 関数が 2 回呼び出されているにもかかわらず、関数 drop が 1 回しか呼び出されていないことを示しています。

以下は JavaScript コードの一部です。

main() は、object.src を使用して画像の URL を取得し、fabric.js ライブラリを使用してレンダリングする関数です。

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

javascript - キャンバスのスケーリング jsplumb/fabric.js

私は接続などで状態マシンを生成するjavascriptライブラリ(jsPlumb)を使用しています.

生成されたグラフにズームインおよびズームアウト機能を追加しようとしています。

生成されたコードは次のようなものです。

divラッパー内に多くのキャンバス要素があります。

したがって、これらすべてのキャンバス要素を簡単にスケーリングできるライブラリを見つけようとしています。

Fabric.js は良さそうに聞こえますが、キャンバス自体に変換を適用するために既存のキャンバスを「ロード」する方法は見つかりませんでしたが、キャンバス内の要素に変換を適用するだけでした。

それができるライブラリを知っている人はいますか?または、ズームイン/ズームアウト機能をjsplumbに追加するために何かをしたことがあるなら、私も嬉しいです! このライブラリは他の多くの便利な機能を提供するため、Fabric.js を使用したソリューションが特に必要です。

ありがとう!

0 投票する
5 に答える
4768 参照

javascript - Fabric.js - 色合いフィルター

fabric.js のティント フィルター機能を動作させることができないか、使用されている例を見つけることができないようです。私が試してみました:

#00ff00の代わりにも試しましgreenたが、どちらも画像を黒くするだけです。

黒と透明(基本的な形状など)だけのpngがいくつかあり、それらの色を変更できるようにしたいのですが、これが可能かどうかはわかりませんが、色合いが有望だと思いました、私はそれを機能させることができません。

写真でも試してみましたが、黒くなり、コードの同じ場所で他のフィルター(反転など)を使用しましたが、うまくいきました。

どんな助けでも大歓迎です。

更新: 完全な JS が使用され、画像 3 はブラック ボックスとして表示されます。

0 投票する
0 に答える
154 参照

json - キャンバス内のグループを使用してloadFromJSON()でキャンバスをロードすることはできません

私のキャンバスにはグループが含まれていますが、キャンバスを保存してJSONに配置したい場合、loadFromJSON()mothodでjsonを正しくロードできず、キャンバスが空になります。

ただし、キャンバスにグループが含まれていなくても、テキスト、画像が含まれている場合は、jsonを正しく読み込むことができます。

手伝って頂けますか?

私のデモはリンクです:http ://www.yinjoin.com/abc/d.htm

0 投票する
0 に答える
191 参照

php - JigoShop WordPress の隠れた価値の提出

過去 2 日間、この問題に取り組んできましたが、WordPress プラグインのカスタマイズで一部の機能が機能していないようです。JigoShop と WordPress の両方の最新バージョンを使用しています。

プロジェクトの URL: http://customcasing.ca/product/ipad-case/

現在の機能

ホームページには 5 つの製品 SKU があり、クリックするとそれぞれの製品注文ページに移動します。これらのそれぞれのページには、画像操作を処理するために fabricjs を実装したデザイン キャンバスがあります。ユーザーが満足したら、キャンバスを保存します。次に、次のサンプル コードを使用してイメージを JSON オブジェクトにシリアル化します。

JSON を使用したキャンバスの保存/読み込み

JSON オブジェクトは、「カートに追加」フォーム内の非表示の入力の値として設定されます。次に、ドロップダウン ボックスから製品のカラー バリエーションを選択できます。


ここで物事がバラバラになります

「カートに追加」フォームの送信は、いくつかのクラスを通過し、非表示の JSON オブジェクトの値を集約された「カート」オブジェクトに投稿することになっています。これはさまざまなページで呼び出され、キーと値のペアが製品のさまざまな属性に関連付けられています。ただし、他のすべてのキーと値のペアが実行され、後続の注文レビュー ページにエコーされます...カスタム変数を除きます。

これがディレクトリアーキテクチャです

  • /wp-コンテンツ
    • ...
    • /プラグイン
      • ...
      • /ジゴショップ
        • jigoshop_template_functions.php
        • jigoshop_actions.php
        • /クラス
          • jigoshop_cart.class.php
    • /テーマ
      • /customcasing

上記の構造 (pastebin) に関連付けられているコード ブロックは次のとおりです。

Jigoshop_template_functions.php
html ジェネレーターとフォーム

隠しフィールド用のjigoshop_actions.php
フォーム$_post

classes/jigoshop_cart.class.php
フォームの検証とキーと値のペアの作成


現在の状態について可能な限り多くの情報を提供しました。stackoverflow で何か役立つことがあるとすれば、次の Q/A になります。

非表示の入力値を次のページに送信しようとしています

追加情報が必要な場合は、お気軽にお問い合わせください。詳しく説明できるよう最善を尽くします。また、より広い範囲のコードが必要な場合は、それも提供できます。正しい方向への微調整を本当に感謝します。

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

javascript - 画像フィルターが適用された fabric.image のファブリック js サブクラスをロードする

サブクラス化された画像オブジェクトに保存されている画像フィルターをロードする際に問題があります。これが私のサブクラスのコードです:

これは、フィルターを適用しなくても問題なく機能します。

次のようなものを使用して、このサブクラスのインスタンスにフィルターを追加します。

オブジェクトを保存すると、フィルタ オブジェクトがタイプ、しきい値、および距離とともに渡されます。

ただし、このオブジェクトをロードすると、次の all.js ファイルでエラーが発生します。