如何在fabricjs 4 beta中裁剪图像

Question

我为新的控制功能更新了fabricjs。

但是我的旧图像剪辑不再起作用，因为clipTo中的fabric.Object已在新版本中删除。

如何不使用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 beta中使用http://fabricjs.com/clipping

Answer 1

我找到了临时解决方案，但这不是真正的答案：

绘制圆和多边形

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/

帮助我找到更好的解决方案