FabricJS clippath边框颜色并将叠加图像移到clippath后面？

问题描述

我正在尝试使用fabricJS在画布上添加clippath区域（矩形对象）。目前，我将“覆盖图像”设置为画布，除此之外，还添加了clippath区域来放置对象。我能够成功地将对象放置在clippath中，但是问题是我将其放置在clippath中的图像具有不透明度（意味着对象也具有透明度），我知道这是因为我将透明图像设置为叠加层，该叠加层始终位于其他对象之上。

我的查询是

我可以单独设置剪切路径区域来忽略覆盖吗？还是像clippath那样设置首选项和下一个叠加优先？
当前clippath没有边框，我不知道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,globalCompositeOperation: 'xor' }),new fabric.Rect({ width: 100,fill: 'blue',top: 100 }),fill: 'green',left: 100,]);

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

感谢您的帮助！

FIDDLE

解决方法

一个非常有趣的问题。

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

如相关github帖子所述，各层的应用方式如下（从下至上）：

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

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

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

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

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

请注意，仅当相应的画布项目被激活时，边框才可见。有关更多信息，您可以在自定义项上选中此link。

canvas fabricjs fabricjs2 html5-canvas javascript