javascript - 如何在 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

所以，clipTo从版本 2 开始不推荐使用，并在版本 4 中删除。正确的剪辑方法是使用 clipPath属性(property)。这是一个简单的例子:

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

最近关于 clipPath 的讨论在 beta 4 版本中: https://github.com/fabricjs/fabric.js/issues/6159

还有一个示例沙盒演示: https://codesandbox.io/s/stackoverflow-60664120-fabric-js-400-beta8-mi0y7