如何获取canvas当前的缩放值
如何 获取 当前 Canvas 缩放
2023-09-11 14:18:07 时间
项目中一直有一个问题困扰着我,我们的画布可以缩放平移旋转,支持拖拽生成图形,生成手写笔迹,如果用户选择的线条粗细为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
相关文章
- 如何更好地学习dubbo源代码
- 如何在不同编程语言中获取现在的Unix时间戳(Unix timestamp)?
- mpvue 如何使用腾讯视频插件?
- PHP的继承方法如何获取子类名?get_class() 和 get_called_class()
- Office 如何复印身份证正反面到一张纸上
- 新版POI如何获取日期类型的cell的值
- sql如何通过当前日期获取上周,上上周,上上上周的起始日期(周一_周七)
- imageView--转-如何代码动态的获取和设置ImageView的宽度和高度?
- 【已解决】Android微信开放平台,申请移动应用的 应用签名 如何获取
- 阿里如何实现海量数据实时分析技术-AnalyticDB
- 9. 如何在控制器或模型中获取当前登录的管理员或登录用户信息
- 如何让搜索引擎抓取AJAX内容?
- 如何借助 HealthKit 打造一款健身应用?
- 如何获取阿里巴巴的大数据能力?
- 如何处理Eclipse错误消息 The declared package does not match the expected package
- 如何获取阿里巴巴的大数据能力?
- 如何进行需求优先级管理?
- nodejs的process模块如何获取其他进程的pid
- 如何获取qt控件的子控件
- ava EE 7 - Injection into Runnable/Callable object ejb entityManager Concurrency ManagedExecutorService 异步调用如何获取context
- 【高并发】亿级流量场景下如何实现分布式限流?看完我彻底懂了!!(文末有福利)
- 【高并发】面试官问我如何使用Nginx实现限流,我如此回答轻松拿到了Offer!
- C# DataGridView如何获取选中行的某个数据
- 输入数字如何获取
- Starting Tomcat v7.0 Server at localhost' has encountered a problem. 如何解决
- Flask的多app应用,多线程如何体现
- 腾讯云服务器标准型S2和标准型S3的区别如何选择?
- 如何获取网站某个接口要传递的参数?
- 如何获取OpenHarmony相应版本的代码