Flutter：如何在画布上绘制图标？

Question

我正在使用CustomPainter在Flutter中进行绘图，就像这样：

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

如何在canvas上绘制一个Icon？

- IronHawk

---

你是指 Icon 吗？如果是的话，你不能这样做。 - pskink

是的，我在谈论那个 Icon。如果这样的话，即使图标实际上不是从TTF字体内部创建出来的，那也非常奇怪。 - IronHawk

这是一个 TextSpan，请参见 https://www.crossdart.info/p/flutter/0.0.38-dev/src/widgets/icon.dart.html#line-128。 - pskink

Answer 1

@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));

- Ant D

---

有没有办法在图标上添加GestureDetector？ - Simran Aswani

1. 如果你指的是 IconButton 小部件 - 它有一个 onPressed 函数。
2. 如果你想添加上述 CustomPainter，请将其作为子元素添加到 Container 中。这个 Container 的父级可以是 GeatureDetector 或 InkWell。

- Ant D

你还需要将颜色传递给TextStyle。否则，你将看不到任何东西。 - user2233706

Answer 2

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

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));

- Richard Heap

---

这对于 https://pub.dev/packages/font_awesome_flutter 并不起作用，但 @Ludonope 的答案可以。 - opsb

Answer 3

只是要补充一个小但重要的细节，如果你正在尝试从外部图标包（如Material Design Icons或FontAwesome）渲染图标，则需要在 TextStyle 中添加package参数。

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));

- Ludonope

---

谢谢，使用“package: icon.fontPackage”确实是在使用来自不同来源的图标包时的最佳选择:D - apatrck01

Answer 4

如果您有SVG文件设计，您可以使用此网站自动生成Dart的CustomPainter文件。

- Doan Bui