CODEWITHSUNDEEP
flutterdartcanvasrotationtranslate
Charly
Charly

Reputation: 1352

How to rotate / scale around a reference point in flutter/dart?

I have a CustomPaint which I pass a object, derived from CustomPainter. In its paint() method I get a Canvas to which I draw an image.

Question: Now I need a rotation with a reference point - so not rotating around the origin but e.g. Offset(100,200). How can this be done?

In other languages, I moved the reference point to the origin, performed the rotation and afterwards moved everything back:

sketch of a rotation with a reference point

In Flutter it seems, that the rotation is still performed around the top-left point of the image - even if it is moved away from the origin.

My Code:

class SomeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(painter: SomePainter());
  }
}

class SomePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {

    canvas.translate(-100, -200);
    // rotate by 30° counterclockwise
    canvas.rotate(-30 / 180 * pi);
    canvas.translate(100, 200);  // might need some sin/cos to rotate this vector before

    canvas.drawImage(image, Offset.zero, Paint());
  }
}

In a second step, I would like to perform a scaling on a reference point. This does not work with the strategy from above as well...

Update: I just experimented with the Transform widget, which does what I want - but how to do this within the paint() method and the Canvas?

  Transform(
    // My image is 800x400, thus 100,200 is 12.5% / 50% of the image
    alignment: Alignment(0.125 * 2 - 1, 0.50 * 2 - 1),
    transform: Matrix4.rotationZ(-30 / 180 * pi),
    child: CustomPaint(painter: MyPainter()),
  ),

Upvotes: 1

Views: 72

Answers (0)

Related Questions