前端的拖拽和缩放(缩放以鼠标为中心)

效果:

拖拽和缩放(缩放以鼠标为中心)

代码具体实现如下:

但是有几个注意点

(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>

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

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

相关文章

动手学深度学习(Pytorch版)代码实践 -卷积神经网络-25使用块的网络VGG

25使用块的网络VGG import torch from torch import nn import liliPytorch as lp import matplotlib.pyplot as plt# 定义VGG块 # num_convs: 卷积层的数量 # in_channels: 输入通道的数量 # out_channels: 输出通道的数量 def vgg_block(num_convs, in_channels, out_channel…

基于Springboot + vue 的抗疫物质管理系统的设计与实现

目录 &#x1f4da; 前言 &#x1f4d1;摘要 &#x1f4d1;系统流程 &#x1f4da; 系统架构设计 &#x1f4da; 数据库设计 &#x1f4da; 系统功能的具体实现 &#x1f4ac; 系统登录注册 系统登录 登录界面 用户添加 &#x1f4ac; 抗疫列表展示模块 区域信息管理 …

Codeforces Round 954 (Div. 3) A B C D

A. X Axis time limit per test: 2 second memory limit per test: 256 megabytes input: standard input output: standard output You are given three points with integer coordinates x 1 x_1 x1​, x 2 x_2 x2​, and x 3 x_3 x3​ on the X X X axis ( 1 ≤ x i ≤ …

MyBatis 源码分析-- SQL请求执行流程( Mapper 接口方法的执行的过程)

前言 前面我们从源码层面梳理了 SqlSessionFactory、SqlSession 的创建过程及 Mapper 获取过程&#xff0c;本篇我们继续分析一下 Mapper 接口方法的执行的过程&#xff0c;也就是 SQL 的执行流程。 Mybatis 相关知识传送门 初识 MyBatis 【MyBatis 核心概念】 MyBatis 源码…

Anaconda3 常用命令及配置

1、Anaconda是什么? 2、conda常用命令 系统环境&#xff1a;windows10 Anaconda版本&#xff1a;Anaconda3-2024.02-1-Windows-x86_64 2.1、虚拟环境管理 1、查看虚拟环境 conda env list conda info -e 2、创建虚拟环境 # 创建名为 pyenv 的虚拟环境 conda create --na…

计算机软件著作权申请流程及费用_快速登记_经验分享收藏级教程

最近需要申请计算机软件著作权&#xff0c;申请流程走了一遍&#xff0c;整理了分享给大家。软件著作权申请流程及费用&#xff0c;软著快速登记、软著材料及问题解答FAQ&#xff0c;阿里云百科阿里云计算机软件著作权登记20天下证&#xff0c;那么如何申请阿里云软件著作权登记…

【杂记-浅谈OSPF协议各要素及功能】

OSPF协议各要素及功能 一、OSPF协议要素1、COST值2、进程号3、路由及路由器类型4、区域及网络类型5、DR和BDR6、STUB和NSSA区域7、邻居状态机 二、OSPF路由协议中各功能1、报文认证2、路由聚合3、缺省路由4、路由过滤5、多进程6、路由计算7、最小生成树 一、OSPF协议要素 1、C…

MTK7628+MT7612 加PA定频数据

1、硬件型号TR726A5G121-DPA PC9.02.0017。如下所示&#xff1a; 2、WIFI5.8 AC模式 42&#xff08;5120MHz&#xff09;信道&#xff0c;80带宽 3、WIFI5.8 AC模式 38&#xff08;5190MHz&#xff09;信道&#xff0c;40带宽 4、WIFI5.8 AC模式 36&#xff08;5180 MHz&…

微信小程序开发必知必会:文件结构和基本配置

一、微信小程序基本文件结构 1. project.config.json&#xff1a;项目的基本配置文件&#xff0c;包括项目名称、appid、项目目录、页面文件夹等。 {"setting": {"urlCheck": false,"es6": true,"postcss": true,"nodeModulesP…

股票分析学习

库&#xff1a; pandas to_datetime:它可以处理各种格式的日期和时间数据&#xff0c;并将其统一转换为 Pandas 可以理解和操作的内部日期时间格式。 matplotlib.pyplot 用户可以轻松地创建各种静态、动态、交互式和 3D 图形。 1. 绘制线图&#xff08;plot()&#xff09; …

FEP耐酸碱耐高温可定制滴瓶60ml透明四氟瓶F46滴加瓶

FEP滴瓶&#xff1a;又叫聚全氟乙丙烯滴瓶&#xff0c;特氟龙滴瓶。广泛应用于痕量分析、超痕量分析、ICP-MS分析、同位素分析等实验。 主要特性如下&#xff1a; 1.耐高低温&#xff1a;使用温度可达-200&#xff5e;205℃&#xff1b; 2.材质为高纯实验级进口TeflonFEP加工…

虚拟机链接不上usb

传输速度慢 记得换一个支持usb3.0的口和支持usb3.0的线

Redis事务功能是通过MULTI、EXEC、DISCARD和WATCH 四个原语实现的

Redis的事务功能允许将多个命令打包在一起&#xff0c;然后一次性地执行。这种机制确保了这些命令要么全部执行&#xff0c;要么全部不执行&#xff0c;从而提供了一种原子性的操作。Redis事务是通过以下四个原语实现的&#xff1a; 1. **MULTI**&#xff1a; - 这个命令用…

C语言从入门到进阶(15万字总结)

前言&#xff1a; 《C语言从入门到进阶》这本书可是作者呕心沥血之作&#xff0c;建议零售价1元&#xff0c;当然这里开个玩笑。 本篇博客可是作者之前写的所有C语言笔记博客的集结&#xff0c;本篇博客不止有知识点&#xff0c;还有一部分代码练习。 有人可能会问&#xff…

【运维项目经历|035】ISCSI存储优化与自动化部署项目

🍁博主简介: 🏅云计算领域优质创作者 🏅2022年CSDN新星计划python赛道第一名 🏅2022年CSDN原力计划优质作者 ​ 🏅阿里云ACE认证高级工程师 ​ 🏅阿里云开发者社区专家博主 💊交流社区:CSDN云计算交流社区欢迎您的加入! 目录 项目名称 项目背景 项目目标 …

运维技术栈总结

文章目录 Linux CommandBasecd/lschmod/chown/chgrpvi/vimscptarsudf Installrpmyumdeb/apt Filtertailgrepawkfindnetstatechotelnetwhereistouch/mkdirgzip/rar/tar Statistics Linux MonitorCPUtophtopsar Memoryfreevmstat I/Oiostatpidstatiotop Networknetstatiftoptcpdu…

Android SurfaceFlinger——图形内存分配器(十一)

前面的文章中的图层合成器&#xff08;HWC&#xff09;&#xff0c;这里我们接着看一下 SurfaceFlinger 中的另一个重要服务——图形内存分配器。 一、简介 android.hardware.graphics.allocator2.0 是 Android 系统中硬件抽象层&#xff08;HAL&#xff09;的一个组件&#x…

认识Retrieval Augmented Generation(RAG)

什么是RAG&#xff1f; Retrieval-Augmented Generation (RAG) 是一种结合信息检索和生成式AI技术的框架。它通过从外部数据源检索信息&#xff0c;增强语言模型&#xff08;如GPT-3&#xff09;的生成能力&#xff0c;从而提供更加准确和相关的回答。 RAG的组成部分 信息检…

解决问题:已通过系统pip安装了相应模块,但是PyCharm中却提示 No module named xxxx

原因&#xff1a;PyCharm会每创建一个项目都会创建一个独立的虚拟python环境venv&#xff0c;而项目会默认使用这个venv环境运行&#xff0c;而这个venv环境是和系统中的python环境独立的&#xff0c;相当系统中安装过的包&#xff0c;这个虚拟环境中没有&#xff0c;而虚拟环境…

【杂记-浅谈OSI参考模型之应用层】

OSI参考模型之应用层 一、应用层概述二、应用层功能三、应用层协议 一、应用层概述 应用层是计算机网络体系结构中的最高层&#xff0c;它直接为用户和应用程序提供服务。在OSI模型中&#xff0c;应用层对应于第7层&#xff0c;而在TCP/IP模型中&#xff0c;它包括了OSI模型中…