canvas图形缩放功能

在实现缩放功能之前，我们无非需要考虑的是图形中心点的位置确定问题，在默认状态下不论是原点还是中心点均在画布的左上角位置，在不改变原点坐标的情况下对图形进行位移操作以实现缩放后确立中心点的位置。

业务场景

当我们在画布中以鼠标的指针作为中心点对画布上的图形进行缩放时，在鼠标指针的中心点位置不变的情况下对图形进行缩放，以scale为缩放系数进行横纵坐标等比缩放，其中x,y为某个浮点数(浮点数越小缩放越平滑)，在缩放系数中存在一个缩放增量step的概念，所谓缩放增量是指每一个缩放较上一次增加了多少缩放量，除此之外我们还需要定义一个总的缩放量scaleAll，以记录前后缩放的缩放系数总量。缩放系数的换算如缩放系数为scale，即放大后的图形相对于原图放大了scale倍，例如原图是1，放大后为1.1，scale = 1.1 / 1;

缩放前和缩放后会得到两个不同的偏移坐标，我们可以先定义缩放前坐标A₁{x₁,y₁}和缩放后坐标A₂{x₂,y₂}，当我们完成缩放后其实我们鼠标的中心点已经产生了偏移到了A₂{x₂,y₂}的位置，但为了使鼠标中心点保持不变，我们需要对鼠标的中心点进行偏移回到A₁{x₁,y₁}点，那么就需要对前后两次偏移进行换算，于是得到x₂ - x₁，y₂ - y₁。

例举以A₁点为鼠标的位置，正常放大是以原点放大的，那么放大后A₁点的位置就会变成了A₂点，为了保证鼠标点不变然后需要对画布进行位移，将A₂点位置移到A₁点，就可以完成A₁点的缩放功能。A₁点坐标为x₁, y₁，A₂点坐标为x₂, y₂，放大系数为scale，那么默认状态下相对于原点放大后，A₁点的位置变成了A₂的位置，而我们的需求是要相对于A₁点放大，A₁点位置应该保持不变的，所以我们需要在放大后调整位置，就是将A₂的位置移动到A₁，于是得到 offsetX = x₂ - x₁，offsetY = y₂ - y₁。

以下是偏移公式：

let scaleAll = scale + step;
A1.x = A2.x - (A2.x - A1.x) * scaleAll / scale;
A1.y = A2.y - (A2.y - A1.y) * scaleAll / scale;
scale = scaleAll;

话不多说，上实例代码：

var scale,scaleAll = 1;  //初始化缩放系数缩放总系数
// 鼠标缩放事件
function mouseWheel(event){let e = event || window.event;let A2 = {x: e.offsetX,y: e.offsetY};let step = 0; // 缩放增量if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件//TODO 大于0滑轮向上滚动时，小于0向下滚step = e.wheelDelta > 0 ? 0.03 : -0.03;} else if (e.detail) {  //Firefox滑轮事件// TODO 大于0滑轮向下滚动，小于0向上滚step = e.detail > 0 ? -0.03 : 0.03;}/** 缩放系数的换算公式为每次缩放总系数=缩放系数+缩放增量，* 每缩放一次最后缩放缩放系数和缩放总系数值需要互换*/scaleAll = scale + step;scale = scaleAll;A1.x = A2.x - (A2.x - A1.x) * scaleAll / scale;A1.y = A2.y - (A2.y - A1.y) * scaleAll / scale;draw(A1.x, A1.y, scaleAll);
}
// 绘制图形
function draw(x, y, scale){ctx.clearRect(0,0,canvas.offsetWidth,canvas.offsetHeight);ctx.save();ctx.translate(x, y);ctx.scale(scale, scale);ctx.drawImage(image,0,0,canvas.width / 2,image.height / (image.width / canvas.width) / 2);ctx.restore();
}

以上就是本缩放功能的解题思路，供小伙伴们参考，如有不足可多多发表评论加以探讨。

canvas图形缩放功能相关推荐

【canvas 图形画布标签】(使用详解)
canvas 图形画布标签 1. 如何定义一个图形画布 ? 1.1 canvas 图形画布标签的属性有哪些 ? 1.2 canvas 图形画布的基本用法有哪些 ? 1.3 如何使用 canv ...
JavaScript 动画与Canvas图形学习笔记
动画与Canvas图形使用requestAnimationFrame 早期定时动画早期动画就是使用setInterval()来控制动画的执行无论是setInterval()还是setTimeou ...
微信小程序canvas实现签名功能
微信小程序canvas实现签名功能在微信小程序项目中,开发模块涉及到手写签名功能,微信小程序canvas闪亮登场文章目录微信小程序canvas实现签名功能前言一.微信小程序canvas实现签 ...
cad调了比例因子没反应_CAD制图初学入门技巧：将CAD图形缩放为指定尺寸
在使用浩辰CAD软件绘制图纸的过程中,很多CAD制图初学入门者由于对CAD软件的各种复杂功能不够了解,所以会出现比较多的问题,很多初学者会在网上找一下图纸联系,其中就会遇到CAD图形缩放的问题,如何将 ...
html5游戏制作raf,HTML5之弧度角度与sincos(五角星绘制)、Canvas图形组合、阴影、图像绘制及createJS应用...
弧度与sin及cos的关系目的: 通过理解弧度与sin及cos的关系,可以根据弧度及半径求出旋转指定弧度后所到达的dx,dy坐标弧度(angle)与角度(degree)的关系: 360角度 = 2 ...
Vue地图移动缩放功能
Vue 地图demo开发记录思路规划基础构成: 1.用于被显示的base地图,可以用svg等矢量图形文件来表示. 2.用于控制地图缩放的"放大","缩小"按 ...
使用meta属性禁用手机浏览器的缩放功能
在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能.这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看 ...
java图片缩放工具类,一个JAVA图形缩放处置工具类
一个JAVA图形缩放处理工具类调用的例子 import java.io.FileOutputStream; import java.io.IOException; import javax.imag ...
html实现ppt缩放效果,Powerpoint 2016缩放功能详解（附案例）
微软爸爸更新了一个新的功能:缩放. 如果你刚好是office365用户,又刚刚好闲着蛋疼参与了insider计划的话,那么你的PPT的[插入]选项卡下面会多出一个神奇的按钮. 就是这玩意儿. [缩放] ...

canvas图形缩放功能

业务场景

canvas图形缩放功能相关推荐

最新文章

热门文章