如何使用 TextPainter 绘制文本？

Question

documentation for CustomPainter's paint method 表示 "To paint text on a Canvas, use a TextPainter"。所以在我的 MyCustomPainter 的绘画方法中，我有以下内容：

TextSpan span = new TextSpan(text: 'Yrfc');
TextPainter tp = new TextPainter(text: span, textAlign: TextAlign.left);
tp.layout();
tp.paint(canvas, new Offset(5.0, 5.0));

我尝试了各种偏移量 (Offset.zero, Offset.infinite, new Offset(10.0, 10.0) 但我始终无法看到屏幕上绘制的文字。

Answer 1

我在输入这个问题时找到了答案，但我已经思考了一段时间，所以发帖以防它对其他人有帮助。

解决问题的方法是将 TextSpan 行更改为：

TextSpan span = new TextSpan(style: new TextStyle(color: Colors.grey[600]), text: 'Yrfc');

显然，由于我没有明确选择颜色，因此要么将文本绘制成不可见的颜色，要么将其绘制为白色（背景）颜色。

Answer 2

在TextPainter的构造函数中，还需要指定TextDirection参数，否则会出现异常：

TextSpan span = new TextSpan(style: new TextStyle(color: Colors.blue[800]), text: name);
TextPainter tp = new TextPainter(text: span, textAlign: TextAlign.left, textDirection: TextDirection.ltr);
tp.layout();
tp.paint(canvas, new Offset(5.0, 5.0));

Answer 3

要在 Flutter 中绘画，您可以使用 CustomPaint widget. The CustomPaint widget takes a CustomPainter 对象作为参数。在那个 class 中，你必须重写 paint 方法，它给你一个 canvas 可以在上面绘画。这是在上图中绘制文本的代码。

@override
void paint(Canvas canvas, Size size) {
  final textStyle = TextStyle(
    color: Colors.black,
    fontSize: 30,
  );
  final textSpan = TextSpan(
    text: 'Hello, world.',
    style: textStyle,
  );
  final textPainter = TextPainter(
    text: textSpan,
    textDirection: TextDirection.ltr,
  );
  textPainter.layout(
    minWidth: 0,
    maxWidth: size.width,
  );
  final xCenter = (size.width - textPainter.width) / 2;
  final yCenter = (size.height - textPainter.height) / 2;
  final offset = Offset(xCenter, yCenter);
  textPainter.paint(canvas, offset);
}

备注：

如果您使用的是白色背景，请务必将文本颜色设置为除默认白色以外的其他颜色。
Flutter 努力不假定文本方向，因此您需要明确设置它。缩写 ltr 代表 left-to-right，英语等语言使用。另一个选项是 rtl (right-to-left)，阿拉伯语和希伯来语等语言使用。当代码用于开发人员未考虑的语言上下文时，这有助于减少错误。

上下文

这是 main.dart 代码，以便您可以在上下文中查看它。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: HomeWidget(),
      ),
    );
  }
}

class HomeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CustomPaint( //                       <-- CustomPaint widget
        size: Size(300, 300),
        painter: MyPainter(),
      ),
    );
  }
}

class MyPainter extends CustomPainter { //         <-- CustomPainter class
  @override
  void paint(Canvas canvas, Size size) {
    //                                             <-- Insert your painting code here.
  }
  
  @override
  bool shouldRepaint(CustomPainter old) {
    return false;
  }
}

另见

请参阅 this article 以获得更完整的答案。

如何使用 TextPainter 绘制文本？

How do you use a TextPainter to draw text?

dart

flutter

备注：

上下文

另见