2

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

我的查询是

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

这是我下面的代码

HTML

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

JS

(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);
})();

感谢你的帮助 ！！！

小提琴

4

1 回答 1

1

非常有趣的问题。

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

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

各种物理和功能的顺序

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

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

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

白色和浅蓝色背景上的 T 恤图像。


至于边框，您可以在代码中添加以下内容： 
group.set({
    borderColor: 'yellow',
    cornerColor: 'yellow',
    cornerSize: 6,
    transparentCorners: false
  });
group.setActiveObject(canvas);

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

于 2020-09-07T16:16:08.060 回答