Flutter如何在指定位置绘制文本？能否绘制带角度的文本？

当然可以实现！在Flutter的Canvas上绘制带旋转角度的文本其实很容易，核心思路是利用Canvas的变换能力——在绘制文本前对画布做旋转、平移操作，绘制完成后再恢复画布状态就好。

实现步骤与代码示例 #

我们可以基于你提供的基础文本绘制函数，修改成支持旋转角度的版本：

// 记得导入dart:math包来使用pi
import 'dart:math';
import 'package:flutter/material.dart';

void drawRotatedName(Canvas context, String name, double x, double y, double angle) {
  TextSpan span = TextSpan(
    style: TextStyle(color: Colors.blue[800], fontSize: 24.0, fontFamily: 'Roboto'),
    text: name
  );
  TextPainter tp = TextPainter(
    text: span,
    textAlign: TextAlign.left,
    textDirection: TextDirection.ltr
  );
  tp.layout();

  // 保存当前画布状态，避免影响后续绘制
  context.save();
  // 将画布原点平移到文本要放置的目标位置
  context.translate(x, y);
  // 旋转画布：注意这里要把角度转成弧度（Flutter的rotate方法接收弧度值）
  context.rotate(angle * pi / 180);
  // 绘制文本，Offset参数可以调整文本相对于旋转中心的位置
  // 示例中用(0, -tp.height)让文本底部对齐旋转中心，你可以按需修改
  tp.paint(context, Offset(0, -tp.height));
  // 恢复画布到之前的状态
  context.restore();
}

关键细节说明 #

• 弧度转换：rotate()方法只接受弧度值，所以如果你的角度是45°、90°这种角度值，必须用角度 * pi / 180转换成弧度。
• 变换顺序：一定要先做translate()平移到目标位置，再执行rotate()旋转，这样旋转是围绕目标点进行的，而不是画布原点。
• 文本位置调整：绘制时的Offset可以灵活调整，比如想让文本中心对齐旋转点，可以用Offset(-tp.width/2, -tp.height/2)，这样文本的中心会和(x,y)重合。

调用示例 #

在CustomPainter的paint方法里调用这个函数就能看到效果：

class RotatedTextPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 绘制45度倾斜的文本，位置在(150, 200)
    drawRotatedName(canvas, "Rotated 45°", 150, 200, 45);
    // 绘制90度垂直的文本
    drawRotatedName(canvas, "Rotated 90°", 350, 200, 90);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

内容的提问来源于stack exchange，提问作者Michael Kanzieper