如何獲取canvas當前的縮放值

項目中一直有一個問題困擾着我，我們的畫布可以縮放平移旋轉，支持拖拽生成圖形，生成手寫筆跡，如果用戶選擇的線條粗細爲5像素，那麼即使畫布縮放過繪製出的線條粗細也應該是視覺上的5px，所以再繪製時賦值給context.lineWidth的值需要一個計算過程（利用canvas當前縮放值來計算出一個值）。

那麼怎麼獲取縮放值呢？因爲canvas的CanvasRenderingContext2D.getTransform() 方法可以獲取當前被應用到上下文的轉換矩陣，我試圖從這個上面獲取代表當前畫布縮放值，但沒找到轉換的方法也不知存不存這樣一個轉換方法能計算出畫布縮放值。

所以我只能從其他方法入手，下面簡單介紹下我這個粗暴的方法，就是長度對比法：

首先我們定義兩個點  這兩個點可以看做是屏幕座標系的兩點A（0,0）B（0,10），當然我們知道這個長度是10。

然後我們再計算出AB兩點的位置分別在canvas座標系中的座標值，通過什麼方法計算呢，我之前的一個博文有介紹過計算方法,，

  假如我們再經過這個計算過程後，得到A對應的A1爲（5,10）B對應的B1爲（10,15）可以計算出A1B1的長度爲7.07。那麼可以理解爲原來10個單位的距離現在7.07個單位就能表示出來了。也就是畫布被放大了10/7.07=1.41。

那麼計算出來的 lineWidth=5/1.41 。視覺上就是5px的粗細

這個計算方法只適合於計算畫布縮放x軸，y軸縮放倍數一致的情況。如果畫布被拉扁過，就不適用了。

 

相關文章參考：

https://www.cnblogs.com/fangsmile/p/5651429.htm

https://www.cnblogs.com/fangsmile/p/9324194.html