如何获取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轴缩放倍数一致的情况。如果画布被拉扁过,就不适用了。
如何获取canvas当前的缩放值的更多相关文章
- Entity Framework 6 Recipes 2nd Edition(12-8)译 -> 重新获取一个属性的原始值
12-8. 重新获取一个属性的原始值 问题 在实体保存到数据库之前,你想重新获取属性的原始值 解决方案 假设你有一个模型 (见 Figure 12-11) 表示一个员工( Employee),包含工资 ...
- 如何获取byte的各个bit值以及常见位操作
项目中通过信号采集板的数据获取车上仪表盘指示灯的信息,将接收到的数据转成byte后,还要将每一个Byte的各个Bit值分离出来,这样才知道每个bit的值代表的具体信息.这里记录下如何获取byte的各个 ...
- js设置、获取单值cookie和多值cookie
js设置.获取单值cookie和多值cookie,代码如下: var CookieUtil = (function () { var Cookie = function () { // 获取单值coo ...
- Pyqt 获取动态生成的QLineEdit值
动态生成控件参考上一篇: http://www.cnblogs.com/dcb3688/p/4588814.html 那如何获取动态生成控件的值呢? 比如,动态的生成10个输入框QLineEdit,输 ...
- C#获取json字符串指定的值
Newtonsoft.Json在json和对象之间转化是一个非常强大的工具. 对象转化json字符串 Newtonsoft.Json.JsonConvert.SerializeObject() jso ...
- orm获取关联表里的属性值
ORM——关系对象模型 laravel中的Eloquent ORM用于和数据表互动,其中每个数据库表会和一个对应的「模型」互动,想要了解请查看官方文档或自行百度.获取关联表里的属性值代码如下: /** ...
- PHP获取MySql新增记录ID值的方法
今天发现用mysql_insert_id()获取到的新增记录的id不正确, 虽然发现源代码的事务写的有问题,但是最根本的原因是,我插入数据的id类型是bigint型 获取MySql新增记录ID值的方法 ...
- 获取表单选中的值(利用php和js两种方式)
php代码中获取表单中单选按钮的值: (单选按钮只能让我们选择一个,这里有一个“checked”属性,这是用来默认选取的,我们每次刷新我们的页面时就默认为这个值.) 例: <form name= ...
- 如何用jquery获取页面下HiddenField的值··
怎么用jquery获取页面上HiddenField的值·· 怎么用jquery获取页面上HiddenField的值··?HiddenField的值是从后台赋值的··· 先赋值给Hiddenfield ...
随机推荐
- uniapp vue mixin使用
这个mixin的翻版,主要用来分离处理列表数据逻辑 我用了覆写模式 创建mixin ListMoreDataMixin // 由于没有超类的限制这里要判断下 function ____checkGet ...
- 打造NGK生态星空计划,高倍币VAST即将震撼上线!
援引华盛顿邮报.彭博社.路透社以及CNN等知名媒体的报道,NGK官方近日宣布,为了完善NGK生态星空计划,NGK官方近日即将推出SPC的子币VAST,以鼓励更多的生态建设者参与. NGK官方相关负责人 ...
- Java 添加 、读取以及删除PPT幻灯片中的视频、音频文件
在PPT中,可以操作很多种元素,如形状.图形.文字.图片.表格等,也可以插入视频或者音频文件,来丰富幻灯片的内容呈现方式.下面将介绍在Java程序中如何来添加视频.音频文件到PPT幻灯片,读取和删除幻 ...
- 百度 Apollo无人车平台增加传感器
https://github.com/ApolloAuto/apollo/issues/1649 如果想加入一个新的传感器不是百度官方推荐的传感器到Apollo平台做法: First you can ...
- 【HTB靶场系列】靶机Carrier的渗透测试
出品|MS08067实验室(www.ms08067.com) 本文作者:大方子(Ms08067实验室核心成员) Hack The Box是一个CTF挑战靶机平台,在线渗透测试平台.它能帮助你提升渗透测 ...
- JUC并发编程学习笔记
JUC并发编程学习笔记 狂神JUC并发编程 总的来说还可以,学到一些新知识,但很多是学过的了,深入的部分不多. 线程与进程 进程:一个程序,程序的集合,比如一个音乐播发器,QQ程序等.一个进程往往包含 ...
- JVM线上故障初步简易排查
线上故障主要包括cpu 磁盘 内存 网络等问题 依次排查 1.cpu 1) 先用ps找到进程pid 2) top -H -p pid 找到cpu占用高的线程 3)printf '%x\n' pid 获 ...
- 不同浏览器CSS样式不兼容问题
一句话,我想的太复杂了.向朋友请教才了解到,其实只要加个判断即可,首先获取到浏览器的基本信息,像什么版本啊,名称啊.默认语言啊等等,然后根据不同浏览器默认加载不同CSS样式即可,获取浏览器版本的连接如 ...
- oracle impdp ORA-02304 invalid object identifier literal
reference: https://webgeest.blogspot.com/2015/07/ora-39083-ora-02304-on-impdp-datapump.html 解决方法 ...
- EFCodeFirst属性映射约定
EFCodeFirst属性映射约定 EFCodeFirst 属性映射约定 CodeFirst与数据表之间得映射方式又两种:Data Annotation和Fluent API 默认约定: 表名为类名的 ...