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>

在这里插入图片描述

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

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

相关文章

14-alert\confirm\prompt\自定义弹窗

一、认识alert\confirm\prompt 下图依次是alert、confirm、prompt&#xff0c;先认清楚长什么样子&#xff0c;以后遇到了就知道如何操作了。 二、alert操作 先用driver.switch_to.alert方法切换到alert弹出框上&#xff1b;可以用text方法获取弹出的文本信息&#xff1b;acce…

Spring Cloud | 客户端 “负载均衡器“ : Ribbon

目录: 1. 什么是 "负载均衡" ? ( 通过 "负载均衡" 可以将 "用户请求" "分发" 到 不同的服务器&#xff0c;以此来提高 "性能" 和 "可靠性" )2. "负载均衡" 的 分类 &#xff1f;3. 认识 Ribbon :3.1 R…

【蓝桥杯国赛】动态规划

“动态规划”在蓝桥杯中的出题类型&#xff0c;主要为两种&#xff0c; 要格外注意&#xff0c;每一次 dp 的迭代更新&#xff0c;都是针对于当前位置下的“所有情况”进行的&#xff0c; 应着眼于当前位置的每一种情况。 类型一&#xff1a;一共有多少种情况&#xff1f; 1…

使用 Apache Commons Exec 自动化脚本执行实现 MySQL 数据库备份

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…

Part 3.1 深度优先搜索

深度优先搜索&#xff08;DFS&#xff09;&#xff0c;即按照深度优先的顺序搜索的算法。 深度优先搜索一般使用栈来实现。 [USACO1.5] 八皇后 Checker Challenge 题目描述 一个如下的 6 6 6 \times 6 66 的跳棋棋盘&#xff0c;有六个棋子被放置在棋盘上&#xff0c;使得…

go解析yaml

go解析yaml文件关键就是结构体的创建 初学go tag字段要和yaml文件中的key对应起来&#xff0c;每个层级都要创建对应的结构体&#xff0c;有点烦 package configimport ("gopkg.in/yaml.v3""os" )type Config struct {MysqlConfig MysqlConfig yaml:&q…

开发nfc读卡器应用出现报错Unhandled Exception: SCARD_E_NO_SERVICE

使用flutter开发ACR122U的nfc读卡器的时候&#xff0c;报错&#xff1a; [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: Exception: Error while establing context. Reason: SCARD_E_NO_SERVICE #0 PCSCBinding._checkAndThrow (package:fl…

Flink实现实时异常登陆监控(两秒内多次登陆失败进行异常行为标记)

Flink实现异常登陆监控&#xff08;两秒内多次登陆失败进行异常行为标记&#xff09; 在大数据处理领域&#xff0c;Apache Flink 是一个流行的开源流处理框架&#xff0c;能够高效处理实时数据流。在这篇博客中&#xff0c;我们将展示如何使用 Apache Flink 从 MySQL 中读取数…

科研数据分析常见问题

许多使用SPSSAU进行初次科研数据分析的同学&#xff0c;可能对数据分析方法的深层原理和研究思路缺乏全面的把握。因此&#xff0c;当导师针对数据研究方法提出具体问题时&#xff0c;他们可能会感到些许困惑或难以立即给出满意的答复。鉴于此&#xff0c;SPSSAU汇总了一些常见…

【工具】创客贴会员|创客贴截止2024年6月所有AI功能效果实测(热门推荐和图片编辑部分)

上一篇&#xff1a;【工具】创客贴会员&#xff5c;万字测评&#xff01;前沿设计网站创客贴的 AI 文生图效果测评 上一篇写的时候只测了文生图&#xff0c;因为百度那边活动没和创客贴接洽好&#xff0c;他们不清楚创客贴的AI和其他会员功能分开了&#xff0c;导致只有10次体…

virtualbox中ubuntu22.04网络配置

第一&#xff1a;添加两个网卡&#xff0c;网卡1是NAT方式&#xff0c;网卡2是仅主机模式&#xff08;两个顺序不能颠倒&#xff09; 第二步&#xff1a;启动ifconfig查看网络

搭载昇腾310NPU的Orange Pi AIpro开箱体验以及深度学习样例测试

Orange Pi AIpro开箱体验以及样例测试 随着人工智能和物联网技术的快速发展&#xff0c;单板计算机&#xff08;Single Board Computer, SBC&#xff09;在创客和开发者社区中越来越受到欢迎。我最近入手了一款高性能的单板计算机——Orange Pi AIpro。 在入手此款AI开发板之…

探索 Ollama: 你的本地 AI 助手

本期推荐的开源项目是 Ollama&#xff0c;它是一款本地大模型运行工具&#xff0c;可以帮助用户轻松下载和运行各种大型语言模型&#xff08;LLM&#xff09;&#xff0c;而无需将数据上传到云端。以下是关于 Ollama 的介绍以及安装和使用教程&#xff1a; Ollama 是什么&#…

VB.net 进行CAD二次开发(二)

利用参考文献2&#xff0c;添加面板 执行treeControl New UCTreeView()时报一个错误&#xff1a; 用户代码未处理 System.ArgumentException HResult-2147024809 Message控件不支持透明的背景色。 SourceSystem.Windows.Forms StackTrace: 在 System.Windows…

Spring事务管理进阶-rollbackFor propagation

黑马程序员JavaWeb开发教程 文章目录 一、rollbackFor二、propagation2.1 事务传播行为2.2 场景 一、rollbackFor 默认情况下&#xff0c;只有初选RuntimeException才会回滚异常。roolbackFor属性用于控制出现何种异常类型&#xff0c;回滚事务。 二、propagation 用来配置事…

网络安全基础技术扫盲篇 — 名词解释之“数据包“

用通俗易懂的话说&#xff1a; 数据包就像是一个信封。当你写信给某个人时&#xff0c;你将内容写在一张纸上&#xff0c;然后将纸叠起来并放入信封中&#xff0c;就形成了一个完整要发送的数据内容。信封上有发件人和收件人的详细地址&#xff0c;还有一些其他必要的信息&…

Java项目:93 springboot学生评奖评优管理系统的设计与实现

作者主页&#xff1a;源码空间codegym 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 本学生评奖评优管理系统有管理员和教师和学生。 管理员功能有个人中心&#xff0c;学生管理&#xff0c;教师管理&#xff0c;院系信息管理&a…

规则引擎Drools,基于mysql实现动态加载部署

文章目录 一、使用1、参考资料2、引包3、创建规则实体类4、实现drools动态规则5、模拟数据库&#xff0c;实现规则的CRUD6、创建控制层7、测试规则的动态添加&#xff08;1&#xff09;添加规则&#xff08;2&#xff09;修改规则&#xff08;3&#xff09;删除规则 8、模拟2个…

蓝桥杯单片机-国赛7——第十四届主观题代码参考

0.编程心得 本题中&#xff0c;要求测距能达到250cm&#xff0c;因此pca必须配置为0x01&#xff0c;但直接用会死机&#xff0c;因此需要使用CH作为判断量。 【iic的at24c02记录】&#xff1a; 读设备地址&#xff1a;0xA1 写设备地址&#xff1a;0xA0 非应答信号&#xff1…

【Linux】Linux基本指令3

目录 1.date指令 2.cal指令 3.find指令&#xff1a;&#xff08;灰常重要&#xff09; -name 4.grep指令——行文本过滤工具 5.zip/unzip指令&#xff1a; 6.tar指令&#xff08;重要&#xff09;&#xff1a;打包/解包&#xff0c;不打开它&#xff0c;直接看内容 7.bc…