問題タブ [globalcompositeoperation]
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 - ファブリックjsを使用してオーバーレイ長方形のみに穴をあける方法は?
fabric js バージョン 1.7.22 を使用して画像クロッパーに取り組んでいます。通常、すべてのクロッパーは画像の上に黒い透明なオーバーレイを表示し (画像がくすんで見える場所)、Rect も 1 つ表示します。（画像が色でいっぱいに見える領域を切り取ります）。
この機能は、ファブリック js と背景画像およびfabric.Rectオブジェクトを使用して作成できます。
私の問題は、プロパティをオブジェクトに使用GlobalCompositeOperationするときです。キャンバスに穴が開いてしまいます。destination-outfabric.Rect
簡単に言えば：
に追加globalCompositeOperationするとdestination-out、キャンバスにも穴が開いてしまいます。
キャンバスの期待される結果:
キャンバスの現在の結果:
デモンストレーション用に 1 つの codepen を作成しました: https://codepen.io/mayurkukadiya0/pen/zYYWOGL?editors=0110
同じことを行うための1つのコードペンも見つかりましたが、それらは別のレイヤーに画像を表示するための複数のキャンバスを追加し、別のレイヤーに四角形とオーバーレイを追加しますキャンバスの背後に外部キャンバスまたはcss画像を追加せずにこれを行う方法はありますか? その参照は次のとおりです: https://codepen.io/s0nnyv123/pen/eravaN