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

Question

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

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

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

由于

Answer 1

您只需在canvas.clipTo内呈现形状：）

我刚刚在kitchensink加载了一个随机的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在这个问题中的想法Multiple clipping areas on Fabric.js canvas