問題タブ [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.
fabricjs - fabric.jsで画像の高さと幅を設定するには?
fabric.Image.fromURL を使用してキャンバスに画像をロードし、デフォルトの画像の幅と高さで正常に動作していました。今、画像の幅と高さを最小限に抑えたいと思っています。これを行う方法?
前もって感謝します。
jquery - JQuery を使用する fabric.js と CMS、$ 変数との競合の問題
CMS 用に作成している製品に fabric.js を統合しようとしています。問題は、ファブリック デモ サイトのベースにしているコードで、すべてのファブリック機能/コードを開始するコードの上に次の行があることです。
CMS が通知のためにバックグラウンドで ajax コードを実行しているのを見て、$:
私はその行を削除して変更しようとしましたが、明らかにうまくいきませんでした:)。上記は両方とも、CMS の main.js ファイルを参照しています。$ を別のものに変更し ($$ と z を試しました)、エラーはなくなりましたが、キャンバス上のオブジェクトを選択しようとすると多くの奇妙な動作が発生し、フィルターが機能しなくなったため、これは機能しません。$ のすべてのインスタンスを正しく置き換えたことを確認しました。JQuery の noConflict メソッドも試してみましたが、うまくいきませんでした。
ここで明らかな何かが欠けていますか?私は助けを求めてウェブを探しましたが、製品を作成するときにユーザーにコアファイルの変更を強制するのは悪い形である CMS 内で JQuery を使用する例を見つけることができません。2 つを最初から一緒に使用したい場合、どうすればそれができるかはわかっていると思いますが、CMS コアの js コードを変更せずにこれを行うのは難しいことがわかります。誰にもヒントはありますか?どうもありがとう。
javascript - 高解像度の画像ファイルを指すようにfabric.Objectのソースを変更する方法
私はfabricjsを使用しています。キャンバス内の画像オブジェクトのソースを変更して、プロパティを変更せずに高解像度画像を指すようにする必要があります。これにより、使用時にcanvas.toDataURLWithMultiplier('jpeg', 2)
画質が影響を受けなくなります。
これを行う方法を見つけるのを手伝ってください。
javascript - fabric.js のサイズ変更および回転コントロールをカスタム イメージに置き換えますか?
私は、fabric.jsのサイズ変更と長方形の回転をカスタム画像に置き換える方法の例を探しています....誰かがこれをしましたか?
ありがとう。
javascript - 複数のドラッグ 複数の要素を canvas 要素にドロップする
私のプロジェクトの一部は、複数の画像を div 要素からキャンバスにドラッグ アンド ドロップすることです。画像は .svg タイプであり、ライブラリfabric.jsを使用してそれらの画像をレンダリングします。私が直面している問題は、ファイルがキャンバスに複数回ドロップされないことです。
各レベルでのアラートは、drag 関数が 2 回呼び出されているにもかかわらず、関数 drop が 1 回しか呼び出されていないことを示しています。
以下は JavaScript コードの一部です。
main() は、object.src を使用して画像の URL を取得し、fabric.js ライブラリを使用してレンダリングする関数です。
javascript - キャンバスのスケーリング jsplumb/fabric.js
私は接続などで状態マシンを生成するjavascriptライブラリ(jsPlumb)を使用しています.
生成されたグラフにズームインおよびズームアウト機能を追加しようとしています。
生成されたコードは次のようなものです。
divラッパー内に多くのキャンバス要素があります。
したがって、これらすべてのキャンバス要素を簡単にスケーリングできるライブラリを見つけようとしています。
Fabric.js は良さそうに聞こえますが、キャンバス自体に変換を適用するために既存のキャンバスを「ロード」する方法は見つかりませんでしたが、キャンバス内の要素に変換を適用するだけでした。
それができるライブラリを知っている人はいますか?または、ズームイン/ズームアウト機能をjsplumbに追加するために何かをしたことがあるなら、私も嬉しいです! このライブラリは他の多くの便利な機能を提供するため、Fabric.js を使用したソリューションが特に必要です。
ありがとう!
javascript - Fabric.js - 色合いフィルター
fabric.js のティント フィルター機能を動作させることができないか、使用されている例を見つけることができないようです。私が試してみました:
#00ff00
の代わりにも試しましgreen
たが、どちらも画像を黒くするだけです。
黒と透明(基本的な形状など)だけのpngがいくつかあり、それらの色を変更できるようにしたいのですが、これが可能かどうかはわかりませんが、色合いが有望だと思いました、私はそれを機能させることができません。
写真でも試してみましたが、黒くなり、コードの同じ場所で他のフィルター(反転など)を使用しましたが、うまくいきました。
どんな助けでも大歓迎です。
更新: 完全な JS が使用され、画像 3 はブラック ボックスとして表示されます。
json - キャンバス内のグループを使用してloadFromJSON()でキャンバスをロードすることはできません
私のキャンバスにはグループが含まれていますが、キャンバスを保存してJSONに配置したい場合、loadFromJSON()mothodでjsonを正しくロードできず、キャンバスが空になります。
ただし、キャンバスにグループが含まれていなくても、テキスト、画像が含まれている場合は、jsonを正しく読み込むことができます。
手伝って頂けますか?
私のデモはリンクです:http ://www.yinjoin.com/abc/d.htm
php - JigoShop WordPress の隠れた価値の提出
過去 2 日間、この問題に取り組んできましたが、WordPress プラグインのカスタマイズで一部の機能が機能していないようです。JigoShop と WordPress の両方の最新バージョンを使用しています。
プロジェクトの URL: http://customcasing.ca/product/ipad-case/
現在の機能
ホームページには 5 つの製品 SKU があり、クリックするとそれぞれの製品注文ページに移動します。これらのそれぞれのページには、画像操作を処理するために fabricjs を実装したデザイン キャンバスがあります。ユーザーが満足したら、キャンバスを保存します。次に、次のサンプル コードを使用してイメージを 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 になります。
追加情報が必要な場合は、お気軽にお問い合わせください。詳しく説明できるよう最善を尽くします。また、より広い範囲のコードが必要な場合は、それも提供できます。正しい方向への微調整を本当に感謝します。
javascript - 画像フィルターが適用された fabric.image のファブリック js サブクラスをロードする
サブクラス化された画像オブジェクトに保存されている画像フィルターをロードする際に問題があります。これが私のサブクラスのコードです:
これは、フィルターを適用しなくても問題なく機能します。
次のようなものを使用して、このサブクラスのインスタンスにフィルターを追加します。
オブジェクトを保存すると、フィルタ オブジェクトがタイプ、しきい値、および距離とともに渡されます。
ただし、このオブジェクトをロードすると、次の all.js ファイルでエラーが発生します。