クリップとイメージと背景イメージ

Question

イメージを別のイメージで背景を含むファブリックキャンバスにクリップしようとしていますが、例に従おうとしています。here

しかし、私はクリッピングがもはや機能しない最初の行にbackgroundColorを追加するとき：

var canvas = new fabric.Canvas('divPad', { 
    width: $("#divPad").width(), 
    height: $("#divPad").height(), 
    backgroundColor:'yellow', 
}); 

誰かが私を助けることができますか？

Answer 1

動作しません。 "soruce-atop"モードでは、クリッピングはしませんが、グローバル合成操作で再生しています。 これは、キャンバスの一部にイメージが描画されることを意味します。キャンバスの一部は、透明とは異なるものです。

ソリッドカラーを背景として配置すると、これはもう機能しません。

1つの解決策は、キャンバスの下にdivを置いて、キャンバス自体ではなくdivを黄色にすることです。

または、画像の形状を取得して、グローバル合成の代わりに実際のクリッピングを行うことができます。