javascript - 如何在 fabricjs 版本 4 beta 中剪辑图像
问题描述
我更新了 fabricjs 以获得新的控制功能。
但是我的旧图像剪辑不再起作用,因为clipTo
在fabric.Object
新版本中删除了 in。
我如何在不使用的情况下剪辑图像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
解决方案
因此,clipTo
自第 2 版以来已弃用,并在第 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的官方教程
最近关于clipPath
beta 4 版本的讨论:https ://github.com/fabricjs/fabric.js/issues/6159
还有一个示例沙盒演示:https ://codesandbox.io/s/stackoverflow-60664120-fabric-js-400-beta8-mi0y7