在 Flutter 中，是否可以用替换的颜色和不透明度绘制图像？

Question

我有一张灰色的图像。我想用一种颜色来绘制它，但对画布不透明。通过使用滤色器，我可以通过替换颜色在画布上绘制它。如果我调整 alpha 值，它会改变图像的不透明度（部分灰色/红色）。以下代码 sn-p 显示了如何在画布上绘制灰色图像为红色。但是如何将红色图像绘制为对画布透明？

static void drawBrushDetail(Canvas canvas, double cx, double cy, double brushSize, double imageAngleRad) {
    canvas.translate(cx + brushSize / 2, cy + brushSize / 2);
    ui.Image bt = imgBrushTip; //this is a gray image
    Color selectedColor = getDrawColor(cx,cy);
    final _paint = Paint();
    var alphaVal=255;
    //if I change alphaVal to 100, the final draw looks more gray instead of red with 100 Alpha
    _paint.colorFilter = ColorFilter.mode(selectedColor.withAlpha(alphaVal), BlendMode.srcATop);
    if (imageAngleRad != 0.0) canvas.rotate(imageAngleRad);
    canvas.translate(-brushSize / 2, -brushSize / 2);
    
    // draw image with specified brushSize
    canvas.drawImageRect(bx, Rect.fromLTRB(0, 0, bt.width, bt.height),
        Rect.fromLTRB(0, 0, brushSize, brushSize), _paint);
    //traslate back, don't want to use save and restore layer since it's expensive
    canvas.translate(brushSize / 2, brushSize / 2);
    if (imageAngleRad != 0.0) canvas.rotate(-imageAngleRad);
    canvas.translate(-cx - brushSize / 2, -cy - brushSize / 2);
}

见下图。上面的代码将用纯红色绘制图像。 （红色箭头指向的图像）。但我希望结果是红色和透明的图像。由于在Flutter中没有设置canvas alpha的API，不知道是否可以。

Answer 1

我想通了，但功劳归于pskink

我只需要绘制一张图像（灰色），但我需要执行以下操作：

1. 调整图像大小并旋转图像。
2. 用红色替换灰色图像。
3. 使用不透明度绘制图像（现在为红色）。

这里是代码sn-p。

static void drawBrushDetail1(Canvas canvas, double cx, double cy, double size) {
    final _paint = Paint();
    const opacity = 0.5;
    _paint.color = Color.fromRGBO(0, 0, 0, opacity);
    ui.Image bx = uiImg[0];
    double scale = size / 60; //size is brush tip size and 60x60 is gray image size
    canvas.drawAtlas(
        bx,
        [
             RSTransform.fromComponents(
              rotation: imageAngleRad,
              scale: scale,
              anchorX: 30,
              anchorY: 30,
              translateX: cx,
              translateY: cy)
        ],
        [
          /* The size of gray image is 60 x 60  */
          const Rect.fromLTWH(0, 0, 60, 60)
        ],
        [Colors.red],
        BlendMode.dstIn, /*This is replace the gray image wiht red color
        null /* No need for cullRect */,
        _paint); //_paint will paint the red image in 0.5 opacity
    
  }