如何在FabricJS 4 Beta版本中裁剪图像

Question

我更新了fabricjs以使用新的控制功能。

但由于新版本中fabric.Object的clipTo已被删除，因此我的旧图像裁剪不再起作用。

在没有使用clipTo的情况下，我该如何裁剪图像？在更改日志中，他们说应该使用clipPath代替。

img.set({
        clipTo: function (ctx) {
           ctx.moveTo(0, 0);
           ctx.arc(0, 0,300, -Math.PI/6, -Math.PI+Math.PI/6 , true);
        }
    });

这里是jsfiddle

此外，官方演示在4.0测试版中无法正常工作 http://fabricjs.com/clipping

- mudin

Answer 1

因此，自版本2以来，clipTo已被弃用，并在版本4中删除。正确的裁剪方式是使用clipPath属性。以下是一个简单的示例：

var radius = 150;
var clipPath = new fabric.Circle({
    left: 0,
    top: 0,
    radius: radius,
    startAngle: 0,
    angle: Math.PI * 2,
    originX: "top"
});

fabric.Image.fromURL("../public/pug_small.jpg", function(img) {
    img.scale(0.5).set({
        left: 100,
        top: 100,
        angle: -15,
        clipPath: clipPath
    });

    canvas.add(img).setActiveObject(img);
});

这里是 clipPath 的官方教程：http://fabricjs.com/clippath-part1 最近在 beta 4 版本中关于 clipPath 的讨论：https://github.com/fabricjs/fabric.js/issues/6159 还有一个 SandBox 演示：https://codesandbox.io/s/stackoverflow-60664120-fabric-js-400-beta8-mi0y7

- Adam M.

---

我认为这是圆形裁剪的好答案，但我需要扇形裁剪。 - mudin

最近，剪辑演示已更新，并展示了如何将动画应用于clipPath：http://fabricjs.com/clipping - Adam M.

Answer 2

我发现了一个临时解决方案，但它并不是真正的答案：

我画了一个圆和多边形。

var radius = 100;
var start = -150*Math.PI/180
var end = -30*Math.PI/180
let point1 = new fabric.Point(
  (radius+1)*Math.cos(start),
  (radius+1)*Math.sin(start)
)
let point2 = new fabric.Point(
  (radius+1)*Math.cos(end),
  (radius+1)*Math.sin(end)
)
fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function (img) {
    img.scale(1).set({
        left: 0,
        top: 0,
        clipPath:new fabric.Group([
        new fabric.Circle({
          originX:'center',
          originY:'center',
          radius,
          startAngle: start,
          endAngle: end,
          stroke:false,
          strokeWidth:6
        }),
        new fabric.Polygon([point1,{x:0,y:0},point2],{
          originX:'center',
          originY:'center',
          strokeWidth:6
        })
        ])
    );
    canvas.add(img).setActiveObject(img);
});

http://jsfiddle.net/mudin/z75nvgqs/31/

帮我找到更好的解决方案

- mudin

---

我认为将一组对象进行组合是正确的方法。这也是clipPath的设计初衷。 - Adam M.