Как масштабировать изображение шаблона плавно в холсте HTML5?

Question

Я использую setTransform, чтобы увеличить изображение моего фонового рисунка. Масштаб начинается с 1 и каждый раз, когда шкала уменьшается на 0,01, до достижения 0,5.

Так вот код масштабирования:

context.setTransform(scale, 0, 0, scale, position.x, position.y); 

В обновлении:

scale -= 0.01; 

Используя приведенный выше код, когда я анимировать изменения фона изображения шаблона заменяется масштабируемым шаблон изображения правильно. Однако переход не очень гладок. Он работает так, будто изображение внезапно мелькнуло на другом изображении за короткое время, но заметно. Я хочу, чтобы замена была более гладкой и незаметной, но я не знаю, как добиться этого эффекта.

Answer 1

Вы можете использовать translate() вместо setTransform()

ctx.translate(pt.x,pt.y); 
ctx.scale(factor,factor); 
ctx.translate(-pt.x,-pt.y); 

Короче говоря, вы хотите translate() контекст холста на ваше смещение, scale() его увеличения или уменьшения масштаба, а затем translate() назад напротив смещения мыши. Обратите внимание, что вам нужно преобразовать позицию курсора из пространства экрана в преобразованный контекст холста.

Вопрос this вопрос для получения дополнительной информации и живых примеров.

Answer 2

Вы можете использовать SetTransform

Первые два числа направление и длина (шкала) от оси х, следующие два являются направление и длина оси у, а последние два являются расположение Происхождение.

Самый быстрый способ установить перевод, масштаб и вращение

var scale = ? 
var originX = ? 
var originY = ? 
var rotation = ? 
ctx.setTransform(scale,0,0,scale,originX,originY); 
ctx.rotate(rotation); 

или вы можете задать поворот в SetTransform путем вычисления направления оси

var scale = ? 
var originX = ? 
var originY = ? 
var rotation = ? 
// get the x axis direction and length 
var xdx = Math.cos(rotation) * scale; 
var xdy = Math.sin(rotation) * scale; 
// if you are not skewing then the y axis is at 90deg so x is neg y and y is x 
ctx.setTransform(xdx,xdy,-xdy,xdx,originX,originY); 

Затем, если вам нужно восстановить преобразование по умолчанию

ctx.setTransform(1,0,0,1,0,0); // restore default transform 

Все значения для setTransform указаны в pi xels и set transform в основном описывает, где и какая форма рендер создаст пиксель на 0,0

Сглаживание панорамирования и масштабирования.

Этот ответ углубляется и дает рабочий пример использования мыши для масштабирования и масштабирования изображения с помощью мыши через setTransform (нет необходимости использовать восстановление сохранения). Он также показывает, как сгладить масштаб и панорамирование Pan and Zoom