web-dev-qa-db-ja.com

FabricJSは、canvas.clipToがcanvas.backgroundImageをクリッピングしないようにします

ユーザーが追加したすべてのレイヤーに影響するグローバルclipToをFabric-poweredCanvasに設定​​したいと思います。このクリップマスクの影響を受けない背景画像とオーバーレイ画像が必要です。

例：

enter image description here

この写真で起こっていることは次のとおりです。

  1. キャンバスオーバーレイ画像により、Tシャツは自然にしわが寄っているように見えます。このオーバーレイ画像はほとんど透明です
  2. Tシャツの正確な形状の背景画像が追加されました。これにより、Tシャツが青く見えるようになります。
  3. A canvas.clipToキャンバスを長方形にクリップする関数が追加されました
  4. ユーザーが追加した画像（有名なファブリックパグ）が追加されました

ユーザーが追加した画像（パグ）を長方形の領域に限定したい。

私はnotは、背景画像（青いTシャツの形）がクリップ領域の影響を受けないようにします。

これを達成する簡単な方法はありますか？ 1つのきちんとしたグローバルclipToではなく、すべての単一ユーザーレイヤーにclipToを追加する必要は本当にありません。

問題を示すJSフィドルで遊ぶことができます ここ 。

javascriptcanvasfabricjs
29
chadoh

私は同じニーズを持ってここに来て、最終的に私が取り組んでいることの解決策を見つけました。多分それは役立ちます：

SVGパスの場合、clipTo関数内で、render(ctx)を呼び出す直前にctxを変更できます。これらの変更は、クリップされたパスoの外部に適用されます。そのようです：

var clipPath = new fabric.Path("M 10 10 L 100 10 L 100 100 L 10 100", {
  fill: 'rgba(0,0,0,0)',
});

var backgroundColor = "rgba(0,0,0, 0.2)";

var opts = {
  controlsAboveOverlay: true,
  backgroundColor: 'rgb(255,255,255)',
  clipTo: function (ctx) {
    if (typeof backgroundColor !== 'undefined') {
      ctx.fillStyle = backgroundColor;
      ctx.fillRect(0, 0, 300, 150);
    }
    clipPath.render(ctx);
  }
}
var canvas = new fabric.Canvas('c', opts);

canvas.add(new fabric.Rect({
  width: 50,
  height: 50,
  left: 30,
  top: 30,
  fill: 'rgb(255,0,0)'
}));

もちろん、色の代わりに画像を追加することもできます。私が見つけた秘訣は、それをclipToのctx関数に直接配置することです。

これがフィドルです

1
qrrr

1つの（ちょっとハッキーな）解決策： https://jsfiddle.net/qpnvo3cL/ に示すように、キャンバス要素にCSS背景画像を設定します

<canvas id="c" width="500" height="500"></canvas>
<style>
  background: url('http://fabricjs.com/assets/jail_cell_bars.png') no-repeat;
</style>
<script>
  var canvas = window._canvas = new fabric.Canvas('c');
  canvas.clipTo = function(ctx) {
      ctx.rect(100,100,100,100);
  }
</script>
0
chadoh

生地を切り抜いてみましたか グループ ？シャツ全体を1つのキャンバスにすることができます。中央のグラフィックは、必要な場所にクリップする1つのグループになります。白いTシャツと青いオーバーレイはもちろんnotクリップされたグループの一部になります。

グループをクリッピングする例を次に示します。

var rect = new fabric.Rect({width:100, height: 100, fill: 'red' });
var circle = new fabric.Circle({ radius: 100, fill: 'green' });
var group1 = new fabric.Group([ circle, rect ], { left: 100, top: 100 });
canvas.add(group1);

group1.clipTo = function(ctx) {
    ctx.rect(50,50,200,200);
};

私が作成したこのjsfiddleを参照してください： https://jsfiddle.net/uvepfag5/4/

0
Stafree