如何为图像添加透明度答案

【问题标题】：How to Add transparency to image如何为图像添加透明度
【发布时间】：2020-05-08 23:55:53
【问题描述】：

我正在使用flame 包中的精灵来显示图像。我正在尝试为图像添加透明度或不透明度。

这是我的代码：

void render(Canvas c) {
    Sprite spriteImg = Sprite('someImg.png');
    rect = Rect.fromLTWH(10, 10, 20, 20);
    spriteImg.renderRect(c, rect);
}

我似乎不知道如何添加不透明度。

【问题讨论】：

标签： flutter dart sprite flame

【解决方案1】：

class NewComponent extends PositionComponent{
  static final Color _color = Color(0xFFFFFFFF);
  static final Paint _paint = Paint()
    ..color = _color
    ..style = PaintingStyle.fill;

  Sprite? sprite;

  Future<void> onLoad() async {
    sprite = await Sprite.load('image.png');
  }

  @override
  void render(Canvas canvas) {
    super.render(canvas);
    final double colorOpacity = opacity.clamp(0, 1.0);
    _paint.color = _color.withOpacity(colorOpacity);
    sprite?.render(
      canvas,
      size: size,
      overridePaint: _paint,
    );
  }
}

动态更新透明度时的重要细节 _paint.color = ? 和 opacity.clamp(0, 1.0)

【讨论】：

【解决方案2】：

您必须覆盖渲染时使用的绘制，如下所示：

void render(Canvas c) {
    Sprite spriteImg = Sprite('someImg.png');
    rect = Rect.fromLTWH(10, 10, 20, 20);
    Paint opacityPaint = Paint()..color = Colors.white.withOpacity(0.5);
    spriteImg.renderRect(c, rect, overridePaint: opacityPaint);
}

这将使您的精灵呈现 50% 的不透明度。

【讨论】：

是否可以渲染一个精灵，使它看起来更亮/更暗，而不是透明/不透明？
@GoingBananas 很快你就可以使用ColorEffect 来做到这一点，一旦我们发布 rc14（应该很快）。