关于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