Question

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

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

如何在Icon上绘制canvas？

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

只需添加一个很小但很重要的细节，如果您尝试从外部图标包（例如Material Design Icons或FontAwesome）中渲染图标，则需要在{{1 }}。

package

Answer 3

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

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

3 个答案: