Измените размер изображения холста по клику и отцентрируйте его с помощью JavaScript

Question

Как можно увеличить фотографию, содержащуюся в теге <canvas>?В частности, я хотел бы увеличить фотографию в том месте, где щелкнул пользователь.

Увеличение не сложно:

img.width = img.width + 100;
img.height = img.height + 100;
ctx.drawImage(img,0,0,img.width,img.height);

Проблема заключается в том, что я также хотелцентрировать увеличенное изображение в точке щелчка, как обычное увеличительное изображение.

Answer 1

[ Рабочая демонстрация ]

Данные

• Изменить размер по: R
• Размер холста: Cw, Ch
• Размер изображения изменен: Iw, Ih
• Положение измененного изображения: Ix, Iy
• Положение клика на холсте: Pcx, Pcy
• Нажмите на исходное изображение: Pox, Poy
• Положение клика на измененном изображении: Prx, Pry

Метод

1. Щелкните положение события на холсте -> положение на изображении: Pox = Pcx - Ix, Poy = Pcy - Iy
2. Положение на изображении -> Поз. На изображении с измененным размером: Prx = Pox * R, Pry = Poy * R
3. top = (Ch / 2) - Pry, left = (Cw / 2) - Prx
4. ctx.drawImage(img, left, top, img.width, img.height)

Осуществление

// resize image
I.w *= R;
I.h *= R;

// canvas pos -> image pos
Po.x = Pc.x - I.left;
Po.y = Pc.y - I.top;

// old img pos -> resized img pos
Pr.x = Po.x * R;
Pr.y = Po.y * R;

// center the point
I.left = (C.w / 2) - Pr.x;
I.top  = (C.h / 2) - Pr.y;

// draw image
ctx.drawImage(img, I.left, I.top, I.w, I.h);