59

An example can be found here compass.java. Api here

1
  • 1
    To anyone still checking this in the future, translate will only move the canvas coordinates, not anything you drew on it. So translate first, draw next :)
    – Zee
    Oct 13, 2018 at 6:09

4 Answers 4

100

Even when I first answered this question a few years ago, I didn't really understand how Canvas transforms (like translate, rotate, etc.) worked. I used to think that translate moved the thing that you were drawing. Actually, translate moves the entire coordinate system. This has the desired effect of also moving the thing you are drawing.

On your screen it looks like you are moving the drawing:

Android Canvas.translate() method

What is actually happening is you are moving the coordinate system to a new place on the canvas:

enter image description here

I draw the tree first at (0,0). Then I translate the origin of the coordinate system to some other spot on the canvas. Then I draw the tree again at (0,0). This way my drawing code doesn't have to change anything at all. Only the coordinate system changes.

Normally (0,0) is at the top left of your view. Doing Canvas.translate moves it to some other part of your view.

Saving and Restoring the Coordinate System

You can do save() and restore() to get back to your original coordinate system.

// draw the tree the first time
canvas.drawBitmap(tree, 0, 0, mPaint);

// draw the tree the second time
canvas.save();
canvas.translate(dx, dy); // dx = change in x, dy = change in y
canvas.drawBitmap(tree, 0, 0, mPaint); // draw still thinks it is at (0,0)
canvas.restore(); // undo the translate 

When you restore, the drawing is already on the canvas. Restoring doesn't change that. It just moves the coordinate system back to wherever it was when you saved it.

Why Translate

Note that you could achieve the same affect by changing the x,y coordinates of the draw method:

// draw the tree the first time
canvas.drawBitmap(tree, x, y, mPaint);

// update the x,y coordinates
x += dx;
y += dy;

// draw the tree the second time
canvas.drawBitmap(tree, x, y, mPaint);

This might be more intuitive coming from a math background. However, when you are translating, rotating, and scaling your image, it is often much easy to keep your drawing logic the same and just transform the canvas. Recalculating x and y for every draw could be very expensive.

1
  • 1
    I actually wanted to know what save(), translate() and restore() all did. And this answers it. Jul 19, 2017 at 0:25
53

Imagine it's a Print Head.

The easiest way to explain this is to imagine it is the print head of an inkjet or 2D printer.

translate basically "moves" the print head along the X and Y axes the number of pixels that you tell it to.

The resulting position becomes the new "origin" (0,0).

Now that we understand that, let's make a simple face by doing the following:

Starting Origin:

x

The x will (roughly) represent where the origin (or print head) is.

Draw a rectangle for the left eye:

canvas.drawRect(10, 10, 10, 10, paint);

x__
|__|

Note: The "origin" has not changed, it is still at the top left of this rectangle.

Move "origin" right by 20 points:

canvas.translate(20, 0)

 __    x    
|__|

Draw the right eye using the exact same rectangle command:

canvas.drawRect(10, 10, 10, 10, paint);

 __    x__
|__|   |__|

Move "origin" back to the original X position and move it down on the Y axis:

canvas.translate(-20, 20) // Positive numbers for the second param is "down" on the y-axis.

 __     __
|__|   |__|

x

And draw a mouth to finish it off:

canvas.drawLine( 0, 0, 30, 0, paint ); 
 __     __
|__|   |__|

x___________

Now just move the "origin" down 20 points to showcase our masterpiece:

canvas.translate(0, 20)
 __     __
|__|   |__|

___________

x

Not perfectly to scale as there's only so much you can do with a monospace font. :)

8
  • This is the best explanation by far, now after few drawings, it gets a bit complicated. Is there a way to reset to origin?
    – Lamar
    May 31, 2017 at 10:27
  • @Lamar Thanks. Not sure if there's a built in method but you could keep track of it manually so that every time you use translate, you update your local variable to show "how far away you are from the starting point". And then if you want to go back to that original starting point, you could just us a translate to reverse those movements. May 31, 2017 at 20:18
  • Yes that's what I ended up doing. Thanks for the help.
    – Lamar
    Jun 1, 2017 at 8:49
  • 2
    I thought your name was Joshua Printer
    – mallaudin
    Apr 3, 2019 at 19:03
  • 1
    Yup. I first read your answer and suddenly thought is it the Printer. Great answer btw.
    – mallaudin
    Apr 4, 2019 at 5:49
47

Translate - Basically do what it says. Just translate the canvas using x,y. If you want to draw two objects and the one is just translation of the other e.g x2 = x1 + 50 for each point . You don't have to make all your calculations again for the second object but you can just translate the canvas and draw again the same object. I hope this example will help you.

6
  • 1
    I still don't understand what it does. Could you explain why they do the translate, draw and then undo the translate?
    – Vincent
    Apr 26, 2011 at 13:17
  • 7
    Ok image you have a canvas and you want to draw 2 trees on it and one bird which is above the first tree. The trees have the same y coordinate but different x (let's say for example 50 inches). So what are you going to do ? .... continue
    – Mojo Risin
    Apr 26, 2011 at 13:55
  • 17
    You'll draw the first three then you'll move your canvas 50 inches to the right ( which is what canvas.translate do ) and will draw the second tree. In order to restore the original position of the canvas you'll move it again 50 inches but this time to the left. And now when you draw the bird it'll be above the first tree, if you don't restore the canvas original state all object that you draw after the translation will be translated to - in our example the bird will be drawn above the second tree
    – Mojo Risin
    Apr 26, 2011 at 13:55
  • 4
    You don't have to. The first time you have to deal with such stuff is little confusing but once you get used to it things are getting simpler.
    – Mojo Risin
    Apr 26, 2011 at 14:00
  • couldn't agreed more, the explanation is killing me! Nice work .
    – Roy Lee
    May 3, 2013 at 16:47
0

it will change the position of your canvaz(except scale) either x or y if we translate & scale then it is transformation in general terminology

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.