关于canvas的缩放和位移实战的一点点总结

本文总结了canvas的缩放和位移操作,包括变量定义、使用方法、步长计算及坐标点映射。重点介绍了如何计算缩放中心点、偏移量以及坐标点在缩放后的映射关系,对于前端开发者实现canvas交互功能具有参考价值。
摘要由CSDN通过智能技术生成

关于canvas的缩放和位移,这里做一些总结。

变量定义

defuaultScale:canvas画布的精度,也是缩放的初始值

offsetX:x方向的偏移量

offsetY:y方向的偏移量

scale:画布缩放比例,默认值:defaultScale

realScale:真实缩放比例,默认值为1,公式为realScale = scale / defaultScale

centerX:缩放中心点x坐标

centerY:缩放中心点y坐标

lastX:记录最后移动canvas的点的x坐标

lastY:记录最后移动canvas的点的y坐标

lastD:记录两指间最后的距离

使用

初始化:

如果canvas处于隐藏状态将获取不到宽高

设置画布的精度,将影响画布的清晰程度。

canvas.width = canvas.offsetWidth * defaultScale;
canvas.height = canvas.offsetHeight * defaultScale;
context = canvas.getContext('2d'); 

通过context.save - context.restore来重置每次的位移和缩放属性,从而达到不影响其他数据的目的。

当保留缩放中心点时,真实偏移量需要将中心点考虑进来。

f
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值