最近再做 webcad , 需要在 canvas 上對圖形進行縮放,主要分為以下幾個步驟:
1、找到當前光標所在位置,確定其在相對 canvas 坐標系的坐標
綁定鼠標滾輪事件,假定每次縮放比例 0.2
求鼠標相對坐標 p0
2、圖形由點組成,對每個點進行矩陣變換,得到變換后的坐標,假設圖中一點為 p1:
v1 = p1 - p0 // 將 p0 作為變換圖形的原點
p1 = v1.scale(x_ratio, y_ratio) // 縮放
p1 = p1 + p0 // 還原坐標點
3、清除當前圖形,繪制新圖形
通過以上步驟可實現以鼠標當前位置為中心,縮放圖像。 以上為實現的基本思路, 代碼后期補上。