我正在尝试用不同的颜色为图像着色。我正在拍摄两张图片,一张是 PNG 格式,另一张是 SVG 格式。我正在获取一个颜色列表,当用户点击颜色列表中的颜色时,图像的颜色会发生变化。我正在使用不同颜色的图像。我想要的是图像应该保留它没有覆盖的最后一个红色?
这也是我的代码和图像示例。
SVG 图像 link of SVG image
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;
}
}
最佳答案
您可以使用 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 图像添加颜色似乎对我来说不起作用,但这似乎是一个不同的问题。演示
关于dart - flutter 图像着色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51839608/