透明对象作为 clipPath答案

【问题标题】：Transparent Object as clipPath透明对象作为 clipPath
【发布时间】：2019-01-15 23:28:30
【问题描述】：

我在一个对象上使用clipPath，因此它只能在fabric.Rect 内部看到，如here 所示。为了查看我的背景图片，我将矩形填充设置为'transparent'。

为清楚起见，我还添加了红色笔划。

const clipRectangle = new fabric.Rect({
  left: 0,
  top : 0,
  absolutePositioned: true,
  width: 200,
  height: 200,
  fill: 'transparent',
  strokeWidth: 1,
  stroke: 'red',
  selectable: false,
})

然后将其设置为我的图像的 clipPath：

      img.set({
        left: clipRectangle.left + (clipRectangle.width / 2),
        top: clipRectangle.top + (clipRectangle.height / 2),
        centeredScaling: true,
        lockScalingFlip: true,
        selectable: true,
        clipPath: clipRectangle,
      })

不幸的是，这会导致以下结果：如果您仔细查看我的矩形笔划的右下角，则剪切的图像仅在笔划上可见：似乎透明度也应用于剪切路径的内容.

有没有办法让内容可见，同时保持矩形透明？

【问题讨论】：

发布您的代码。我们不知道你在做什么。你的 clipPath 形状有填充吗？
@NoGrabbing 完成，我为我的 clipPath 和我的图像添加了代码
@PierreOlivierTran 我也面临同样的问题，你是如何克服这个问题的？

标签： fabricjs

【解决方案1】：

您是否考虑过设置不透明度值而不是将填充设置为透明？ http://fabricjs.com/docs/fabric.Object.html#opacity

【讨论】：