canvas 鼠標位置縮放圖形


最近再做 webcad , 需要在 canvas  上對圖形進行縮放,主要分為以下幾個步驟:

1、找到當前光標所在位置,確定其在相對 canvas 坐標系的坐標

  綁定鼠標滾輪事件,假定每次縮放比例 0.2

  求鼠標相對坐標 p0

2、圖形由點組成,對每個點進行矩陣變換,得到變換后的坐標,假設圖中一點為 p1:

  v1 = p1 - p0   // 將 p0 作為變換圖形的原點

  p1 = v1.scale(x_ratio, y_ratio)   // 縮放

  p1 = p1 + p0                       // 還原坐標點 

3、清除當前圖形,繪制新圖形

 

通過以上步驟可實現以鼠標當前位置為中心,縮放圖像。 以上為實現的基本思路, 代碼后期補上。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM