新的 ClipPath 屬性

在2.4.0中，我們為所有物件引入了clipPath屬性。 ClipPath將取代clipTo:funcion(){}，以實現相同的靈活性，但具有更好的兼容性。

ClipPath需要物件快取。

How to use it(如何使用)

將您自己的clipPath建立為普通的Fabric對象，並將其指派給您要裁剪的物件的clipPath屬性。 根據SVG規格中的定義，clipPath沒有stroke，並以黑色填充，與黑色像素重疊的物件的像素將是可見的，而其他像素則不可見。

讓我們從一些基本範例開始，然後看看它的外觀。 在此第一個範例中，紅色的rect被一個圓圈夾住，只有圓形內的部分可見。雖然不是很有用，但基本功能是這樣的。

請注意：clipPath從對象的中心開始定位，對象originX和originY不起任何作用，而clipPath originX和originY起作用。定位邏輯與fabric.Group相同。

(function() {
  var canvas = new fabric.Canvas('ex1');
  var clipPath = new fabric.Circle({
    radius: 40,
    top: -40,
    left: -40
  });
  var rect = new fabric.Rect({
    width: 200,
    height: 100,
    fill: 'red'
  });
  rect.clipPath = clipPath;
  canvas.add(rect);
})()

我們可以剪輯一個群組：

(function() {
  var canvas = new fabric.Canvas('ex2');
  var clipPath = new fabric.Circle({
    radius: 100,
    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);
})()

或者我們可以使用群組進行剪輯。如果是群組，請記住群組中的每個物件在邏輯上或與其他物件成對，否則就不會有非零或奇數的裁剪規則。

(function() {
  var canvas = new fabric.Canvas('ex3');
  var clipPath = new fabric.Group([
    new fabric.Circle({ radius: 70, top: -70, left: -70 }),
    new fabric.Circle({ radius: 40, left: -95, top: -95 }),
    new fabric.Circle({ radius: 40, left: 15, top: 15 }),
  ], { left: -95, top: -95 });
  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);
})()