javascript Fabric.js 剪辑画布（或对象组）到多边形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18816753/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fabric.js Clip Canvas (or object group) To Polygon
提问by fiscme
I have a canvas drawn in Fabric.js that i am adding a group of rectangles to, i want to limit the edges of those rectangles as a group to not go outside a certain area.
我有一个在 Fabric.js 中绘制的画布，我正在向其中添加一组矩形，我想将这些矩形的边缘限制为一个组，以免超出某个区域。
Imagine making a stripy t-shirt, the stripes are make by using a series of rectangles and i need to keep them to the shape of the t-shirt.
想象一下制作条纹 T 恤，条纹是使用一系列矩形制作的，我需要将它们保持为 T 恤的形状。
I think its better to clip the entire canvas to the shape of the t shirt, so anything i add to it remains within the t-shirt but i am stuck. So far i am only clip to basic circles and rectangles.
我认为最好将整个画布夹在 T 恤的形状上，所以我添加的任何东西都保留在 T 恤内，但我被卡住了。到目前为止，我只剪辑到基本的圆形和矩形。
Thanks
谢谢
回答by kangax
You can just render a shape inside canvas.clipTo:)
你可以在里面渲染一个形状canvas.clipTo:)
I just loaded a random SVG shape in kitchensinkand did this:
我刚刚在厨房水槽中加载了一个随机的 SVG 形状并执行了以下操作：
var shape = canvas.item(0);
canvas.remove(shape);
canvas.clipTo = function(ctx) {
shape.render(ctx);
};
As you can see, entire canvas is now clipped by that SVG shape.
如您所见，整个画布现在都被该 SVG 形状剪裁了。
回答by l00k
You may also try this one: http://jsfiddle.net/ZxYCP/198/
你也可以试试这个：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
});
You can simply use Polygon to clip. Answer is based on @natchiketa idea in this question Multiple clipping areas on Fabric.js canvas
您可以简单地使用 Polygon 进行剪辑。答案基于此问题中的 @natchiketa 想法Fabric.js 画布上的多个裁剪区域
