Flutter_我有一个关于旋转画布的问题

Question

我正在使用canvas和customPaint绘制形状，如下图所示。 我将拖动每个形状来旋转它。

我知道我可以通过canvas.rotate旋转它。 但是如果我使用它，所有形状都旋转相同会出现问题。

以下是我的代码的一部分。

class Shape {}
class Rectangle extends Shape {
  Rect? rect;
  double? left, top;
  bool? isRectSelected;

  final paint = Paint();

  Rectangle(Color color, double width) {
    this.paint
      ..color = color
      ..isAntiAlias = true
      ..strokeCap = StrokeCap.round
      ..strokeWidth = width
      ..style = PaintingStyle.stroke; // no fill
  }

// ========================

class Sketcher extends CustomPainter {
  final List<Shape> shapes;

  Sketcher(
    this.shapes,
  ) : super();

  @override
  void paint(Canvas canvas, Size size) {
    for (var shape in shapes) {
      if (shape is Rectangle) {    
        final degrees = 30; // angle
        final radians = degrees * math.pi / 180;

        // ! If use it, all shape rotate same angle
        canvas.translate(shape.rect!.left, shape.rect!.top); // left top 
        canvas.rotate(radians); 
        canvas.translate(-shape.rect!.left, -shape.rect!.top);

        // ractangle shape
        canvas.drawRect(shape.rect!, shape.paint);
      }

    // same code circle...
    }
  }

如何旋转每个形状而不是整个画布？ 你能告诉我怎么做吗？

Answer 1

您可以使用canvas.save()保存画布的状态，然后根据需要调整画布，然后使用canvas.restore()将画布恢复到 save() 之前的状态。 save-restore 操作中的操作仍将绘制到画布上。

canvas.save();
// do something
// canvas.rotate(radians);
// canvas.drawRect();  // this rect will be rotated
canvas.restore();

canvas.drawRect();  // this rect will not be rotated