The new clipPath property
新的剪辑路径属性

In 2.4.0 we introduced the clipPath property for all objects. ClipPath replaces clipTo: function() {}, achieving the same flexibility, but with better compatibility.
在 2.4.0 中，我们为所有对象引入了 clipPath 属性。ClipPath取代 clipTo: function() {} 了，实现了相同的灵活性，但具有更好的兼容性。
ClipPath REQUIRES objectCaching, and will use it automatically for any object containing a clipPath.
ClipPath 需要 objectCaching，并且会自动将其用于包含 clipPath 的任何对象。

How to use it
如何使用它

Create your own clipPath using any normal Fabric Object, and then assign it to the clipPath property of the object you want to clip.
使用任何普通的构造对象创建自己的剪辑路径，然后将其分配给要剪辑的对象的 clipPath 属性。
According to the official SVG specs, clipPath has no stroke and is filled with black. The pixels of the object that overlap with the black pixels of the clipPath will be visible, while the other will not.
根据官方的SVG规范，clipPath没有笔触，而是用黑色填充。与 clipPath 的黑色像素重叠的对象像素将可见，而另一个则不可见。
Let's start with some basic examples.
让我们从一些基本示例开始。
In this first example, a red rectangle is clipped with a circle, making only the area inside the circle visible.
在第一个示例中，用圆圈剪裁红色矩形，仅使圆内的区域可见。
Please note: the clipPath is positioned starting from the center of the object. The object's originX and originY values do not play any role, while clipPath originX and originY do. This is the same positioning logic used for fabric.Group.
请注意：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);
})()

We can clip a group:
我们可以剪辑一个组：

(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);
})()

Or We can clip using groups. In the case of groups, remember that each object in the group will be logically OR with others, there is no nonzero or evenodd clip-rule
或者我们可以使用组进行剪辑。对于组，请记住，组中的每个对象在逻辑上都是 OR 与其他对象，没有 nonzero OR evenodd 剪辑规则

(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);
})()

Continue with more examples
 继续阅读更多示例