Прозрачный объект как clipPath

Question

Я использую clipPath для объекта, чтобы его можно было увидеть только внутри fabric.Rect, как видно здесь .Чтобы увидеть мое фоновое изображение, я установил прямоугольную заливку на '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