当前位置： 首页 > news >正文

前端的拖拽和缩放（缩放以鼠标为中心）

news 2026/2/9 13:21:56

效果：

拖拽和缩放（缩放以鼠标为中心）

代码具体实现如下：

但是有几个注意点

（1）为什么需要设置 transform-origin: 0 0;

缩放时以鼠标为中心进行缩放。这意味着需要手动计算缩放过程中元素的位移，以确保缩放是以鼠标为中心的。如果不设置 transform-origin，缩放和位移的计算将变得更加复杂。

设置 transform-origin: 0 0; 后，所有的位移和缩放都是基于左上角进行的，这使得计算变换的位移量更加直观和简单。只需要考虑从左上角开始的平移和缩放，而不需要考虑元素的中心点。

如果不设置 transform-origin: 0 0;，在缩放和位移时需要考虑变换原点的位置，这会增加计算的复杂性。

（2）关于代码中的(scale / prevScale - 1)

在缩放过程中需要计算新的平移值，使得缩放以鼠标为中心。(scale / prevScale - 1) 计算出相对于原始缩放比例的变化量。

例如，如果 scale 增加了10%，那么 scale / prevScale 会是1.1，减去1后得到0.1，表示增加的10%。

offsetX * (scale / prevScale - 1) 计算出由于缩放而导致的水平偏移量。类似地，offsetY * (scale / prevScale - 1) 计算出由于缩放而导致的垂直偏移量。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>移动和缩放容器</title><style>body {margin: 0;height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #f0f0f0;overflow: hidden;}#container {width: 200px;height: 200px;background-color: #4caf50;cursor: grab;user-select: none;transform-origin: 0 0; /* 设置原点为左上角 */}</style></head><body><div id="container">ABC</div><script>const container = document.getElementById("container");let isDragging = false;let startX, startY, initialX, initialY;let scale = 1;let translateX = 0,translateY = 0;container.addEventListener("mousedown", (e) => {isDragging = true;startX = e.clientX;startY = e.clientY;initialX = translateX;initialY = translateY;container.style.cursor = "grabbing";});document.addEventListener("mousemove", (e) => {if (isDragging) {const dx = e.clientX - startX;const dy = e.clientY - startY;translateX = initialX + dx;translateY = initialY + dy;container.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;}});document.addEventListener("mouseup", () => {isDragging = false;container.style.cursor = "grab";});container.addEventListener("wheel", (e) => {e.preventDefault();const minScale = 0.5;const maxScale = 3;const rect = container.getBoundingClientRect();const offsetX = e.clientX - rect.left;const offsetY = e.clientY - rect.top;const prevScale = scale;const delta = e.deltaY || e.detail || e.wheelDelta;// console.log(delta, "delta");scale += delta * -0.01;scale = Math.min(Math.max(minScale, scale), maxScale);const newX = offsetX * (scale / prevScale - 1);const newY = offsetY * (scale / prevScale - 1);console.log(newX);translateX -= newX;translateY -= newY;container.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;});</script></body>
</html>

相关文章：

前端的拖拽和缩放（缩放以鼠标为中心）

效果&#xff1a; 拖拽和缩放&#xff08;缩放以鼠标为中心&#xff09; 代码具体实现如下&#xff1a; 但是有几个注意点 &#xff08;1&#xff09;为什么需要设置 transform-origin: 0 0; 缩放时以鼠标为中心进行缩放。这意味着需要手动计算缩放过程中元素的位移&#…...

编程日记 2024/6/30 17:46:15

【Vue】单向和双向数据绑定

在 Vue.js 中&#xff0c;数据绑定可以分为单向数据绑定和双向数据绑定两种类型。 单向数据绑定 单向数据绑定是指数据从模型流向视图&#xff0c;即数据的变化会自动反映到视图中&#xff0c;但视图中的变化不会自动反映回模型。Vue.js 中的单向数据绑定主要通过以下方式实现…...

编程日记 2024/6/30 17:45:14

HDFS学习

3.5 HDFS存储原理 3.5.1 冗余数据保存 作为一个分布式文件系统&#xff0c;为了保证系统的容错性和可用性&#xff0c;HDFS采用了多副本方式对数据进行冗余存储&#xff0c;通常一个数据块的多个副本会被分布到不同的数据节点上。 如图所示&#xff0c;数据块1被分别存放到…...

编程日记 2024/6/30 17:44:13

Winform使用HttpClient调用WebApi的基本用法

Winform程序调用WebApi的方式有很多&#xff0c;本文学习并记录采用HttpClient调用基于GET、POST请求的WebApi的基本方式。WebApi使用之前编写的检索环境检测数据的接口&#xff0c;如下图所示。 调用基于GET请求的无参数WebApi 创建HttpClient实例后调用GetStringAsync函数获…...

编程日记 2024/6/30 17:40:10

python–基础篇–正则表达式–是什么

文章目录 定义一&#xff1a;正则表达式就是记录文本规则的代码定义一&#xff1a;正则表达式是一个特殊的字符序列&#xff0c;用于判断一个字符串是否与我们所设定的字符序列是否匹配&#xff0c;也就是说检查一个字符串是否与某种模式匹配。初识 Python 正则表达式 定义一&a…...

编程日记 2024/6/30 17:38:07

15 个适用于企业的生成式 AI 用例

作者&#xff1a;来自 Elastic Jennifer Klinger 关于生成式人工智能及其能做什么&#xff08;和不能做什么&#xff09;有很多讨论。生成式人工智能&#xff08;例如大型语言模型 - LLMs&#xff09;利用从大量训练数据中学习到的模式和结构来创建原创内容&#xff0c;而无需存…...

编程日记 2024/6/30 17:33:03

若依框架中组件使用教程

...

编程日记 2024/6/30 17:28:59

秋招力扣刷题——数据流的中位数

一、题目要求 中位数是有序整数列表中的中间值。如果列表的大小是偶数&#xff0c;则没有中间值&#xff0c;中位数是两个中间值的平均值。 例如 arr [2,3,4] 的中位数是 3 。 例如 arr [2,3] 的中位数是 (2 3) / 2 2.5 。 实现 MedianFinder 类: MedianFinder() 初始化 …...

编程日记 2024/6/30 17:27:58

51单片机学习——LED功能一系列实现

目录 一、开发前准备 二、点亮LED 三、LED闪烁 四、LED流水灯 五、LED流水灯plus 一、开发前准备 开发工具软件 烧录软件 其次还需要一块51单片机学习开发板及原理图 keil创造project文件及开启生成.hex文件 二、点亮LED 看二位进制对照原理图&#xff1b; #include <…...

编程日记 2024/6/30 17:24:55

互联网大厂核心知识总结PDF资料

我们要敢于追求卓越&#xff0c;也能承认自己平庸&#xff0c;不要低估3&#xff0c;5&#xff0c;10年沉淀的威力 hi 大家好&#xff0c;我是大师兄&#xff0c;大厂工作特点是需要多方面的知识和技能。这种学习和积累一般人需要一段的时间&#xff0c;不太可能一蹴而就&…...

编程日记 2024/6/30 17:21:52

设计模式-状态模式和策略模式

1.状态模式 1.1定义 当一个对象的内在状态改变时允许根据当前状态作出不同的行为&#xff1b; 1.2 适用场景 (1)一个对象的行为取决于它的状态,并且它必须在运行时根据状态来决定其行为. (2)代码中包含了大量的与状态有关的条件语句,例如:一个操作含有庞大的多分值语句(if…...

编程日记 2024/6/30 17:16:47

Java NIO Buffer概念

针对每一种基本类型的 Buffer &#xff0c;NIO 又根据 Buffer 背后的数据存储内存不同分为了&#xff1a;HeapBuffer&#xff0c;DirectBuffer&#xff0c;MappedBuffer。 HeapBuffer 顾名思义它背后的存储内存是在 JVM 堆中分配&#xff0c;在堆中分配一个数组用来存放 Buffe…...

编程日记 2024/6/30 17:14:45

Kubernetes在Java应用部署中的最佳实践

Kubernetes在Java应用部署中的最佳实践 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将探讨如何在Java应用程序中使用Kubernetes进行最佳部署实践。K…...

编程日记 2024/6/30 17:12:43

IOS Swift 从入门到精通：@escaping 和PreferenceKey

@escaping 在Swift中，@escaping是一个属性关键字，用于标记闭包参数。当一个闭包在函数返回之后才被调用时，这个闭包被称为逃逸闭包（Escaping Closure）。使用@escaping关键字可以告诉Swift编译器，传递给函数的闭包可能会在函数执行完毕后被调用，因此它需要“逃逸”函数的…...

编程日记 2024/6/30 17:09:39

基于PHP技术的校园论坛设计的设计与实现-计算机毕业设计源码08586

摘 要 本项目旨在基于PHP技术设计与实现一个校园论坛系统&#xff0c;以提供一个功能丰富、用户友好的交流平台。该论坛系统将包括用户注册与登录、帖子发布与回复、个人信息管理等基本功能&#xff0c;并结合社交化特点&#xff0c;增强用户之间的互动性。通过利用PHP语言及其…...

编程日记 2024/6/30 17:08:37

开机弹窗缺失OpenCL.dll如何解决？分享5种靠谱的解决方法

在电脑使用过程中&#xff0c;我们可能会遇到一些错误提示&#xff0c;其中之一就是“开机提示找不到OpenCL.dll”。那么&#xff0c;这个错误提示到底是怎么回事呢&#xff1f;它又对电脑有什么影响&#xff1f;我们又该如何解决这个问题并预防OpenCL.dll再次丢失呢&#xff1…...

编程日记 2024/6/30 17:07:36

IIS 服务器安装SSL证书

IIS 服务器安装SSL证书 步骤一&#xff1a;准备好 SSL 证书 准备好.pfx 格式的证书文件。 步骤二&#xff1a;安装 SSL 证书 1、打开【开始】菜单&#xff0c;找到【管理工具】&#xff0c;打开【Internet 信息服务&#xff08;IIS&#xff09;管理器】。 2、单击服务器名…...

编程日记 2024/6/30 17:06:35

二叉树第二期：堆的实现与应用

若对树与二叉树的相关概念&#xff0c;不太熟悉的同学&#xff0c;可移置上一期博客 链接&#xff1a;二叉树第一期&#xff1a;树与二叉树的概念-CSDN博客 本博客目标&#xff1a;对二叉树的顺序结构&#xff0c;进行深入且具体的讲解&#xff0c;同时学习二叉树顺序结构的应用…...

编程日记 2024/6/30 17:04:33

python-求出 e 的值

[题目描述] 利用公式 e11/1!1/2!1/3!⋯1/&#x1d45b;!&#xff0c;求 e 的值&#xff0c;要求保留小数点后 10 位。输入&#xff1a; 输入只有一行&#xff0c;该行包含一个整数 n&#xff0c;表示计算 e 时累加到1/n!。输出&#xff1a; 输出只有一行&#xff0c;该行包含计…...

编程日记 2024/6/30 17:03:32

模型微调方法

文章目录 LoRADoRAMoRA 以下部分参考自: https://mp.weixin.qq.com/s/OxYNpXcyHF57OShQC26n4g LoRA LoRA是微软于2021年推出的一种经济型微调模型参数的方法。 它在冻结大部分的模型参数的情况下&#xff0c;仅仅更新额外的部分参数。其性能与全参数微调相似。 LoRA假设微调期间…...

编程日记 2024/6/30 17:02:31

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/10/7 0:32:40

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/12/25 18:22:43

第7篇：中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

编程新知 2025/12/11 0:27:15

Chromium 136 编译指南 Windows篇：depot_tools 配置与源码获取（二）

引言 工欲善其事&#xff0c;必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后&#xff0c;我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集&#xff0c;就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...

编程新知 2026/2/8 22:05:17

十九、【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建 前言准备工作第一部分：回顾 Django 内置的 `User` 模型第二部分：设计并创建 `Role` 和 `UserProfile` 模型第三部分：创建 Serializers第四部分：创建 ViewSets第五部分：注册 API 路由第六部分：后端初步测…...

编程新知 2026/1/9 3:08:54

ubuntu22.04有线网络无法连接，图标也没了

今天突然无法有线网络无法连接任何设备&#xff0c;并且图标都没了 错误案例 往上一顿搜索&#xff0c;试了很多博客都不行&#xff0c;比如 Ubuntu22.04右上角网络图标消失 最后解决的办法 下载网卡驱动&#xff0c;重新安装 操作步骤 查看自己网卡的型号 lspci | gre…...

编程新知 2026/2/6 13:01:28

阿里云Ubuntu 22.04 64位搭建Flask流程（亲测）

cd /home 进入home盘 安装虚拟环境&#xff1a; 1、安装virtualenv pip install virtualenv 2.创建新的虚拟环境&#xff1a; virtualenv myenv 3、激活虚拟环境&#xff08;激活环境可以在当前环境下安装包&#xff09; source myenv/bin/activate 此时&#xff0c;终端…...

编程新知 2026/1/29 20:04:46

如何在Windows本机安装Python并确保与Python.NET兼容

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

编程新知 2026/2/8 0:47:08

一些实用的chrome扩展0x01

简介 浏览器扩展程序有助于自动化任务、查找隐藏的漏洞、隐藏自身痕迹。以下列出了一些必备扩展程序&#xff0c;无论是测试应用程序、搜寻漏洞还是收集情报&#xff0c;它们都能提升工作流程。 FoxyProxy 代理管理工具&#xff0c;此扩展简化了使用代理&#xff08;如 Burp…...

编程新知 2026/2/4 17:28:54

Java 与 MySQL 性能优化：MySQL 慢 SQL 诊断与分析方法详解

文章目录 一、开启慢查询日志&#xff0c;定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志 二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...

编程新知 2026/1/23 0:14:48