Question

对于在画布上绘制文本，可以使用相当简单的结构：

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

是否可以以一定角度绘制文本，例如45度或90度（从下往上垂直）？

Answer 1

听起来你正在寻找转型。有一个普通Transform Widget，但还有一个更具体的RotatedBox Widget，听起来它将非常适合你。

new RotatedBox(
  quarterTurns: 3,
  child: const Text('Hello World!'),
)

如果您需要更多控制旋转（使用90度以外的其他增量），您应该能够实现Transform Widget和Matrix4.rotationZ

    new Container(
      color: Colors.blue,
      child: new Transform(
        transform: new Matrix4.rotationZ(-0.785398),
        child: new Container(
          padding: const EdgeInsets.all(8.0),
          color: const Color(0xFFE8581C),
          child: const Text('Apartment for rent!'),
        ),
      ),
    )

Answer 2

要在画布上旋转文本，可以使用画布变换而不是旋转整个画布。

看起来像这样：

@override
void paint(Canvas canvas, Size size) {
  // save is optional, only needed you want to draw other things non-rotated & translated
  canvas.save();
  canvas.translate(100.0, 100.0);
  canvas.rotate(3.14159/4.0);

  TextSpan span = new TextSpan(
      style: new TextStyle(color: Colors.blue[800], fontSize: 24.0,
          fontFamily: 'Roboto'), text: "text");
  TextPainter tp = new TextPainter(
      text: span, textDirection: TextDirection.ltr);
  tp.layout();
  tp.paint(canvas, new Offset(0.0, 0.0));
  // optional, if you saved earlier
  canvas.restore();
}

请注意，我正在翻译然后旋转，因为如果你翻译后甚至使用偏移量，你可能会得到与你想要的不同的结果。此外，一旦开始使用变换（平移和旋转），您可能希望保存变换状态，然后在绘制想要变换的任何内容后恢复，至少在绘制旋转文本以外的任何内容时。

Answer 3

以指定角度绘制文本的函数：

 void drawText(Canvas context, String name, double x, double y, double angleRotationInRadians)
 {
      context.save();
          context.translate(x, y);
          context.rotate(angleRotationInRadians);
          TextSpan span = new TextSpan(
              style: new TextStyle(color: Colors.blue[800], fontSize: 24.0,
              fontFamily: 'Roboto'), text: name);
          TextPainter tp = new TextPainter(
              text: span, textAlign: TextAlign.left,
              textDirection: TextDirection.ltr);
          tp.layout();
          tp.paint(context, new Offset(0.0,0.0));
      context.restore();
  }

PS。“rmtmckenzie”，非常感谢你的帮助。

使用颤振在特定位置绘制文本

3 个答案: