js实现图片以鼠标为中心滚轮缩放-vue

功能背景

  • 实现以鼠标在图中的位置为中心进行图片的滚轮缩放,现在是无论鼠标位置在哪都以图片中心进行缩放,这不符合预期;

关键点

  • 缩放前鼠标在的位置是 A(clinetX,clientY) 点,缩放后鼠标的位置是 A’(x2,y2)点,为了保持鼠标位置不变,需要将A’平移到A, 就需要计算出disx的距离,即偏移量;
  • 绿色代表:缩小后的图片;
  • 黄色代表:原始图片;
    所以需平移+缩放。
    在这里插入图片描述

主要步骤:

  1. 监听图片mousewheel事件 计算scale:
  2. 鼠标滚轮事件event.deltaY< 0 ,滚轮向上滚,放大;
  3. 根据当前scale,preScale,clientx ,clienty,计算出偏移量(disx),用上一次的位置 - 计算出新旧之间的相对偏移量 (disx)= 最新的位置(x,y);
  4. 保存新计算得出的位置,以便后续计算;
  5. 根据上式得出新的scale,x,y进行transform; ​

缩放比例n:

n = w i d t h 1 w i d t h = s c a l e p r e S c a l e n =\frac{width_1}{width}=\frac{scale}{preScale} n=widthwidth1=preScalescale
已知:
w i d t h 1 = n ∗ w i d t h width_1 = n*width width1=nwidth
 ( x 2 − x ′ ) = ( c l i e n t x − x ) n (x_2 - x') = (clientx-x)n (x2x)=(clientxx)n

由图可知:
d i s x = ( w i d t h − w i d t h 1 ) 2 + ( x 2 − x ′ ) − ( c l i e n t x − x ) disx = \frac{(width-width_1)}{2} + (x_2 - x') - (clientx - x) disx=2(widthwidth1)+(x2x)(clientxx)

联立上面两式可得:
d i s x = ( w i d t h − n ∗ w i d t h ) 2 + ( c l i e n t x − x ) n − ( c l i e n t x − x ) disx = \frac{(width-n*width)}{2} +(clientx-x)n - (clientx - x) disx=2(widthnwidth)+(clientxx)n(clientxx)

可简化为:
d i s x = ( 1 − n ) ( w i d t h 2 − c l i e n t x + x ) disx = (1-n)(\frac{width}{2} -clientx+x) disx=(1n)(2widthclientx+x)

y同理可得

handleMousewheel: debounce(function(event) {event.preventDefault();let { deltay,clientX,clienty }=event;const isZoomout = deltaY<0;//小于0放大let scale = this.getNewSacle(this.prescale,isZoomOut);// 计算此次缩放比例this.handleZoomImg(this.scale,this.preScale,clientx,clientY);//根据新,旧比例,鼠标位置 进行图片调整this.preScale = scale;
}
200)methods: {getNewSacle(preScale,isZoomout){if(isZoomout){return preScale*1.1;} else return preScale /1.1;},handleZoomImg(scale,preScale,clientX,clienty) {let {x: oX, y: oY}=this.lastSite;let n =  scale / preScale;let img = this.$refs.image; // 图片domlet { x:x1,y:y1,width, height }=img.getBoundingclientRect();// 带入上面得到的算式, x,y减去偏移量就是新的位置oX-= (1-n)*(width/2-clientX + x1);oY-= (1-n)*(height/2-clientY + y1);this.lastSite={x: oX,y: oY}this.updateDom(resScale, oX, oY);},updateDom(scale,x,y){this.$refs.image.style.transform = `matrix(${scale},,θ,${scale},${x}, ${y})`,}

注意:updateDom方法里,如果使用translate和scale要先写translate再scale

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/403983.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

技术分享-商城篇-订单支付微信篇(十二)

B2C商城微信支付全解析&#xff1a;H5支付、小程序支付、JSAPI支付与APP支付 引言 在之前的文章中&#xff0c;我们聊了B2B2C的商城相关功能模块&#xff0c;如&#xff1a;首页布局、商品、购物车、购物结算、订单支付等&#xff0c;但是B2C商城的订单支付方式的选择&#x…

【Docker】Centos系统没有Vpn时候安装Docker

【Docker】没有Vpn时候安装Docker 背景1.安装docker之前先卸载2.基础配置3.安装docker5. 问题解决6.配置docker镜像源&#xff0c;解决网络超时 背景 工作中习惯VPN或者服务器节点为国外或者香港节点&#xff0c;最近买了一台国内服务器网络受到各种限制。 1.安装docker之前先…

uniapp/vue个性化单选、复选组件

个性化单选和复选组件在网页设计中非常常见&#xff0c;它们不仅能够提升用户界面的美观度&#xff0c;还能改善用户体验。此组件是使用vue uniapp实现的个性化单选复选组件。设计完成后&#xff0c;点击生成源码即可。 拖动组件过设计区 每行显示数量 默认支持每行三个&#…

扎心“我学了六个月 Python,怎么还是会找不到工作”

前言 &#x1f449; 小编已经为大家准备好了完整的代码和完整的Python学习资料&#xff0c;朋友们如果需要可以扫描下方CSDN官方认证二维码或者点击链接免费领取【保证100%免费】 在编程界&#xff0c;Python是一种神奇的存在。有人认为&#xff0c;只有用Python才能优雅写代码…

等保测评中的安全需求分析:构建精准的信息安全防护体系

在数字化转型的时代背景下&#xff0c;信息安全成为企业发展的关键因素之一。等保测评&#xff0c;作为我国信息安全等级保护制度的重要组成部分&#xff0c;要求企业进行详细的安全需求分析&#xff0c;以构建精准、有效的信息安全防护体系。本文旨在探讨等保测评中的安全需求…

ThreeJs学习笔记--坐标系,光源,相机控件

坐标系 一、创建添加坐标系 给场景添加坐标系THREE.AxesHelper()的参数表示坐标系坐标轴线段尺寸大小&#xff0c;你可以根据需要改变尺寸 const axesHelper new THREE.AxesHelper(200)//数值是坐标的尺寸 scene.add(axesHelper)//添加到场景里 坐标系包含三个坐标轴&…

本地ComfyUI安装全记录

资料 先看我写的stable diffusion全记录 ComfyUI 完全入门&#xff1a;安装部署 ComfyUI 完全入门&#xff1a;图生视频 ComfyUI【强烈推荐】 秋葉aaaki comfy UI整合包 可以使用stable diffusion的大模型&#xff0c;通过修改文件重新指向 修改路径即可 下载秋叶大佬的…

python之matplotlib (3 坐标轴设置)

写在前面 在说明坐标轴设置之前&#xff0c;我有必要和大家说清楚图像设置的一些方法&#xff0c;避免陷入困扰模糊的地步。前面我们说过&#xff0c;画图的三种方法&#xff08;python之matplotlib &#xff08;1 介绍及基本用法&#xff09;-CSDN博客&#xff09;。而设置也…

yolov8目标检测与速度估计

我们可能都见过限速路牌。我们中的一些人甚至可能收到过通过邮寄或电子邮件发送的自动限速违规通知。人工智能&#xff08;AI&#xff09;交通管理系统可以利用计算机视觉技术自动标记超速违规行为。路灯和高速公路上的摄像头拍摄的实时画面可用于估算车速和加强道路安全。 车速…

博世(BOSCH)× Milvus:智能驾驶领域的数据挖掘革新

01.博世智能驾控&#xff1a;智能驾驶技术的领航者 博世&#xff08;BOSCH&#xff09;智能驾控是全球汽车技术领域的领导者&#xff0c;以其在自动驾驶技术上的创新和深厚历史而闻名。博世的自动驾驶解决方案&#xff0c;包括先进的驾驶辅助系统&#xff08;ADAS&#xff09;…

【数据结构与算法】归并排序

归并排序目录 一.归并排序的原理二.有序的归并实现三.无序的归并实现(分治法)四.归并排序的实现五.完整代码 一.归并排序的原理 如何将这两个数组排序? 二.有序的归并实现 将一个数组分为两段,那边的值小就加入到新数组中,直到一边已经加完了. 有一种情况就是一边已经加入…

骑行耳机哪个牌子好用?选购骑行耳机需要注意的五大选购陷阱!

作为一名有着多年骑行经验的专业评测师&#xff0c;对骑行装备已经有着超过五年的研究&#xff0c;骑行耳机也不例外&#xff0c;期间也是亲身测试了数十款骨传导耳机&#xff0c;可以说骑行耳机是专为骑行爱好者设计的&#xff0c;不需要入耳佩戴&#xff0c;而且佩戴舒服&…

基于云快充协议1.5-1.6版本的充电桩系统软件-充电桩系统 -新能源车充电平台源码

介绍 SpringBoot 框架&#xff0c;充电桩平台充电桩系统充电平台充电桩互联互通协议云快充协议1.5-1.6协议新能源汽车二轮车公交车二轮车充电-四轮车充电充电源代码充电平台源码Java源码 充电桩平台充电桩系统充电桩小程序充电桩管理系统充电桩项目充电桩协议充电桩微信小程序S…

鸿蒙开发入门day10-组件导航

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;还请三连支持一波哇ヾ(&#xff20;^∇^&#xff20;)ノ&#xff09; 目录 组件导航 (Navigation) 设置页面显示模式 设置标题栏模式 设置菜…

整数分解5.3.2

题 前面写过逆序的 最后一个数后面不要有空格 #include <stdio.h>int main() {int x;scanf("%d",&x);int d;do{dx%10;printf("%d",d);if(x>10){printf(" ");}x/10;}while(x>0);printf("\n");return 0; } 现在这个是…

Linux网络:基于OS的网络架构

Linux网络&#xff1a;OS视角下的网络架构 网络分层模型OSI 七层模型TCP/IP 五层模型 协议操作系统与网络网络相关命令ifconfigpingnetstat 本博客将基于操作系统&#xff0c;讲解计算机网络的设计理念&#xff0c;帮助大家理解操作系统与网络之间的关系。 网络分层模型 网络…

Positional Encoding | 位置编码【详解】

文章目录 1、位置编码的2种方案2、位置编码3、公式详解 &#xff1a; 绝对位置 、 相对位置4、代码4.1 代码14.2 代码2 1、位置编码的2种方案 transformer的作者刚开始说固定的位置编码和可学习的位置编码的效果是差不多的&#xff0c;后来证明可学习的位置编码没有太大的必要&…

系统工程与信息系统(上)

系统工程 概念 【系统工程】是一种组织管理技术。 【系统工程】是为了最好的实现系统的目的&#xff0c;对系统的组成要素、组织结构、信息流、控制机构进行分析研究的科学方法。 【系统工程】从整体出发、从系统观念出发&#xff0c;以求【整体最优】 【系统工程】利用计算机…

Oracle 12.2集群搭建遇到ORA-ORA-15227,ORA-15031,ORA-15018问题处理

报错&#xff1a; [FATAL] [DBT-30056] Labeling of disks failed. ORA-15227: could not perform label set/clear operation ORA-15031: disk specification /dev/asmdisk/ocr01 matches no disks [FATAL] [DBT-30002] Disk group OCR creation failed. ORA-15018: diskgrou…

(javaweb)SpringBootWeb案例(毕业设计)案例--部门管理

目录 1.准备工作 2.部门管理--查询功能 3.前后端联调 3.部门管理--新增功能 1.准备工作 mapper数据访问层相当于dao层 根据页面原型和需求分析出接口文档--前后端必须遵循这种规范 大部分情况下 接口文档由后端人员来编写 前后端进行交互基于restful风格接口 http的请求方式…