Flutter中如何在CustomPainter画布上旋转单个绘制对象？

Transform.rotate是Flutter Widget层的布局组件，只能接收Widget作为子节点，根本没法包裹返回值是void的canvas.drawPath这类画布绘制命令。而且CustomPainter里的paint方法是直接走画布绘制指令流，不是搭Widget树，把Widget塞到绘制逻辑里必然会触发类型报错。

不用旋转整个画布，借助Canvas自带的状态存回机制就能实现仅旋转单个绘制对象，完全不影响其他内容，操作步骤如下：

• 绘制目标旋转对象前，先调用canvas.save()保存当前画布的初始状态
• 应用旋转变换：注意画布默认以左上角为坐标原点，若要绕对象自身的锚点旋转，需要先把坐标原点平移到目标旋转中心点，执行旋转后再平移回原坐标系，否则对象会绕画布左上角偏移错位
• 执行单个对象的绘制逻辑
• 绘制完成后调用canvas.restore()回滚到之前保存的画布状态，后续所有绘制操作都不会受本次旋转影响

// imports omitted
import 'dart:math';
import 'package:flutter/material.dart';

class TimerDialPainter extends CustomPainter {

  Path getTrianglePath(Offset position) {
    return Path()
      ..moveTo(position.dx - 20, position.dy - 20)
      ..lineTo(position.dx + 40, position.dy + 40)
      ..lineTo(position.dx - 20, position.dy + 40)
      ..close(); // 补全路径闭合逻辑，填充效果更准确
  }

  @override
  void paint(Canvas canvas, Size size) {
    final centerX = size.width / 2;
    final centerY = size.height / 2;
    const secondsArc = 60;

    final countBrush = Paint()
      ..color = Colors.red 
      ..style = PaintingStyle.fill
      ..strokeWidth = 3;

    final secondhandX = centerX + 80 * cos(secondsArc * pi / 180);
    final secondhandY = centerY + 80 * sin(secondsArc * pi / 180);
    final rotateCenter = Offset(secondhandX, secondhandY);

    // 保存画布初始状态
    canvas.save();
    // 以三角形所在位置为中心旋转60度
    canvas.translate(rotateCenter.dx, rotateCenter.dy);
    canvas.rotate(pi / 3);
    canvas.translate(-rotateCenter.dx, -rotateCenter.dy);
    // 绘制应用了旋转效果的三角形
    canvas.drawPath(
      getTrianglePath(rotateCenter),
      countBrush
    );
    // 恢复画布状态，后续绘制不受本次旋转影响
    canvas.restore();

    // 此处可继续绘制其他不需要旋转的元素，比如表盘刻度、其余指针
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

补充：不止旋转，单个对象的缩放、斜切这类变换都能用这个save/restore的套路实现，只要把变换操作和对应的绘制代码包在save和restore中间，就不会污染全局画布状态、影响区间外的其他绘制内容。

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