Flutter中如何以右上角为固定轴旋转CustomPainter？

要实现以右上角为固定锚点旋转CustomPaint中的绘制对象，核心是通过坐标系变换的顺序来控制旋转锚点，具体步骤如下：

• 1. 明确绘制图形的实际尺寸
     首先需要确定你从SVG转换而来的图形的宽高（假设为shapeWidth和shapeHeight），这是计算锚点位置的基础。如果不确定，可以在CustomPainter的getSize方法中返回固定尺寸，或者通过绘制路径的getBounds()方法获取。
• 2. 调整坐标系变换顺序
     在CustomPainter的paint方法中，通过Canvas的变换方法组合实现固定锚点旋转，必须遵循平移→旋转→反向平移的顺序：

  @override
  void paint(Canvas canvas, Size size) {
    // 定义图形尺寸和旋转角度
    final double shapeWidth = 200;
    final double shapeHeight = 150;
    final double rotationAngle = pi / 4; // 45度旋转
  
    // 保存当前画布状态，避免影响其他绘制
    canvas.save();
  
    // 第一步：将坐标系原点平移到图形的右上角
    canvas.translate(shapeWidth, 0);
    // 第二步：绕当前原点（即图形右上角）旋转
    canvas.rotate(rotationAngle);
    // 第三步：将坐标系平移回图形的左上角相对位置，确保图形绘制在正确位置
    canvas.translate(-shapeWidth, 0);
  
    // 绘制你的SVG转换而来的图形（替换成你的实际绘制代码）
    drawConvertedShape(canvas, shapeWidth, shapeHeight);
  
    // 恢复画布状态
    canvas.restore();
  }
  
  // 示例：SVG转换后的绘制方法（替换为FlutterShapeMaker生成的代码）
  void drawConvertedShape(Canvas canvas, double width, double height) {
    // 这里是实际的路径、填充、描边等绘制逻辑
    final path = Path()
      ..moveTo(0, 0)
      ..lineTo(width, 0)
      ..lineTo(width, height)
      ..lineTo(0, height)
      ..close();
    canvas.drawPath(path, Paint()..color = Colors.blue);
  }
  
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
  

• 3. 关键注意事项
  • 必须使用canvas.save()和canvas.restore()包裹变换逻辑，防止变换影响画布上的其他元素。
  • 如果图形需要自适应父容器尺寸，将shapeWidth和shapeHeight替换为size.width和size.height，确保锚点始终对应容器的右上角。
  • 旋转角度使用弧度制（如pi/2对应90度），若需使用角度，可通过degreesToRadians()方法转换。

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