Fabric.js剪辑画布（或对象组）到多边形

问题描述

我有一个画布在Fabric.js中绘制，我要添加一组矩形，我想限制这些矩形的边缘作为一个组不要超出某个区域。

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.

想象一下制作条纹T恤，条纹是通过使用一系列矩形制作的，我需要保持它们与T恤的形状。

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.

感谢

推荐答案

您可以在 canvas.clipTo ：

我刚刚加载了一个随机SVG形状在中执行此操作，并执行此操作：

I just loaded a random SVG shape in kitchensink and did this:

var shape = canvas.item(0);
canvas.remove(shape);
canvas.clipTo = function(ctx) {
  shape.render(ctx);
};

正如你所看到的，整个画布现在被该SVG形状剪切。

As you can see, entire canvas is now clipped by that SVG shape.

这篇关于Fabric.js剪辑画布（或对象组）到多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！