如何獲取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


免責聲明!

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



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