原理

使用的绘制方法

void ctx.drawImage(image, dx, dy, dWidth, dHeight);

参数说明:

dx
image的左上角在目标canvas上 X 轴坐标。
dy
image的左上角在目标canvas上 Y 轴坐标。
dWidth(可选)
image在目标canvas上绘制的宽度。允许对绘制的image进行缩放。如果不说明，在绘制时image宽度不会缩放。
dHeight(可选)
image在目标canvas上绘制的高度。允许对绘制的image进行缩放。如果不说明，在绘制时image高度不会缩放。

其中可视窗口就是canvas元素的实际大小, 超出的部分不可见. 以canvas的左上角建立坐标系.

实际上的目标就是将缩放图上的先前的鼠标点, 移动到鼠标位置, 也就是求上图的dx与dy

最后得到公式:
d x = ( 1 − s s ′ ) ( x o − x l ) d y = ( 1 − s s ′ ) ( y o − y l ) \begin{aligned} dx = (1-\frac{s}{s'})(x_o-x_l)\\ dy = (1-\frac{s}{s'})(y_o-y_l) \end{aligned} dx=(1−s′s)(xo−xl)dy=(1−s′s)(yo−yl)
s s s代表本次缩放比例, s ′ s' s′ 代表上次缩放比例, ( x o , y o ) (x_o,y_o) (xo,yo)代表鼠标在可视窗口的位置, ( x l , y l ) (x_l,y_l) (xl,yl) 代表图片相对可视窗口左上角的偏移量

代码

scaleEvent(e) {// 获得滚轮偏移let v = e.deltaY// 储存先前缩放量let s1 = this.scalethis.scale += vthis.scale = this.scale < 100 ? 100 : this.scale// 本次缩放量let s = this.scale// 图片在缩放后移动量let dx = (1-s/s1)*(e.offsetX-this.x)let dy = (1-s/s1)*(e.offsetY-this.y)// 得到缩放后图片偏移点this.x += dxthis.y += dy
}

js 以鼠标为中心缩放图片相关推荐

Unity2D 实现UGUI滚动鼠标滑轮以鼠标位置点为中心缩放图片
先放参考文章: Unity3d UGUI以鼠标位置点为中心缩放图片(含项目源码)https://blog.csdn.net/qq_33789001/article/details/117749837 ...
Unity实现以鼠标为中心缩放物体（一）
Unity实现以鼠标为中心缩放物体(一) 方法一:UGUI下动态设置Pivot Canvas.renderMode = ScreenSpaceCamera Canvas.renderMode = Sc ...
JS实现鼠标经过和离开图片放大缩小效果
效果: 要点:闭包理解:轮询器的清除: 以下为部分代码,所有代码见github(ImageEffect文件夹):https://github.com/ChpShy/single-play-demo/t ...
html5鼠标经过图片切换,JS实现鼠标移入移出控制图片的切换效果
在看专业英语的时候,学习JS的Timer Event.正好有一个例子,实现的是,图片自动切换,当鼠标点击图片的时候,停止切换.于是想要动手实践一下,并且添加上自己的想法.于是就有了下面的图片和代码. ...
鼠标移动效果html5,js实现鼠标左右移动，图片也跟着移动效果
效果:鼠标往左移,图片对应右移,鼠标往右移,图片就左移动.图片距离越远偏移距离越大. 思路:首先获取图片原先的距离.设置一个变化值,图片的最终距离等于原先的距离加上变化值布局:大盒子里面是图片,大盒 ...
html如何中心缩放图片,详解如何用HTML5 Canvas API控制图片的缩放变换
缩放变换scale(sx,sy)传入两个参数,分别是水平方向和垂直方向上对象的缩放倍数.例如context.scale(2,2)就是对图像放大两倍.其实,看上去简单,实际用起来还是有一些问题的.我们来 ...
js实现鼠标移入移出改变图片路径问题
刚开始一直在用js尝试mouseover和mouseout这俩属性,结果根本不起作用.换成mouseenter和mouseleave,成功. 实现效果: 移入前移入后代码: <div cla ...
QRcode.js二维码中心添加图片
上一篇文章写的二维码没有图标,然后我就想实现一个有图标的,找了半天终于是被我找到了,代码和上一篇文章一样,只是多了行代码,在加两个依赖,也不知是哪位大佬写的废话不多说直接上代码, <!DOCTY ...
html鼠标拖动变换大小案例,js实现鼠标拖拽缩放div实例代码_哒哒_前端开发者
封装为了jq插件,如下 drag. ;(function ($) { $.fn.dragDiv = function (options) { var def = { maxW:600,// 可伸缩的最 ...

js 以鼠标为中心缩放图片

原理

代码

js 以鼠标为中心缩放图片相关推荐

最新文章

热门文章