ClipPaths のネストとより複雑なシナリオ

clipPath のネスト

clipTo と canvas.clip() の使用に関する 1 つの問題は、一度に複数の clipPath を持つことができないことです。

この実装では、clipPath は独自の clipPath を持つことができます。手動でプログラムするのは直感的ではありませんが、clipPath を交差させることができます。

(function() {
  var canvas = new fabric.Canvas('ex4');
  var clipPath = new fabric.Circle({ radius: 70, top: -50, left: -50 });
  var innerClipPath = new fabric.Circle({ radius: 70, top: -90, left: -90 });
  clipPath.clipPath = innerClipPath;
  var group = new fabric.Group([
    new fabric.Rect({ width: 100, height: 100, fill: 'red' }),
    new fabric.Rect({ width: 100, height: 100, fill: 'yellow', left: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'blue', top: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'green', left: 100, top: 100 })
  ]);
  group.clipPath = clipPath;
  canvas.add(group);
})()

グループ内のオブジェクトの ClipPath は、グループ自体の clipPath から分離する必要があります。

(function() {
  var canvas = new fabric.Canvas('ex5');
  var clipPath = new fabric.Circle({ radius: 100, top: -100, left: -100 });
  var small = new fabric.Circle({ radius: 50, top: -50, left: -50 });
  var group = new fabric.Group([
    new fabric.Rect({ width: 100, height: 100, fill: 'red', clipPath: small }),
    new fabric.Rect({ width: 100, height: 100, fill: 'yellow', left: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'blue', top: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'green', left: 100, top: 100 })
  ]);
  group.clipPath = clipPath;
  canvas.add(group);
})()

テキストによるクリッピング

clipTo でもテキストによるクリッピングは不可能でした。開発者は通常、そのためにパターンにフォールバックする必要がありました。

(function() {
  var canvas = new fabric.Canvas('ex6');
  var clipPath = new fabric.Text(
    'Hi I\'m the \nnew ClipPath!\nI hope we\'ll\nbe friends',
    { top: -100, left: -100 });
  var group = new fabric.Group([
    new fabric.Rect({ width: 100, height: 100, fill: 'red' }),
    new fabric.Rect({ width: 100, height: 100, fill: 'yellow', left: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'blue', top: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'green', left: 100, top: 100 })
  ]);
  group.clipPath = clipPath;
  canvas.add(group);
})()