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

【问题标题】：Fabric.js Clip Canvas (or object group) To PolygonFabric.js 将画布（或对象组）剪辑到多边形
【发布时间】：2013-09-19 22:30:48
【问题描述】：

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

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

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

谢谢

【问题讨论】：

我们可以将图像形状裁剪为图像形状吗？

标签： javascript php html canvas fabricjs

【解决方案1】：

您可以在canvas.clipTo 中渲染一个形状：)

我刚刚在kitchensink 中加载了一个随机的 SVG 形状并这样做了：

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

如您所见，整个画布现在都被该 SVG 形状剪裁了。

【讨论】：

@simmisimmi 这是画布上的第一个项目
@kangax 你能给我举个例子吗？
我们能不能按图片形状裁剪成图片形状
画布裁剪工作完美，但这个 clipTo 函数也在裁剪画布的背景图像，我不希望它的背景图像被裁剪。
如果 SVG 中有多个路径，则此 clipTo 不起作用。请参阅this 问题。

【解决方案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

【讨论】：