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