FabricJS剪辑路径边框颜色并将覆盖图像移动到剪辑路径后面？答案

【问题标题】：FabricJS clippath border color and move the overlay image behind clippath?FabricJS剪辑路径边框颜色并将覆盖图像移动到剪辑路径后面？
【发布时间】：2020-12-20 23:09:01
【问题描述】：

我正在尝试使用 fabricJS 在画布上添加剪辑路径区域（矩形对象）。目前我将叠加图像设置到画布上，除此之外我还在添加剪贴路径区域来放置对象。我成功地将对象放置在剪辑路径中，但问题是我将其放置在剪辑路径中的任何图像都具有不透明度（意味着对象也具有透明度），我知道是因为我将透明图像设置为始终位于其他对象之上的覆盖。

我的查询是

我可以单独设置剪辑路径区域以忽略覆盖吗？或者至少设置首选项，例如剪辑路径是第一优先级和下一个叠加层？
目前clippath没有边框，我不知道clippath在哪里？那么有没有办法在剪贴路径区域设置边框？

这是我下面的代码

HTML

<canvas id="ex8" width="300" height="400"></canvas>

(function () {
  var canvas = new fabric.Canvas('ex8');
  canvas.controlsAboveOverlay = true;
  var clipPath = new fabric.Rect({ width: 100, height: 100, fill: 'red', top: 100, left: 100 });

  canvas.setOverlayImage(
    'https://i.ibb.co/88QkSMC/crew-front.png',
    canvas.renderAll.bind(canvas),
    {}
  );
  var group = new fabric.Group([
    new fabric.Rect({ width: 100, height: 100, fill: 'red', globalCompositeOperation: 'xor' }),

    new fabric.Rect({ width: 100, height: 100, fill: 'blue', top: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'green', left: 100, top: 100 }),
  ]);

  canvas.clipPath = clipPath;
  canvas.add(group);
})();

感谢您的帮助！！！

FIDDLE

【问题讨论】：

你有多个问题，我可以看到至少 4 个，你能把这个缩小到一个吗？

标签： javascript canvas html5-canvas fabricjs fabricjs2

【解决方案1】：

非常有趣的问题。

您遇到的问题与Fabric.js 中应用层的顺序有关。

如相关github 帖子中所述，图层应用如下（自下而上）：

因此，并不是将clipPath 放在T 恤图像上（即Overlay image）。正好相反，因为 T 恤层是应用在 clipPath 上的。

虽然“透明度”似乎来自clipPath resp。 fabric group，实际上是来自Overlay image本身，因为图片中的T恤是透明的（周围的白色背景不是）。

将鼠标悬停在 T 恤图像上时，也可以看到其不透明度（例如，在文件资源管理器中，如下图所示）。

至于边框，您可以在代码中添加以下内容：

group.set({
    borderColor: 'yellow',
    cornerColor: 'yellow',
    cornerSize: 6,
    transparentCorners: false
  });
group.setActiveObject(canvas);

请注意，边框仅在相应的画布项被激活时可见。有关更多信息，您可以查看此link 进行自定义。

【讨论】：

@colorCoder 链接在哪里？