2

我正在尝试Konva.Rect用作图像过滤器的叠加层。当使用带有透明色标的径向渐变时，在 IOS 模拟器上它可以完美运行，但在设备上它无法识别透明并用纯色填充它。

我尝试使用transparent，rgba(0,0,0,0)但结果是一样的。有什么替代方法可以尝试吗？

这是我的示例代码；

          this.filterOverlay = new Konva.Rect({
            name: 'overlayRect',
            width: this.backgroundImage.width() * this.backgroundImage.scaleX(),
            height: this.backgroundImage.height() * this.backgroundImage.scaleY(),

            globalCompositeOperation: 'multiply',
            fillRadialGradientStartPoint: { x: this.backgroundImage.width()/2, y: this.backgroundImage.height()/2 },
            fillRadialGradientStartRadius: 0,

            fillRadialGradientEndPoint: { x: this.backgroundImage.width()/2, y: this.backgroundImage.height()/2 },
            fillRadialGradientEndRadius: this.backgroundImage.width()-100,
            //fillRadialGradientColorStops: [0, 'transparent', 0.8, 'transparent', 1, '#222222'],
            fillRadialGradientColorStops: [0, 'rgba(0,0,0,0)', 0.8, 'rgba(0,0,0,0)', 1, '#222222'],

          });
          this.baseLayer.add(this.filterOverlay);
          this.baseLayer.draw();
4

2 回答 2

1

您也可以使用带有 alpha 值的十六进制值：#RRGGBBAA，您尝试过吗？例如，您可以使用#00000000.

于 2019-08-22T23:11:54.890 回答
0

看起来这是globalCompositeOperation: 'multiply'Safari v12 上的问题。我可以在 Mac 上重现该问题（https://jsbin.com/madolohiru/1/edit?html,js,output）。

作为一种解决方法，尽量不要使用globalCompositeOperation或使用不同的值，这会给您带来类似的过滤效果。

于 2019-08-24T09:06:01.513 回答