Fabric.js剪辑画布(或对象组)到多边形

Question

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

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

我认为最好将整个画布剪裁成T恤的形状,所以我添加到它的任何东西都保留在T恤内,但我卡住了.到目前为止,我只剪辑到基本圆和矩形.

谢谢

Answer 1

你可以在里面渲染一个形状canvas.clipTo:)

我只是在kitchennsink中加载了一个随机的SVG形状并做了这样的事情:

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

如您所见,整个画布现在被该SVG形状剪裁.