單擊時調整畫布圖像的大小，並使用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);