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

Vue 框选区域放大(纯JavaScript实现)

需求:长按鼠标左键框选区域,松开后放大该区域,继续框选继续放大,反向框选恢复原始状态
实现思路:根据鼠标的落点,放大要显示的内容(内层盒子),然后利用水平偏移和垂直偏移,让外层展示的窗口(外层盒子)只看到刚刚框选的大概区域,具体代码如下
<template><div><divclass="selectable_container"@mousedown="handleMouseDown"@mousemove="handleMouseMove"@mouseup="handleMouseUp"><divclass="zoomable_element":style="{userSelect: 'none',left: innerLeft + 'px',top: innerTop + 'px',width: innerWidth + 'px',height: innerHeight + 'px',}"><imgsrc="./img/test1.jpg"style="width: 100%;height: 100%;user-select: none;pointer-events: none;"alt=""/></div><div class="selectable_element" id="selectable_element"></div></div></div>
</template><script>
export default {data() {return {startX: 0,startY: 0,endX: 0,endY: 0,isSelecting: false, //是否正在款选closeFlag: false, //是否退出放大状态offsetinner_left: 0, //外层容器水平偏移offsetinner_top: 0, //外层容器垂直偏移outerWidth: 0, //外层盒子宽度outerHeight: 0, //外层盒子高度zoomRatio: 1,innerWidth: "100%", //内层盒子宽度 初始状态等于外层盒子innerHeight: "100%", //内层盒子高度innerTop: 0, //内层盒子垂直偏移innerLeft: 0, //内层盒子水平偏移selectionLeft: 0, //框选区域水平偏移selectionTop: 0, //框选区域垂直偏移selectionWidth: 0, //框选区域宽度selectionHeight: 0, //框选区域高度,};},mounted() {const dom_mask = window.document.querySelector(".selectable_container");const rect_select = dom_mask.getClientRects()[0];this.offsetinner_left = rect_select.left; //水平偏移this.offsetinner_top = rect_select.top; //垂直偏移this.outerWidth = Math.ceil(rect_select.width);this.outerHeight = Math.ceil(rect_select.height);this.innerWidth = this.outerWidth;this.innerHeight = this.outerHeight;},methods: {handleMouseDown(event) {if (event.button === 0) {// 判断是否为鼠标左键按下this.startX = event.clientX - this.offsetinner_left;this.startY = event.clientY - this.offsetinner_top;this.isSelecting = true;var dom = document.getElementById("selectable_element");if (dom) {dom.style.left = this.startX + "px";dom.style.top = this.startY + "px";}}},handleMouseMove(event) {if (this.isSelecting) {this.closeFlag = false;this.endX = event.clientX - this.offsetinner_left;this.endY = event.clientY - this.offsetinner_top;var selectionLeft, selectionTop, selectionWidth, selectionHeight;selectionWidth = Math.abs(this.endX - this.startX);selectionHeight = Math.abs(this.endY - this.startY);// 右下if (this.endY >= this.startY && this.endX >= this.startX) {selectionLeft = this.startX;selectionTop = this.startY;}// 左下else if (this.endY >= this.startY && this.endX <= this.startX) {selectionLeft = this.endX;selectionTop = this.startY;}// 右上else if (this.endY <= this.startY && this.endX >= this.startX) {selectionLeft = this.startX;selectionTop = this.endY;}// 左上else if (this.endY <= this.startY && this.endX <= this.startX) {selectionLeft = this.endX;selectionTop = this.endY;this.closeFlag = true;}selectionLeft = Math.ceil(selectionLeft);selectionTop = Math.ceil(selectionTop);selectionWidth = Math.ceil(selectionWidth);selectionHeight = Math.ceil(selectionHeight);var dom = document.getElementById("selectable_element");if (dom) {dom.style.left = selectionLeft + "px";dom.style.top = selectionTop + "px";dom.style.width = selectionWidth + "px";dom.style.height = selectionHeight + "px";}this.selectionLeft = 0 - this.innerLeft + selectionLeft;this.selectionTop = 0 - this.innerTop + selectionTop;this.selectionWidth = selectionWidth;this.selectionHeight = selectionHeight;}},handleMouseUp(event) {// 判断是否为鼠标左键松开if (event.button === 0 && this.isSelecting) {// 左上清除if (this.closeFlag) {this.isSelecting = false;this.closeFlag = false;var dom = document.getElementById("selectable_element");if (dom) {dom.style.left = "0px";dom.style.top = "0px";dom.style.width = "0px";dom.style.height = "0px";}this.innerWidth = this.outerWidth;this.innerHeight = this.outerHeight;this.innerLeft = 0;this.innerTop = 0;return;}this.isSelecting = false;this.zoomRatio = Math.min(this.outerWidth / this.selectionWidth,this.outerHeight / this.selectionHeight).toFixed(2);this.zoomRatio = Number(this.zoomRatio);// console.log(this.zoomRatio);var innerWidth = Math.ceil(this.innerWidth * this.zoomRatio);var innerHeight = Math.ceil(this.innerHeight * this.zoomRatio);var innerLeft = 0 - this.selectionLeft * this.zoomRatio;var innerTop = 0 - this.selectionTop * this.zoomRatio;// 居中处理innerLeft =innerLeft +(this.outerWidth - this.selectionWidth * this.zoomRatio) / 2;innerTop =innerTop +(this.outerHeight - this.selectionHeight * this.zoomRatio) / 2;// 补位处理if (innerWidth + innerLeft < this.outerWidth) {// console.log("水平补位");innerLeft = innerLeft + this.outerWidth - (innerWidth + innerLeft);}if (innerHeight + innerTop < this.outerHeight) {// console.log("垂直补位");innerTop = innerTop + this.innerHeight - (innerHeight + innerTop);}this.innerWidth = innerWidth;this.innerHeight = innerHeight;this.innerLeft = innerLeft;this.innerTop = innerTop;var dom = document.getElementById("selectable_element");if (dom) {dom.style.left = "0px";dom.style.top = "0px";dom.style.width = "0px";dom.style.height = "0px";}}},},
};
</script>
<style lang="scss" scoped>
// 外层可视窗口
.selectable_container {position: relative;width: 800px;height: 450px;border: 1px solid #ccc;overflow: hidden;
}
// 框选动作临时盒子
.selectable_element {position: absolute;border: 1px solid red;
}
// 内层内容盒子 需要缩放
.zoomable_element {position: absolute;left: 0;top: 0;
}
</style>

在这里插入图片描述

相关文章:

Vue 框选区域放大(纯JavaScript实现)

需求&#xff1a;长按鼠标左键框选区域&#xff0c;松开后放大该区域&#xff0c;继续框选继续放大&#xff0c;反向框选恢复原始状态 实现思路&#xff1a;根据鼠标的落点&#xff0c;放大要显示的内容&#xff08;内层盒子&#xff09;&#xff0c;然后利用水平偏移和垂直偏…...

C#加密与java 互通

文章目录 前言对方接口签名要求我方对接思路1.RSA 加密2.AES256加密 完整的加密帮助类 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 在我们对接其他公司接口的时候&#xff0c;时常会出现对方使用的开发语言和我方使用的开发语言不同的情况&#xff…...

C#【进阶】特殊语法

特殊语法、值和引用类型 特殊语法 文章目录 特殊语法1、var隐式类型2、设置对象初始值3、设置集合初始值4、匿名类型5、可空类型6、空合并操作符7、内插字符串8、单句逻辑简略写法 值和引用类型1、判断值和引用类型2、语句块3、变量的生命周期4、结构体中的值和引用5、类中的值…...

c语言之向文件读写数据块

c语言需要向文件读写数据块需要用到fread语句和fwrite语句 fread语句的语法格式 fread(butter,size,count,fp) butter&#xff1a;读取的数据存入内存地址 size:读取的字节大小 count:读取数据的个数 fp:读取的文件指针 fwrite语句语法格式 fwrite(butter,size,count,fp…...

6键编程智能照明:编程指南与深度解析

6键编程智能照明&#xff1a;编程指南与深度解析 随着智能家居的普及&#xff0c;智能照明系统逐渐成为现代家庭不可或缺的一部分。而6键编程智能照明&#xff0c;以其高度的灵活性和个性化设置&#xff0c;受到了越来越多消费者的青睐。那么&#xff0c;如何对6键编程智能照明…...

sql server 中的6种约束

一、约束定义 约束是用于定义和实施表的规则和限制&#xff0c;以确保数据的完整性和一致性。 即对一张表中的属性操作进行限制。 二、约束分类 通过定义约束&#xff0c;可以对数据库中的数据进行限制&#xff0c;以下是常见的约束&#xff1a; 1. 主键约束&#xff08;Pr…...

师彼长技以助己(2)产品思维

师彼长技以助己&#xff08;2&#xff09;产品思维 前言 我把产品思维称之为&#xff1a;人生底层的能力以及蹉跎别人还蹉跎自己的能力&#xff0c;前者说明你应该具备良好产品思维原因&#xff0c;后者是你没有好的产品思维去做产品带来的灾难。 人欲即天理 请大家谈谈看到这…...

Redis学习笔记【基础篇】

SQL vs NOSQL SQL&#xff08;Structured Query Language&#xff09;和NoSQL&#xff08;Not Only SQL&#xff09;是两种不同的数据库处理方式&#xff0c;它们在多个维度上有所差异&#xff0c;主要区别包括&#xff1a; 数据结构: SQL&#xff08;关系型数据库&#xff09;…...

【文献阅读】基于模型设计的汽车软件质量属性

参考文献&#xff1a;《基于模型设计满足汽车软件质量和快速交付的挑战》&#xff0c;深向科技在2024年MATLAB XEPO大会的演讲 Tips&#xff1a;KISS原则&#xff0c;全称为“Keep It Simple, Stupid”&#xff0c;直译为“保持简单&#xff0c;愚蠢的人也能懂”...

撸广告赚金币小游戏app开发

在app上投放广告有哪些注意事项&#xff1f; 在app上投放广告需要注意以下几个方面。 首先&#xff0c;要选择合适的广告形式。根据自己的需求和目标受众&#xff0c;选择合适的广告形式&#xff0c;如横幅广告、插屏广告、视频广告等。不同的广告形式适用于不同的场景和目标…...

海外高清短视频:四川京之华锦信息技术公司

海外高清短视频&#xff1a;探索世界的新窗口 在数字化时代的浪潮下&#xff0c;海外高清短视频成为了人们探索世界、了解异国风情的新窗口。四川京之华锦信息技术公司这些短视频以其独特的视角、丰富的内容和高清的画质&#xff0c;吸引了无数观众的目光&#xff0c;让人们足…...

16:00面试,16:08就出来了,问的问题有点变态。。。

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到8月一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40%…...

Android MediaCodec 简明教程(九):使用 MediaCodec 解码到纹理,使用 OpenGL ES 进行处理,并编码为 MP4 文件

系列文章目录 Android MediaCodec 简明教程&#xff08;一&#xff09;&#xff1a;使用 MediaCodecList 查询 Codec 信息&#xff0c;并创建 MediaCodec 编解码器Android MediaCodec 简明教程&#xff08;二&#xff09;&#xff1a;使用 MediaCodecInfo.CodecCapabilities 查…...

Neo4j安装部署及python连接neo4j操作

Neo4j安装部署及python连接neo4j操作 Neo4j安装和环境配置 安装依赖库&#xff1a; sudo apt-get install wget curl nano software-properties-common dirmngr apt-transport-https gnupg gnupg2 ca-certificates lsb-release ubuntu-keyring unzip -y 增加Neo4 GPG key&…...

一维时间序列信号的改进小波降噪方法(MATLAB R2021B)

目前国内外对于小波分析在降噪方面的方法研究中&#xff0c;主要有小波分解与重构法降噪、小波阈值降噪、小波变换模极大值法降噪等三类方法。 (1)小波分解与重构法降噪 早在1988 年&#xff0c;Mallat提出了多分辨率分析的概念&#xff0c;利用小波分析的多分辨率特性进行分…...

Java整合EasyExcel实战——3(上下列相同合并单元格策略)

参考&#xff1a;https://juejin.cn/post/7322156759443095561?searchId202405262043517631094B7CCB463FDA06https://juejin.cn/post/7322156759443095561?searchId202405262043517631094B7CCB463FDA06 准备条件 依赖 <dependency><groupId>com.alibaba</gr…...

dmdts连接kingbase8报错

dmdts连接kingbase报错 环境介绍1 人大金仓jdbc配置2 dmdts 人大金仓jdbc默认配置3 dmdts 修改jdbc配置4 达梦产品学习使用列表 环境介绍 dts版本 使用dmdts连接kingbase金仓数据库报错 无效的URL 对比jdbc连接串,修改配置解决 1 人大金仓jdbc配置 配置URL模版信息等 类名…...

【算法训练 day44 分割等和子集】

目录 一、分割等和子集-LeetCode 416思路实现代码1.二维dp代码2.一维dp代码 问题总结 一、分割等和子集-LeetCode 416 Leecode链接: leetcode 416 文章链接: 代码随想录 视频链接: B站 给你一个 只包含正整数 的 非空 数组 nums 。请你判断是否可以将这个数组分割成两个子集&…...

前端实习记录——git篇(一些问题与相关命令)

1、版本控制 &#xff08;1&#xff09;版本回滚 git log // 查看版本git reset --mixed HEAD^ // 回滚到修改状态&#xff0c;文件内容没有变化git reset --soft HEAD^ // 回滚暂存区&#xff0c;^的个数代表几个版本git reset --hard HEAD^ // 回滚到修改状态&#xff…...

XML Web 服务技术解析:WSDL 与 SOAP 原理、应用案例一览

XML Web服务是一种用于在网络上发布、发现和使用应用程序组件的技术。它基于一系列标准和协议&#xff0c;如WSDL、SOAP、RDF和RSS。下面是一些相关的内容&#xff1a; WSDL&#xff08;Web服务描述语言&#xff09;&#xff1a;用于描述Web服务的基于XML的语言&#xff0c;定义…...

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

代码规范和架构【立芯理论一】(2025.06.08)

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码&#xff1a;HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...

【深度学习新浪潮】什么是credit assignment problem?

Credit Assignment Problem(信用分配问题) 是机器学习,尤其是强化学习(RL)中的核心挑战之一,指的是如何将最终的奖励或惩罚准确地分配给导致该结果的各个中间动作或决策。在序列决策任务中,智能体执行一系列动作后获得一个最终奖励,但每个动作对最终结果的贡献程度往往…...

JS红宝书笔记 - 3.3 变量

要定义变量&#xff0c;可以使用var操作符&#xff0c;后跟变量名 ES实现变量初始化&#xff0c;因此可以同时定义变量并设置它的值 使用var操作符定义的变量会成为包含它的函数的局部变量。 在函数内定义变量时省略var操作符&#xff0c;可以创建一个全局变量 如果需要定义…...