I'm trying to rotate text painted on a Canvas about it's center. Instead, in the below code, the text rotates about the top left corner of the text when I press the floating button.
Pressing the button increments the angle, which is passed to CanvasPainter
to draw the text.
The rectangle's top left corner should be initially positioned at 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;
}
this is what you have to do:
[...]
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();