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

需求:长按鼠标左键框选区域,松开后放大该区域,继续框选继续放大,反向框选恢复原始状态
实现思路:根据鼠标的落点,放大要显示的内容(内层盒子),然后利用水平偏移和垂直偏移,让外层展示的窗口(外层盒子)只看到刚刚框选的大概区域,具体代码如下
<template>
  <div>
    <div
      class="selectable_container"
      @mousedown="handleMouseDown"
      @mousemove="handleMouseMove"
      @mouseup="handleMouseUp"
    >
      <div
        class="zoomable_element"
        :style="{
          userSelect: 'none',
          left: innerLeft + 'px',
          top: innerTop + 'px',
          width: innerWidth + 'px',
          height: innerHeight + 'px',
        }"
      >
        <img
          src="./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>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ABB码垛机器人IRB260通讯板维修

ABB码垛机器人在现代制造业中发挥着重要作用&#xff0c;而机器人通讯板维修对于确保机器人的正常运行至关重要。 通讯板是ABB码垛机器人与控制系统之间进行数据传输的桥梁。它负责接收控制系统的指令&#xff0c;并将机器人的运行数据反馈给控制系统。如果通讯板出现故障&…

ESP32开发板定义硬串口

ESP32 的默认串口 UART序号Rx PINTx PIN是否可用UART0GPIO3GPIO1是UART1GPIO9GPIO10是&#xff0c; 但与SPI flash相关联需要重新定义UART2GPIO16GPIO17是 下面我们定义2、4GPIO引脚为串口1&#xff1a; #include <HardwareSerial.h> HardwareSerial S1(1); 初始化 …

C语言 | Leetcode C语言题解之第120题三角形最小路径和

题目&#xff1a; 题解&#xff1a; int minimumTotal(int** triangle, int triangleSize, int* triangleColSize) {int f[triangleSize];memset(f, 0, sizeof(f));f[0] triangle[0][0];for (int i 1; i < triangleSize; i) {f[i] f[i - 1] triangle[i][i];for (int j …

【VTKExamples::PolyData】第五十四期 SelectVisiblePoints

很高兴在雪易的CSDN遇见你 VTK技术爱好者 QQ:870202403 公众号:VTK忠粉 前言 本文分享VTK样例SelectVisiblePoints,并解析接口vtkSelectVisiblePoints,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞+关注,小易会继续努力分享,一起进步! 你的点赞就是我的动…

[Linux系统编程]文件IO

一.系统调用 什么是系统调用? 只有系统调用(系统函数)才能进入内核空间&#xff0c;库函数也是调用系统函数&#xff0c;才得以访问底层。 系统调用由操作系统实现并提供给外部应用程序的编程接口。是应用程序同系统之间数据交互的桥梁。 换句话说&#xff0c;系统调用就是操…

yolov5-ros模型结合zed2相机部署在 Ubuntu系统

前言 本篇文章主要讲解yolov5-ros模型结合zed2相机进行实时检测&#xff0c;经改进实现了红绿灯检测&#xff0c;并输出检测类别与置信度&#xff01; 目录 一、环境配置二、zed2驱动安装三、yolov5-ros功能包配置四、运行官方权重文件四、运行自己权重文件 一、环境配置 1、…

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

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

【介绍下运维,什么是运维?】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

C++ | Leetcode C++题解之第120题三角形最小路径和

题目&#xff1a; 题解&#xff1a; class Solution { public:int minimumTotal(vector<vector<int>>& triangle) {int n triangle.size();vector<int> f(n);f[0] triangle[0][0];for (int i 1; i < n; i) {f[i] f[i - 1] triangle[i][i];for (…

RK3588+FPGA+AI高性能边缘计算盒子,应用于视频分析、图像视觉等

搭载RK3588&#xff08;四核 A76四核 A55&#xff09;&#xff0c;CPU主频高达 2.4GHz &#xff0c;提供1MB L2 Cache 和 3MB L3 &#xff0c;Cache提供更强的 CPU运算能力&#xff0c;具备6T AI算力&#xff0c;可扩展至38T算力。 产品规格 系统主控CPURK3588&#xff0c;四核…

【QEMU中文文档】1.1 支持的构建平台

本文由 AI 翻译&#xff08;ChatGPT-4&#xff09;完成&#xff0c;并由作者进行人工校对。如有任何问题或建议&#xff0c;欢迎联系我。联系方式&#xff1a;jelin-shoutlook.com。 原文&#xff1a;Supported build platforms — QEMU documentation QEMU 旨在支持在多个主机…

Webrtc支持HEVC之FFMPEG支持HEVC编解码(一)

一、前言 Webrtc使用的FFMPEG(webrtc\src\third_party\ffmpeg)和官方的不太一样,使用GN编译,各个平台使用了不一样的配置文件 以Windows为例,Chrome浏览器也类似 二、修改配置文件 windows:chromium\config\Chrome\win\x64 其他平台: chromium\config\Chrome\YOUR_SYS…

Dynamics 365:安全的客户参与应用程序

客户参与应用程序使用Microsoft Dataverse提供了一个丰富的安全模型&#xff0c;可以适应许多业务场景。本节为您提供了应考虑的安全措施的特定于产品的指导。 Dataverse安全模型有以下目标&#xff1a; 只允许用户访问他们工作所需的信息。按角色对用户进行分组&#xff0c;并…

Sping源码(九)—— Bean的初始化(非懒加载)— FactoryBean

FactoryBean 先来介绍一下FactoryBean是什么。以及BeanFactory和FactoryBean的区别。 举个栗子&#xff1a; MyFactoryBean.class public class MyFactoryBean implements FactoryBean<User> {Overridepublic User getObject() throws Exception {return new User(&qu…

CAPL如何发送一条UDP报文

UDP作为传输层协议,本身并不具有可靠性传输特点,所以不需要建立连接通道,可以直接发送数据。当然,前提是需要知道对方的通信端点,也就是IP地址和端口号。 端口号是传输层协议中最显著的特征,传输层根据它来确定上层绑定的应用程序,以达到把数据交给上层应用处理的目的。…

五种主流数据库:常用数据类型

在设计数据库的表结构时&#xff0c;我们需要明确表中包含哪些字段以及字段的数据类型。字段的数据类型定义了该字段能够存储的数据种类以及支持的操作。 本文将会介绍五种主流数据库中常用的数据类型以及如何选择合适的数据类型&#xff0c;包括 MySQL、Oracle、SQL Server、…

基于Springboot + vue实现的文化民俗网站

作者主页&#xff1a;Java码库 主营内容&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。 收藏点赞不迷路 关注作者有好处 文末获取源码 技术选型 【后端】&#xff1a;Java 【框架】&#xff1a;spring…

uni-app的网络请求库封装及使用(同时支持微信小程序)

其实uni-app中内置的uni.request()已经很强大了&#xff0c;简单且好用。为了让其更好用&#xff0c;同时支持拦截器&#xff0c;支持Promise 写法&#xff0c;特对其进行封装。同时支持H5和小程序环境&#xff0c;更好用啦。文中给出使用示例&#xff0c;可以看到使用变得如此…

安卓Zygote进程详解

目录 一、概述二、Zygote如何被启动的&#xff1f;2.1 init.zygote64_32.rc2.2 Zygote进程在什么时候会被重启2.3 Zygote 启动后做了什么2.4 Zygote启动相关主要函数 三、Zygote进程启动源码分析3.1 Nativate-C世界的Zygote启动要代码调用流程3.1.1 [app_main.cpp] main()3.1.2…

11- Redis 中的 SDS 数据结构

字符串在 Redis 中是很常用的&#xff0c;键值对中的键是字符串类型&#xff0c;值有时也是字符串类型。 Redis 是用 C 语言实现的&#xff0c;但是它没有直接使用 C 语言的 char* 字符数组来实现字符串&#xff0c;而是自己封装了一个名为简单动态字符串&#xff08;simple d…