Как плавно повернуть растровое изображение в Android относительно центра изображения без колебательного движения

Я хочу повернуть растровое изображение на основе щелчка пользователя на 10 градусов. Следуя многочисленным ответам stackoverflow и google, я пробовал различные комбинации вращения Matrix.

Однако изображение на самом деле не вращается, как ожидалось, и дает дрожащее представление о вращении + колебании вокруг центра холста. Для проверки я увеличиваю угол поворота на 10 градусов (вместо щелчков) каждый раз, когда вызывается метод рисования объекта. Изображение представляет собой симметричный круг [окружающий прямоугольник 64x64], и я ожидаю, что оно будет вращаться в центре экрана вокруг своего собственного центра, как колесо, но оно вращается и перемещается по диагонали вправо-вниз и возвращается к центру экрана колебательным образом. .

 public void draw(Canvas canvas) {
    Matrix matrix = new Matrix();

    rotation += 10;
    float px = this.viewWidth/2;
    float py = this.viewHeight/2;
    matrix.setRotate(rotation, bitmap.getWidth()/2, bitmap.getHeight()/2);
    Bitmap newbmp = Bitmap.createBitmap(bitmap, 0, 0, getImgWidth(), getImgHeight(), matrix, true);
    canvas.drawBitmap(newbmp, px - (getImgWidth()/2), py - (getImgHeight()/2), null);

 }

android image rotation smooth
person Anshul    schedule 15.11.2012    source источник

Ответы (3)


arrow_upward
19
arrow_downward

Вот пример. Я разбил его на 3 шага. Первый перевод перемещает растровое изображение так, чтобы его центр находился в точке 0,0. Затем выполняется поворот и, наконец, перемещение центра растрового изображения в нужное место на холсте. Вам не нужно второе растровое изображение.

Matrix matrix = new Matrix();
rotation += 10;
float px = this.viewWidth/2;
float py = this.viewHeight/2;
matrix.postTranslate(-bitmap.getWidth()/2, -bitmap.getHeight()/2);
matrix.postRotate(rotation);
matrix.postTranslate(px, py);
canvas.drawBitmap(bitmap, matrix, null);

В качестве оптимизации создайте Matrix один раз вне этого метода и замените создание вызовом matrix.reset()

person yoah    schedule 15.11.2012
comment
Огромное спасибо!. Получил эту работу с перемещением матрицы из метода «рисования» и обеспечением того, чтобы матрица не сбрасывалась [дает эффект плавного вращения]. Также используется matrix.setRotate(rotation, bitmap.getWidth()/2, bitmap.getHeight()/2); вместо первых двух методов post*. - person Anshul; 15.11.2012
comment
Спасибо за этот ответ. Это спасает мой день. - person Siddharth; 06.08.2014
comment
Что это за вид здесь? - person Akshatha Srinivas; 20.08.2014
comment
Как получить растровое изображение (масштабированное растровое изображение)? - person Hiren Dabhi; 29.10.2014
comment
Вместо того, чтобы сначала переводить наполовину в центральную точку, вы можете использовать matrix.postTranslate(px, py, centerx, centery). - person Ionoclast Brigham; 17.04.2017

arrow_upward
0
arrow_downward

Вам нужно перевести растровое изображение в точку 0,0 (или нарисовать его в 0,0) и повернуть его туда, а затем перевести обратно, как таковое:

canvas.save();
    canvas.translate(this.viewWidth, this.viewHeight);
    canvas.rotate(rotation);
    canvas.drawBitmap(newbmp, -(getImgWidth()/2), -(getImgHeight()/2), null);
canvas.restore();

Здесь я рисую его с центром в 0,0 (я думаю), потому что при повороте это около 0,0, а не центр экрана, как можно было бы подумать. Если вы нарисуете центр в 0,0, он будет вращаться вокруг центра растрового изображения.

Если мой код не выполняет отрисовку центра растрового изображения в 0,0, вы можете изменить мой код, чтобы отрисовать его в центре, и он будет работать так, как вы хотите.

Надеюсь это поможет!

person Michael Dotson    schedule 15.11.2012
comment
:( . Вышеприведенный метод усугубил ситуацию. Теперь мое колесо движется в правом нижнем углу и колеблется вокруг правого нижнего угла, в то время как остальной фон и объекты выглядят как есть. canvas.translate просто сдвигает центр колеса. - person Anshul; 15.11.2012
comment
Это действительно работает, если вы переводите getImgWidth()/2 и getImgHeight()/2 вместо размеров вида. - person Ja͢ck; 09.03.2014

arrow_upward
0
arrow_downward 

// x : x coordinate of image position
// y : y coordinate of image position
// w : width of canvas
// h : height of canvas
canvas.save();
canvas.rotate(angle, x + (w/2), y + (h/2));
canvas.drawBitmap(image, x, y, null);
canvas.restore();

Шаги

  1. Сохраните существующий холст
  2. Поверните холст относительно центра растрового изображения, которое вы рисуете на холсте с углом поворота
  3. Нарисуйте изображение
  4. Восстановить изображение
person Mallikarjun M    schedule 27.12.2017