个人博客 个人博客
首页
  • 前端
  • 后端
  • Git
  • Docker
  • 网络
  • 操作系统
工具
阅读
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

董先亮

前端react开发
首页
  • 前端
  • 后端
  • Git
  • Docker
  • 网络
  • 操作系统
工具
阅读
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 高德地图接入
  • 以鼠标为中心缩放
  • 银行卡号验证
  • 前端规范化
  • 二维码与条形码
  • 监控设备接入
  • 获取鼠标位置坐标
  • node、npm关系
  • node-sass版本问题
  • html实现拖拽
  • npm发包
  • rullup打造工具库
  • 九宫格拖拽
  • 前端项目审核
  • 多次引用相同文件的打包问题
  • 前端面试题
  • websocket即时通讯
  • 前端专题
NeverStop1024
2022-08-29

以鼠标为中心缩放

scal_IuyIdW

参数说明:

  • zrX:鼠标到原图左边距,
  • zrY:鼠标到原图顶边距,
  • zrX’:鼠标到放大图左边距,
  • zrY’:鼠标到放大图顶边距,
  • mL: 原图左边缘到Frame左边距,
  • mT: 原图上边缘到Frame顶边距,
  • mL’:放大图左边缘到Frame左边距,
  • mT’ : 放大图上边缘到Frame顶边距。

通过上述的两个参数mT和mL也就是图片上边缘到Frame顶边距以及图片的左边到Frame左边距。这道几何题最后要求的就是放大后的mL’以及mT’。

如何求上述的两个值?

首先我们要搞清楚哪些是已知的,哪些是未知的:
在onmousewheel事件的情况下,获取event对象,
zrX:鼠标到原图左边距,event.zrX
zrY:鼠标到原图顶边距,event.zrY

获取图片所在的dom对象img
mL: 原图左边缘到Frame左边距,img.offsetLeft
mT: 原图上边缘到Frame顶边距,img.offsetTop

原图尺寸:img.width和img.height
放大系数:λ(手动输入)
放大图尺寸:img.width’和img.height’

img.width’ = λ · img.width
img.height’ = λ · img.height

以下是未知参数:

zrX’:鼠标到放大图左边距,
zrY’:鼠标到放大图顶边距,
mL’:放大图左边缘到Frame左边距,
mT’ : 放大图上边缘到Frame顶边距。

如何求上述未知参数?

首先通过对比关系得出zrX与zrX’及zrY与zrY’的关系式: 28sk_ZNu8er
其次,通过鼠标对于Frame的相对位置不变的关系建立mL,mL’, mT, mT’的等式: jakk1_PPubjS

最后通过上述等式得出mL’与mT’的表达式,这样就能求出图片缩放后的位置了。

编辑 (opens new window)
上次更新: 2022/08/29
高德地图接入
银行卡号验证

← 高德地图接入 银行卡号验证→

最近更新
01
mock使用
07-12
02
websocket即时通讯
07-12
03
前端面试题
07-09
更多文章>
Theme by Vdoing | Copyright © 2022-2023 NeverStop1024 | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式