CODEWITHSUNDEEP
dartflutter
Natwar Singh
Natwar Singh

Reputation: 2275

Flutter - How to rotate an image around the center with canvas

I am trying to implement a custom painter that can draw an image (scaled down version) on the canvas and the drawn image can be rotated and scaled.

I get to know that to scale the image I have to scale the canvas using scale method.

Now the questions is how to rotate the scaled image on its center (or any other point). The rotate method of canvas allow only to rotate on top left corner.

Here is my implementation that can be extended

Upvotes: 11

Views: 16537

Answers (3)

KimNguyen
KimNguyen

Reputation: 1791

figure 1 figure 2

This can achieve by shifting the coordinate space as illustrated in figure 1. The translation is the difference in coordinates between C1 and C2, which are exactly as between A and B in figure 2. With some geometry formulas, we can calculate the desired translation and produce the rotated image as in the method below

ui.Image rotatedImage({ui.Image image, double angle}) {
  var pictureRecorder = ui.PictureRecorder();
  Canvas canvas = Canvas(pictureRecorder);

  final double r = sqrt(image.width * image.width + image.height * image.height) / 2;
  final alpha = atan(image.height / image.width);
  final beta = alpha + angle;
  final shiftY = r * sin(beta);
  final shiftX = r * cos(beta);
  final translateX = image.width / 2 - shiftX;
  final translateY = image.height / 2 - shiftY;
  canvas.translate(translateX, translateY);
  canvas.rotate(angle);
  canvas.drawImage(image, Offset.zero, Paint());

  return pictureRecorder.endRecording().toImage(image.width, image.height);
}

alpha, beta, angle are all in radian.

Here is the repo of the demo app

Upvotes: 17

spydon
spydon

Reputation: 11512

If you don't want to rotate the image around the center of the image you can use this way. You won't have to care about what the offset of the canvas should be in relation to the image rotation, because the canvas is moved back to its original position after the image is drawn.

void rotate(Canvas c, Image image, Offset focalPoint, Size screenSize, double angle) {
  c.save();
  c.translate(screenSize.width/2, screenSize.height/2);
  c.rotate(angle);
  // To rotate around the center of the image, focal point is the
  // image width and height divided by 2
  c.drawImage(image, focalPoint*-1, Paint());
  c.translate(-screenSize.width/2, -screenSize.height/2);
  c.restore();
}

Upvotes: 3

Wouter Vandenputte
Wouter Vandenputte

Reputation: 2093

Had the same problem, Solution was simply making your own rotation method in three lines

void rotate(Canvas canvas, double cx, double cy, double angle) {
  canvas.translate(cx, cy);
  canvas.rotate(angle);
  canvas.translate(-cx, -cy);
}

We thus first move the canvas towards the point you want to pivot around. We then rotate along the the topleft (default for Flutter) which in coordinate space is the pivot you want and then put the canvas back to the desired position, with the rotation applied. Method is very efficient, requiring only 4 additions for the translation and the rotation cost is identical to the original one.

Upvotes: 21

Related Questions