颤动图像着色

Question

我正在尝试用不同的颜色为图像着色。我正在拍摄两张图片，一张是 PNG 格式，另一张是 SVG 格式。我正在获取一个颜色列表，当用户点击颜色列表中的颜色时，图像的颜色会发生变化。我正在使用不同颜色的图像。我想要的是图像应该保留它没有覆盖的最后一个红色？这也是我的代码和图像示例。

SVG 图像 的 SVG 图像链接

import 'package:flutter/material.dart';
    import 'package:flutter_svg/flutter_svg.dart';
    void main() => runApp(new MaterialApp(
          home: new ColorPicker(),
          debugShowCheckedModeBanner: false,
        ));

class ColorPicker extends StatefulWidget {
  ColorPickerState createState() => ColorPickerState();
}

const List<Color> mainColors = const <Color>[
  Colors.black,
  const Color(0xFF980000),
  const Color(0xFFFF0000),
  const Color(0xFFFF9900),
  const Color(0xFFFFFF00),
  const Color(0xFF00FF00),
  const Color(0xFF00FFFF),
  const Color(0xFF4A86E8),
  const Color(0xFF0000FF),
  const Color(0xFF9900FF),
  const Color(0xFFFF00FF),
];
Color selectedColor;

class ColorPickerState extends State<ColorPicker> {
  void onColorSelected(Color color) {
    setState(() {
      selectedColor = color;
    });
  }

  void onColorclear(Color color) {
    setState(() {
      selectedColor = null;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text('data'),
      ),
      body: new Center(
          child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new RaisedButton(
            child: new Text('reset'),
            onPressed: () => onColorclear(selectedColor),
          ),
          new Divider(height: 10.0,),
          SingleChildScrollView(
            child: new Row(children: _mainColors(context)),
            scrollDirection: Axis.horizontal,
          ),
          new SizedBox(
            height: 200.0,
            width: 200.0,
            child: new Image.asset(
              'assets/ABCD.png',
              color: selectedColor,
              colorBlendMode: BlendMode.modulate,
            ),
          ),
          AspectRatio(
            aspectRatio: 1.5,
            child: new SvgPicture.asset(
              'assets/ABC.svg',
              color: selectedColor,
              colorBlendMode: BlendMode.modulate,
            ),
          ),
        ],
      )),
    );
  }

  List<Widget> _mainColors(BuildContext context) {
    var children = <Widget>[];
    for (Color color in mainColors) {
      children.add(InkWell(
        onTap: () => onColorSelected(color),
        child: new Container(
            height: 20.0,
            width: 70.0,
            decoration: BoxDecoration(
              color: color,
            )),
      ));
    }
    return children;
  }
}

Answer 1

您可以使用Color.lerp(colorA, colorB, interpolation)来混合两种颜色。对于您的用例，可以存储先前混合的颜色，以便将其与下一个选定的颜色混合。我修改了您的两种方法来演示这一点。

Color mixedColor, previousColor;
void onColorSelected(Color colorSelected) {
  if (previousColor == null)
    // store current color if there's no previous color
    previousColor = colorSelected;
  else
    // if there's a previous color, mix with current selected color
    mixedColor = Color.lerp(previousColor, colorSelected, 0.5);
  print(
      'Color prev: $previousColor current: $currentColor mixed: $mixedColor');
  setState(() {
    if (mixedColor != null) {
      colorSelected = mixedColor;
      // store mixed color as previous color so it can be mixed
      // with the next selected color
      previousColor = mixedColor;
    }
    currentColor = colorSelected;
  });
}

不过，向 SVG 图像添加颜色似乎对我来说不起作用，但这似乎是一个不同的问题。

演示