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形状剪裁。

Answer 2

您也可以尝试这个： 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
});

您可以简单地使用Polygon进行剪辑。 答案基于@natchiketa在这个问题上的想法Fabric.js画布上的多个剪裁区域