项目中一直有一个问题困扰着我,我们的画布可以缩放平移旋转,支持拖拽生成图形,生成手写笔迹,如果用户选择的线条粗细为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当前的缩放值的更多相关文章

  1. Entity Framework 6 Recipes 2nd Edition(12-8)译 -> 重新获取一个属性的原始值

    12-8. 重新获取一个属性的原始值 问题 在实体保存到数据库之前,你想重新获取属性的原始值 解决方案 假设你有一个模型 (见 Figure 12-11) 表示一个员工( Employee),包含工资 ...

  2. 如何获取byte的各个bit值以及常见位操作

    项目中通过信号采集板的数据获取车上仪表盘指示灯的信息,将接收到的数据转成byte后,还要将每一个Byte的各个Bit值分离出来,这样才知道每个bit的值代表的具体信息.这里记录下如何获取byte的各个 ...

  3. js设置、获取单值cookie和多值cookie

    js设置.获取单值cookie和多值cookie,代码如下: var CookieUtil = (function () { var Cookie = function () { // 获取单值coo ...

  4. Pyqt 获取动态生成的QLineEdit值

    动态生成控件参考上一篇: http://www.cnblogs.com/dcb3688/p/4588814.html 那如何获取动态生成控件的值呢? 比如,动态的生成10个输入框QLineEdit,输 ...

  5. C#获取json字符串指定的值

    Newtonsoft.Json在json和对象之间转化是一个非常强大的工具. 对象转化json字符串 Newtonsoft.Json.JsonConvert.SerializeObject() jso ...

  6. orm获取关联表里的属性值

    ORM——关系对象模型 laravel中的Eloquent ORM用于和数据表互动,其中每个数据库表会和一个对应的「模型」互动,想要了解请查看官方文档或自行百度.获取关联表里的属性值代码如下: /** ...

  7. PHP获取MySql新增记录ID值的方法

    今天发现用mysql_insert_id()获取到的新增记录的id不正确, 虽然发现源代码的事务写的有问题,但是最根本的原因是,我插入数据的id类型是bigint型 获取MySql新增记录ID值的方法 ...

  8. 获取表单选中的值(利用php和js两种方式)

    php代码中获取表单中单选按钮的值: (单选按钮只能让我们选择一个,这里有一个“checked”属性,这是用来默认选取的,我们每次刷新我们的页面时就默认为这个值.) 例: <form name= ...

  9. 如何用jquery获取页面下HiddenField的值··

    怎么用jquery获取页面上HiddenField的值·· 怎么用jquery获取页面上HiddenField的值··?HiddenField的值是从后台赋值的··· 先赋值给Hiddenfield ...

随机推荐

  1. Dart: 请求graphql数据

    import 'package:http/http.dart' as http; const url = "http://127.0.0.1:4000/graphql"; main ...

  2. NGK公链DeFi发力,Baccarat项目引爆流动性挖矿热潮

    DeFi市值屡创新高,在这条康庄大道上,人们摩拳擦掌,就像90年代美国西部淘金热一般.DeFi带来的流动性挖矿构成了今年加密货币一道靓丽的风景线,而人们手握的不再是当年的锄头铲子,而是一串代码. 随着 ...

  3. 「NGK每日快讯」12.17日NGK第44期官方快讯!

  4. 【Python】面向对象:类与继承简单示例

    Python 面向对象 Python 是一门面向对象的设计语言,与此对应的就是面向过程编程与函数式编程 面向对象的一个优点就是更好的增强代码的重用性. 面向过程编程可以简单的理解为:重点在步骤,将一个 ...

  5. HTTP 1.x 学习笔记 —— Web 性能权威指南

    HTTP 1.0的优化策略非常简单,就一句话:升级到HTTP 1.1.完了! 改进HTTP的性能是HTTP 1.1工作组的一个重要目标,后来这个版本也引入了大量增强性能的重要特性,其中一些大家比较熟知 ...

  6. Python3.x 基础练习题100例(11-20)

    练习11: 题目: 古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? 分析: 兔子的规律为数列1,1,2, ...

  7. MySQL深入研究--学习总结(3)

    前言 接上文,继续学习后续章节.细心的同学已经发现,我整理的并不一定是作者讲的内容,更多是结合自己的理解,加以阐述,所以建议结合原文一起理解. 第九章<普通索引和唯一索引,如何选择> 从查 ...

  8. Java 语言基础 01

    语言基础·一级 什么是计算机? 计算机(Computer)全称:电子计算机,俗称电脑.是一种能够按照程序运行,自动.高速处理海量数据的现代化智能电子设备.由硬件和软件所组成,没有安装任何软件的计算机称 ...

  9. C#中事件流程的简单理解

    C#中事件流程的简单理解 C#中事件基于委托,要理解事件要先理解委托,但是现在我还没想好怎么写委托,如果不懂委托可以先找找委托的文章 事件基于委托,为委托提供了一种发布/订阅机制 一上来就是这句话,很 ...

  10. 漏洞复现-ActiveMq反序列化漏洞(CVE-2015-5254)

          0x00 实验环境 攻击机:Win 10 靶机也可作为攻击机:Ubuntu18 (docker搭建的vulhub靶场) 0x01 影响版本 Apache ActiveMQ 5.13.0之前 ...