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畫布上的多個剪裁區域