Пример можно найти здесь compass.java. Api здесь

Даже когда я впервые ответил на этот вопрос несколько лет назад, я действительно не понимал, как работают Canvas преобразования (например, translate , rotate и т.д.). Раньше я думал, что это translate сдвинуло то, что ты рисовал. Фактически, translate перемещает всю систему координат. Это также приводит к желаемому эффекту перемещения объекта, который вы рисуете.

На вашем экране это выглядит так, как будто вы перемещаете рисунок:

Что на самом деле происходит, так это то, что вы перемещаете систему координат в новое место на холсте:

Сначала я рисую дерево в (0,0) . Затем я переношу начало координат в какое-нибудь другое место на холсте. Затем я снова рисую дерево на (0,0) . Таким образом, мой код рисования вообще не должен ничего менять. Меняется только система координат.

Обычно (0,0) находится в верхнем левом углу вашего обзора. Выполнение Canvas.translate перемещает его в какую-то другую часть вашего представления.

Сохранение и восстановление системы координат

Вы можете сделать save() и restore() , чтобы вернуться к вашей исходной системе координат.

 // 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 
  

Когда вы restore , рисунок уже находится на холсте. Восстановление этого не меняет. Это просто возвращает систему координат туда, где она была, когда вы ее сохраняли.

Зачем переводить

Обратите внимание, что вы могли бы добиться того же эффекта, изменив координаты x, y метода рисования:

 // 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);
  

Это может быть более интуитивно понятным, исходя из математического фона. Однако, когда вы переводите, поворачиваете и масштабируете свое изображение, часто гораздо проще сохранить прежнюю логику рисования и просто преобразовать холст. Пересчет x и y для каждого розыгрыша может быть очень дорогостоящим.

Представьте, что это печатающая головка.

Самый простой способ объяснить это — представить, что это печатающая головка струйного или 2D-принтера.

translate по сути, печатающая головка «перемещает» по осям X и Y то количество пикселей, на которое вы ей указываете.

Результирующая позиция становится новым «источником» (0,0).

Теперь, когда мы это понимаем, давайте сделаем простое лицо, выполнив следующее:

Запуск Origin:

 x
  

x будет (примерно) представлять, где находится источник (или печатающая головка).

Нарисуйте прямоугольник для левого глаза:

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

x__
|__|
  

Примечание: «Происхождение» не изменилось, оно по-прежнему находится в верхнем левом углу этого прямоугольника.

Переместите «origin» вправо на 20 пунктов:

 canvas.translate(20, 0)

 __    x    
|__|
  

Нарисуйте правый глаз, используя точно такую же команду rectangle:

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

 __    x__
|__|   |__|
  

Переместите «origin» обратно в исходное положение X и переместите его вниз по оси Y:

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

 __     __
|__|   |__|

x
  

И нарисуйте рот, чтобы закончить это:

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

x___________
  

Теперь просто переместите «origin» вниз на 20 пунктов, чтобы продемонстрировать наш шедевр:

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

___________

x
  

Не идеально масштабируется, поскольку с моноширинным шрифтом можно сделать не так много. 🙂

Переводить — в основном делать то, что там написано. Просто переведите холст, используя x, y. Если вы хотите нарисовать два объекта, и один является просто переводом другого, например, x2 = x1 50 для каждой точки. Вам не нужно заново выполнять все свои вычисления для второго объекта, но вы можете просто перевести canvas и снова нарисовать тот же объект. Я надеюсь, что этот пример поможет вам.

это изменит положение вашего холста (кроме масштаба) либо по x, либо по y, если мы переведем и масштабируем, то это преобразование в общей терминологии