图片鼠标中心滚轮放大

news2025/2/28 19:42:18

功能背景

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

关键点

  • 缩放前鼠标在的位置是 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; // 图片dom
		let { 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.coloradmin.cn/o/2040267.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

驱动基础开发

1、字符设备传统开发模板 字符设备驱动框架&#xff0c;首先我们需要去用module_init这个宏去修饰整个驱动的入口函数&#xff0c;用module_exit去修饰整个驱动的出口函数&#xff0c;然后还需要用MODULE_LICENSE用于声明模块的许可证类型。 在入口函数里面我们需要注册字符设…

mitmdump 实时抓包处理

mitmdump 是 mitmproxy 的命令行接口&#xff0c;可以对接 Python 脚本处理请求和响应&#xff0c;这是比 Fiddler , Charles 等工具更加方便的地方&#xff0c;有了它&#xff0c;我们不用再手动抓取和分析HTTP 请求和响应&#xff0c;只要写好请求和响应的处理逻辑就好了。 …

jenkins jdk8下载

jdk8 对应的 jenkins版本是2.346.1 http://updates.jenkins-ci.org/download/war/2.346.1/jenkins.warjenkins和jdk安装教程(安装支持jdk8的最新版本) https://blog.csdn.net/u013078871/article/details/127200623刚买的腾讯云安装jenkins步骤&#xff0c;服务器安装jenkins步…

基于华为atlas的皮带跑偏、空载、堆煤、启停探索

生乎吾前&#xff0c;其闻道也固先乎吾&#xff0c;吾从而师之&#xff1b;生乎吾后&#xff0c;其闻道也亦先乎吾&#xff0c;吾从而师之。吾师道也&#xff0c;夫庸知其年之先后生于吾乎&#xff1f;是故无贵无贱&#xff0c;无长无少&#xff0c;道之所存&#xff0c;师之所…

超详细!!!electron-vite-vue开发桌面应用之配置路由router(五)

云风网 云风笔记 云风知识库 一、安装依赖 npm install vue-router二、配置项目文件路径 三、配置路由router 在src下新建一个router目录&#xff0c;然后在里面添加一个index.ts文件&#xff0c;在里面配置路由 import { createRouter, createWebHashHistory } from vue-…

针对thinkphp站点的漏洞挖掘和经验分享

0x1 前言 浅谈 目前在学习和研究thinkphp相关漏洞的打法&#xff0c;然后最近对于thinkphp资产的收集方面有了一个简单的认识&#xff0c;然后写一篇新手看的thinkphp相关的漏洞收集和挖掘的文章来分享下。然后后面是给师傅们分享下后台文件上传&#xff0c;然后直接打一个ge…

RCE-eval长度限制绕过技巧

目录 限制16字符 题目源码 方法一&#xff1a;$_GET[1] 方法二&#xff1a;file_put_contents 方法三&#xff1a;usort(…$_GET); 限制7字符 题目源码 限制16字符 题目源码 <?php $param $_REQUEST[param]; If ( strlen($param) < 17 && stripos($param…

微服务系列:Spring Cloud 之 Feign、Ribbon、Hystrix 三者超时时间配置

Feign 自身有超时时间配置 Feign 默认集成的 Ribbon 中也有超时时间配置 假如我们又使用了 Hystrix 来实现熔断降级&#xff0c;Hystrix 自身也有一个超时时间配置 注: spring-cloud-starter-openfeign 低一点的版本中默认集成的有 Hystrix&#xff0c;高版本中又移除了。 …

Gin框架接入Prometheus,grafana辅助pprof检测内存泄露

prometheus与grafana的安装 grom接入Prometheus,grafana-CSDN博客 Prometheus 动态加载 我们想给Prometheus新增监听任务新增ginapp项目只需要在原来的配置文件下面新增ginapp相关metric 在docker compose文件下面新增 执行 docker-compose up -d curl -X POST http://lo…

C++ 设计模式——模板方法模式

模板方法模式 模板方法模式逐步重构并引入模板方法模式初始实现提取共性并引入模板方法模式实现具体类 完整代码示例模板方法模式的 UML 图UML 图详细介绍 模板方法模式适用于以下场景 模板方法模式 模板方法模式是一种行为设计模式&#xff0c;它定义了一个算法的骨架&#x…

C++11代码实战经典—MySQL数据库连接池

课程总目录 文章目录 一、项目介绍1.1 关键技术点1.2 项目背景1.3 连接池功能点介绍1.4 MySQL Server参数介绍1.5 项目功能点设计和技术细节 二、MySQL数据库编程三、项目代码逐步实现3.1 连接池单例模式实现3.2 实现加载配置项3.3 连接池的构造函数3.4 实现生产者3.5 实现消费…

其他浏览器正常,火狐浏览器ui-grid换行问题

ui-grid火狐浏览器兼容性问题 ui-grid表格插件问题描述解决方案 ui-grid表格插件 火狐浏览器 UI-grid 兼容性问题 其他如Edge、谷歌、360浏览器正常情况下 火狐浏览器 问题描述 如上图一和图二显示&#xff0c;UI-gird在火狐换行了&#xff1a;从图片来看&#xff1b;后面…

【车载开发系列】ASPICE标准实践---使用Drome系统保证一致性

【车载开发系列】ASPICE标准实践—使用Drome系统保证一致性 【车载开发系列】ASPICE标准实践---使用Drome系统保证一致性 【车载开发系列】ASPICE标准实践---使用Drome系统保证一致性一、一致性的目的二、ASPICE标准三、ASPICE标准实施难点四、保证一致性的实践1. 参与评审2. 可…

ES6-ES13学习笔记

目录 初识ES6 变量声明 解构赋值 对象解构 ​编辑 数组解构 ​编辑模版字符串 字符串扩展 includes() repeat() startsWith() endsWith() 数值扩展 二进制和八进制表示法 &#xff08;Number.&#xff09;isFinite()与isNaN() Number.isInteger() Math.trunc …

vue前端可以完整的显示编辑子级部门,用户管理可以为用户分配角色和部门?

用户和角色是一对多的关系用户和部门是多对多得关系<template><div class="s"><!-- 操作按钮 --><div class="shang"><el-input v-model="searchText" placeholder="请输入搜索关键词" style="width:…

上海凯泉泵业入职测评北森题库题型分析、备考题库、高分攻略

上海凯泉泵业&#xff08;集团&#xff09;有限公司是一家大型综合性泵业公司&#xff0c;专注于设计、生产、销售泵、给水设备及其控制设备。作为中国泵行业的领军企业&#xff0c;凯泉集团拥有7家企业和5个工业园区&#xff0c;总资产达到25亿元&#xff0c;生产性建筑面积35…

Python 在PDF中添加条形码、二维码

在PDF中添加条码是一个常见需求&#xff0c;特别是在需要自动化处理、跟踪或检索PDF文件时。作为一种机器可读的标识符&#xff0c;PDF中的条码可以包含各种类型的信息&#xff0c;如文档的唯一标识、版本号、日期等。以下是一篇关于如何使用Python在PDF中添加条形码或二维码的…

Linux 【进程替换】详细讲解

替换原理 进程是由PCB和内核数据结构以及进程的代码和数据形成 用 fork 创建子进程后执行的是和父进程相同的程序 ( 但有可能执行不同的代码分支 ), 子进程往往要调用一种 exec 函数来进行进程替换 ,对子进程进行替换由于原先子进程与父进程使用的是同一物理内存空间&#xff0…

前端 JavaScript 的 _ 语法是个什么鬼?

前言 我们有时候会看这样的前端代码&#xff1a; const doubled _.map(numbers, function(num) { return num * 2; });刚接触前端的童鞋可能会有点惊奇&#xff0c;不知道这个 _ 是什么语法&#xff0c;为什么这么神通广大&#xff1f; 其实 _ 是 Lodash 或 Underscore.js …

Django Project | 云笔记练习项目

文章目录 功能整体架构流程搭建平台环境子功能先创建用户表 并同步到数据库1.用户注册密码存储 -- 哈希算法唯一索引引发的重复问题 try登陆状态保持 -- 详细看用户登录状态 2. 用户登录会话状态时间 cookie用户登录状态校验 3. 网站首页4.退出登录5.笔记模块 列表页添加笔记 …