Flutter：如何在 Canvas 上绘制图标？

Question

我正在使用 CustomPainter 像这样在 Flutter 中绘制：

@override
void paint(Canvas canvas, Size size) {
  canvas.drawRect(...);
  canvas.drawImage(...);
  ...
}

如何在canvas上绘制Icon？

Answer 1

创建一个 Paragraph 包含正确字体的代码点，根据需要设置样式，然后绘制它。

final icon = Icons.add;
var builder = ui.ParagraphBuilder(ui.ParagraphStyle(
  fontFamily: icon.fontFamily,
))
  ..addText(String.fromCharCode(icon.codePoint));
var para = builder.build();
para.layout(const ui.ParagraphConstraints(width: 60));
canvas.drawParagraph(para, const Offset(20, 20));

Answer 2

@Richard Heap 和@pskink 根据你的回答，我一直在尝试并想出了这个：谢谢你们，这也是我正在寻找的。

final icon = Icons.add;
TextPainter textPainter = TextPainter(textDirection: TextDirection.rtl);
textPainter.text = TextSpan(text: String.fromCharCode(icon.codePoint),
        style: TextStyle(fontSize: 40.0,fontFamily: icon.fontFamily));
textPainter.layout();
textPainter.paint(canvas, Offset(50.0,50.0));

Answer 3

只是为了添加一个小但重要的细节，如果您尝试从外部图标包（例如 Material Design Icons 或 FontAwesome）呈现图标，您需要添加 package TextStyle.

中的参数

final icon = MdiIcons.check;
TextPainter textPainter = TextPainter(textDirection: TextDirection.ltr);
textPainter.text = TextSpan(
  text: String.fromCharCode(icon.codePoint),
  style: TextStyle(
    color: Colors.black,
    fontSize: size,
    fontFamily: icon.fontFamily,
    package: icon.fontPackage, // This line is mandatory for external icon packs
  ),
);
textPainter.layout();
textPainter.paint(canvas, Offset(x, y));

Answer 4

如果你有SVG档设计。您可以使用 this website 来自动生成 CustomPainter 文件 dart.

Flutter：如何在 Canvas 上绘制图标？

Flutter: How to paint an Icon on Canvas?

icons

canvas

custom-painting

flutter