为叠加图像着色答案

【问题标题】：Colorize an image for overlay为叠加图像着色
【发布时间】：2019-09-29 19:11:06
【问题描述】：

我想展示一个瓶子里的图片，里面装满了各种颜色的液体。颜色以 RGB HEX 代码的形式存在。所以，showBottle('#ff0000') 应该展示装满红水的瓶子。我的想法是创建两个图像：瓶子（空）和另一个只有白色液体的图像。然后可以将这两个图像放在另一个上，所以我只能对“液体部分”进行着色。

我的问题：

是否可以在 Flutter 中为图像“着色”？
让两个图像相互叠加的最佳方法是什么？

编辑：我尝试将Stack 小部件和两个Image 小部件与colorBlendMode 一起使用，但透明度不起作用。见下图：

Stack(children: <Widget>[
  Image.asset(
    'assets/images/background.png',
  ),
  Image.asset(
    'assets/images/overlay.png',
    colorBlendMode: BlendMode.color,
    color: Color.fromRGBO(255, 0, 0, 1.0),
  ),
])

将BlendMode 更改为srcIn 将导致考虑透明度，但会从overlay.png 图像中删除所有信息。

【问题讨论】：

见colorBlendMode
不错！但是如何给一张图片上色@pskink？
通过使用color 和colorBlendMode 属性
这并不能解决我的问题:(我已经更新了我的问题。
使用 srcIn 混合模式

标签： android mobile flutter

【解决方案1】：

使用图像混合模式和颜色。这是一个例子，

Image.asset(
  'assets/image.jpg',
  height: 300,
  fit: BoxFit.fitHeight,
  color: _color, // Colors.red, Colors.yellow any color you want
  colorBlendMode: _blendMode, // BlendMode.color, BlendMode.darken, BlendMode.saturation, BlendMode.softLight
)

检查Image widget and its properties

【讨论】：

colorBlendMode 是可行的方法，但不适用于透明度。我已经更新了我的问题。