CustomPaint drawLine 无法在绘制的线条上应用透明度
CustomPaint drawLine cannot apply transparency on lines drawn
我试图使用 Alpha 通道在 CustomPaint
的 Canvas.drawLine()
的线条颜色上应用透明度。
问题
然而,alpha 通道的颜色调整对结果没有影响,例如,下面的代码仍然给我 100% 不透明的白线
final gridPaint = Paint()
..strokeJoin = StrokeJoin.miter
..strokeWidth = 1.0
..color = const Color(0xe6ffffff)
..style = PaintingStyle.stroke;
canvas.drawLine(start, end, gridPaint);
解决方法
我必须绘制 1 像素宽 drawRect
以获得透明线。
问题
这是设计使然吗?
您可以使用withOpacity方法选择您喜欢的颜色。
Colors.green.withOpacity(0.5)
或
Color(0xe6ffffff).withOpacity(0.5)
根据您希望达到的不透明度级别,将值设置为 0 到 1 之间的数字。
我代表@pskink 发布他的测试代码和我的 Android 设备生成的图像:
print('devicePixelRatio: ' + MediaQuery.of(context).devicePixelRatio.toString());
var pr = ui.PictureRecorder();
var c = Canvas(pr);
var p = Paint();
c.drawRect(Rect.fromLTWH(0, 0, 1, 3), p..color = Color(0x8000ff00));
c.drawRect(Rect.fromLTWH(1.5, 0, 1, 3), p);
c.drawLine(Offset(3.5, 3.0), Offset(3.5, 6.0), p..color = Color(0x80ff0000));
c.drawLine(Offset(5.0, 3.0), Offset(5.0, 6.0), p);
var img = await pr.endRecording().toImage(6, 6);
var data = await img.toByteData(format: ui.ImageByteFormat.png);
final imgDir = Platform.isAndroid ?
(await pathman.getExternalStorageDirectories(type: pathman.StorageDirectory.pictures))[0] :
(await pathman.getApplicationDocumentsDirectory());
if (Platform.isAndroid) {
await Directory(imgDir.path).create(recursive: true);
}
final suffix = DateTime.now().toString().replaceAll(RegExp(r'[\:\ \.]+'), '-');
final filePath = '${imgDir.path}/screenshot-$suffix.png';
File(filePath).writeAsBytesSync(data.buffer.asInt8List());
在我的 CustomPaint
的 paint()
中使用上面的代码得到下面的小图像。
我试图使用 Alpha 通道在 CustomPaint
的 Canvas.drawLine()
的线条颜色上应用透明度。
问题
然而,alpha 通道的颜色调整对结果没有影响,例如,下面的代码仍然给我 100% 不透明的白线
final gridPaint = Paint()
..strokeJoin = StrokeJoin.miter
..strokeWidth = 1.0
..color = const Color(0xe6ffffff)
..style = PaintingStyle.stroke;
canvas.drawLine(start, end, gridPaint);
解决方法
我必须绘制 1 像素宽 drawRect
以获得透明线。
问题
这是设计使然吗?
您可以使用withOpacity方法选择您喜欢的颜色。
Colors.green.withOpacity(0.5)
或
Color(0xe6ffffff).withOpacity(0.5)
根据您希望达到的不透明度级别,将值设置为 0 到 1 之间的数字。
我代表@pskink 发布他的测试代码和我的 Android 设备生成的图像:
print('devicePixelRatio: ' + MediaQuery.of(context).devicePixelRatio.toString());
var pr = ui.PictureRecorder();
var c = Canvas(pr);
var p = Paint();
c.drawRect(Rect.fromLTWH(0, 0, 1, 3), p..color = Color(0x8000ff00));
c.drawRect(Rect.fromLTWH(1.5, 0, 1, 3), p);
c.drawLine(Offset(3.5, 3.0), Offset(3.5, 6.0), p..color = Color(0x80ff0000));
c.drawLine(Offset(5.0, 3.0), Offset(5.0, 6.0), p);
var img = await pr.endRecording().toImage(6, 6);
var data = await img.toByteData(format: ui.ImageByteFormat.png);
final imgDir = Platform.isAndroid ?
(await pathman.getExternalStorageDirectories(type: pathman.StorageDirectory.pictures))[0] :
(await pathman.getApplicationDocumentsDirectory());
if (Platform.isAndroid) {
await Directory(imgDir.path).create(recursive: true);
}
final suffix = DateTime.now().toString().replaceAll(RegExp(r'[\:\ \.]+'), '-');
final filePath = '${imgDir.path}/screenshot-$suffix.png';
File(filePath).writeAsBytesSync(data.buffer.asInt8List());
在我的 CustomPaint
的 paint()
中使用上面的代码得到下面的小图像。