透明对象作为clipPath

Question

我在对象上使用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,
      })

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

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

Answer 1

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