我有一个在 Fabric.js 中绘制的画布,我正在向其中添加一组矩形,我想将这些矩形的边缘限制为一个组,以免超出某个区域。
想象一下制作条纹 T 恤,条纹是通过使用一系列矩形制作的,我需要将它们保持为 T 恤的形状。
我认为最好将整个画布剪成 T 恤的形状,所以我添加的任何东西都保留在 T 恤内,但我被卡住了。到目前为止,我只剪辑到基本的圆形和矩形。
谢谢
我有一个在 Fabric.js 中绘制的画布,我正在向其中添加一组矩形,我想将这些矩形的边缘限制为一个组,以免超出某个区域。
想象一下制作条纹 T 恤,条纹是通过使用一系列矩形制作的,我需要将它们保持为 T 恤的形状。
我认为最好将整个画布剪成 T 恤的形状,所以我添加的任何东西都保留在 T 恤内,但我被卡住了。到目前为止,我只剪辑到基本的圆形和矩形。
谢谢
你可以在里面渲染一个形状canvas.clipTo
:)
我刚刚在厨房水槽中加载了一个随机的 SVG 形状并这样做了:
var shape = canvas.item(0);
canvas.remove(shape);
canvas.clipTo = function(ctx) {
shape.render(ctx);
};
如您所见,整个画布现在都被该 SVG 形状剪裁了。
你也可以试试这个:http: //jsfiddle.net/ZxYCP/198/
var clipPoly = new fabric.Polygon([
{ x: 180, y: 10 },
{ x: 300, y: 50 },
{ x: 300, y: 180 },
{ x: 180, y: 220 }
], {
originX: 'left',
originY: 'top',
left: 180,
top: 10,
width: 200,
height: 200,
fill: '#DDD', /* use transparent for no fill */
strokeWidth: 0,
selectable: false
});
您可以简单地使用多边形进行剪辑。答案基于此问题中的@natchiketa 想法Multiple clipping area on Fabric.js canvas