围绕其中心旋转绘制的文本

问题描述

我试图旋转在Canvas上绘制的文本，使其围绕中心。相反，在下面的代码中，当我按下浮动按钮时，文本绕文本的左上角旋转。

按下按钮将增加角度，该角度将传递到CanvasPainter以绘制文本。

矩形的左上角最初应位于offset。

import 'package:Flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double _angle = 0;
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: CustomPaint(
            painter: CanvasPainter(_angle),child: Container(),)
         ),appBar: AppBar(title: Text('Test')),floatingActionButton: FloatingActionButton(
          onpressed: () => setState(() => _angle += .1),child: const Icon(Icons.add),)
      ),);
  }
}

class CanvasPainter extends CustomPainter {
  final double angle;
  final Offset offset = Offset(50,50);
  
  CanvasPainter(this.angle);
  
  @override
  void paint(Canvas canvas,Size size) {
    final fill = TextPainter(
      text: TextSpan(text: 'This is a test',style: TextStyle(fontSize: 80)),textDirection: TextDirection.rtl);
    
    fill.layout();
    
    canvas.save();
    //canvas.translate(-fill.width/2,-fill.height/2);
    canvas.rotate(angle);
    canvas.translate(offset.dx,offset.dy);
      
    fill.paint(canvas,Offset.zero);
    
    canvas.restore();
  }
  
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

解决方法

这是您要做的：

[...]
canvas.save();
final pivot = fill.size.center(offset); 
canvas.translate(pivot.dx,pivot.dy); 
canvas.rotate(angle);
canvas.translate(-pivot.dx,-pivot.dy);
fill.paint(canvas,offset);
canvas.restore();