【es6】原生js在页面上画矩形及删除的实现方法
画一个矩形,可以选中高亮,删除自己效果的实现,后期会丰富下细节,拖动及拖动调整矩形大小
实现效果

代码实现
class Draw {constructor() {this.x = 0this.y = 0this.disX = 0this.disY = 0this.startX = 0this.startY = 0this.mouseDown = this.mouseDown.bind(this)this.mouseMove = this.mouseMove.bind(this)this.mouseUp = this.mouseUp.bind(this)this.zIndex = 0this.shadowBox = document.createElement('div')this.init()}init() {this.draw()}draw() {window.addEventListener('mousedown', this.mouseDown)}mouseDown(e) {console.log('🚀 ~ Draw ~ mouseDown ~ e:', e)if (e.target.className == 'delete-btn') return// 校验点击的是不是画的的元素if (e.target.className == 'draw-rect') {// 改变边框颜色this.changeBorderColor(e.target)return false} else {this.x = e.clientXthis.y = e.clientYdocument.addEventListener('mousemove', this.mouseMove)document.addEventListener('mouseup', this.mouseUp)}}mouseMove(e) {// 不要选中文字e.preventDefault()// this.disX = e.clientX - this.x// this.disY = e.clientY - this.y// const startX = e.clientX < this.x ? e.clientX : this.x// const startY = e.clientY < this.y ? e.clientY : this.y// this.disX = e.clientX > this.x ? e.clientX - this.x : this.x - e.clientX// this.disY = e.clientY > this.y ? e.clientY - this.y : this.y - e.clientYthis.startX = Math.min(e.clientX, this.x)this.startY = Math.min(e.clientY, this.y)this.disX = Math.abs(e.clientX - this.x)this.disY = Math.abs(e.clientY - this.y)// console.log('🚀 ~ Draw ~ mouseMove ~ e:', this.disX, this.disY)this.drawShadeRect()}mouseUp() {document.removeEventListener('mousemove', this.mouseMove)document.removeEventListener('mouseup', this.mouseUp)this.drawRect()this.shadowBox && this.shadowBox.remove()}drawShadeRect(startX, startY) {// console.log('🚀 ~ Draw ~ drawRect', this)// const div = document.createElement('div')this.shadowBox.style = `width: ${this.disX}px;height: ${this.disY}px;border:1px solid red;background:rgba(94,243,243,.5);position: absolute;left: ${this.startX}px;top: ${this.startY}px;z-index:${this.zIndex++}`document.body.appendChild(this.shadowBox)}drawRect() {const div = document.createElement('div')div.className = 'draw-rect'div.style = `width: ${this.disX}px;height: ${this.disY}px;border:1px solid red;position: absolute;left: ${this.startX}px;top: ${this.startY}px`div.appendChild(this.addDeleteBtn())document.body.appendChild(div)}changeBorderColor(target) {target.style.border = '1px solid blue'}// 动态添加一个删除按钮addDeleteBtn() {const btn = document.createElement('button')btn.innerHTML = '删除'btn.className = 'delete-btn'btn.style = `position: absolute;right: 0px;bottom: -25px`// 绑定事件btn.onclick = function () {this.parentElement.remove()}return btn}
}const d = new Draw()
d.init()
当前高亮

constructor里面新增
this.allRect = []
drawRect() {const div = document.createElement('div')div.className = 'draw-rect'div.style = `width: ${this.disX}px;height: ${this.disY}px;border:1px solid #ccc;position: absolute;left: ${this.startX}px;top: ${this.startY}px`div.appendChild(this.addDeleteBtn())document.body.appendChild(div)// 收集所有的rectthis.allRect.push(div)this.setCurrentBorderColor(div)}
changeBorderColor(target) {console.log('🚀 ~ Draw ~ changeBorderColor ~ target:', target)this.nowMoveTarget = targetthis.setCurrentBorderColor(target)// 改变鼠标指针target.style.cursor = 'move'}
setCurrentBorderColor方法
setCurrentBorderColor(target) {// 改变边框颜色,当前选中的高亮this.allRect.forEach((item) => {if (item != target) {item.style.border = '1px solid #ccc'}})target.style.border = '1px solid blue'
}
添加元素拖动效果

class Draw {constructor() {// ...this.nowMoveTarget = nullthis.mouseDown = this.mouseDown.bind(this)this.mouseMove = this.mouseMove.bind(this)this.mouseUp = this.mouseUp.bind(this)this.handleRectMove = this.handleRectMove.bind(this)this.handleRectUp = this.handleRectUp.bind(this)// ...}mouseDown(e) {console.log('🚀 ~ Draw ~ mouseDown ~ e:', e)if (e.target.className == 'delete-btn') return// 校验点击的是不是画的的元素if (e.target.className == 'draw-rect') {// 改变边框颜色this.changeBorderColor(e.target)this.handleRectDown(e)return false} else {this.x = e.clientXthis.y = e.clientYdocument.addEventListener('mousemove', this.mouseMove)document.addEventListener('mouseup', this.mouseUp)}}mouseUp(e) {document.removeEventListener('mousemove', this.mouseMove)document.removeEventListener('mouseup', this.mouseUp)this.drawRect()this.shadowBox && this.shadowBox.remove()}drawShadeRect(startX, startY) {this.shadowBox.style = `width: ${this.disX}px;height: ${this.disY}px;border:1px solid red;background:rgba(94,243,243,.5);position: absolute;left: ${this.startX}px;top: ${this.startY}px;z-index:${this.zIndex++}`document.body.appendChild(this.shadowBox)}drawRect() {const div = document.createElement('div')div.className = 'draw-rect'div.style = `width: ${this.disX}px;height: ${this.disY}px;border:1px solid #ccc;position: absolute;left: ${this.startX}px;top: ${this.startY}px`div.appendChild(this.addDeleteBtn())document.body.appendChild(div)this.allRect.push(div)this.setCurrentBorderColor(div)}handleRectDown(e) {this.startX = e.clientXthis.startY = e.clientYthis.offsetX = e.clientX - this.nowMoveTarget.offsetLeftthis.offsetY = e.clientY - this.nowMoveTarget.offsetTopconst that = thisdocument.addEventListener('mousemove', this.handleRectMove)document.addEventListener('mouseup', this.handleRectUp)}handleRectMove(e) {this.disX = e.clientX - this.offsetXthis.disY = e.clientY - this.offsetYthis.nowMoveTarget.style.left = `${this.disX}px`this.nowMoveTarget.style.top = `${this.disY}px`}handleRectUp() {const that = thisconsole.log('🚀 ~ Draw ~ handleRectUp ~ that:', that)document.removeEventListener('mousemove', this.handleRectMove)document.removeEventListener('mouseup', this.handleRectUp)}
}const d = new Draw()
d.init()
总结
- 鼠标事件的熟练运动
- 下步会丰富下拖动调整矩形大小的功能
相关文章:
【es6】原生js在页面上画矩形及删除的实现方法
画一个矩形,可以选中高亮,删除自己效果的实现,后期会丰富下细节,拖动及拖动调整矩形大小 实现效果 代码实现 class Draw {constructor() {this.x 0this.y 0this.disX 0this.disY 0this.startX 0this.startY 0this.mouseDo…...
【git实践】分享一个适用于敏捷开发的分支管理策略
文章目录 1. 背景2. 分支管理实践2.1. 敏捷开发中分支管理面临的问题2.2. 分支管理策略2.3. 还需要注意的一些问题 3.总结 1. 背景 在实际的开发工作中,我们往往会面临多任务并行研发,多个环境管理的情况,这种情况下,一个合适的分…...
Redis与MySQL如何保证数据一致性
Redis与MySQL如何保证数据一致性 简单来说 该场景主要发生在读写并发进行时,才会发生数据不一致。 主要流程就是要么先操作缓存,要么先操作Redis,操作也分修改和删除。 一般修改要执行一系列业务代码,所以一般直接删除成本较低…...
基于微信小程序的教室预约系统+LW示例参考
1.项目介绍 功能模块:管理员(学生管理、教师管理、申请管理、设备管理、报修管理等)、普通用户/学生(注册登录、申请预约、退订、报修等)技术选型:SSM、JSP、uniapp等测试环境:idea2024&#x…...
Linux 安装 Git 服务器
一、安装 Git 1. 在 CentOS/RHEL 中使用以下命令: sudo yum update -y # 或者 sudo dnf update -y (在较新的系统中) sudo yum install git -y验证安装:git --version 2. 配置 Git 用户 git config --global user.name "Your Name" git co…...
总结:Yarn资源管理
一、介绍 本文梳理下Yarn的资源分配计算逻辑。 二、配置 - 资源限制 1、配置NodeManager可分配的资源池的总量 <property><name>yarn.nodemanager.resource.memory-mb</name><value>4096</value> </property> 作用对象:节点管理器(No…...
Python学习34天
import random class Game: peo0 rob0 # # def __init__(self,peo,rob): # self.peopeo # self.robrob def Play(self): """ 石头剪刀布游戏,0代表石头,1代见到,2代表石头 …...
深入浅出 WebSocket:构建实时数据大屏的高级实践
简介 请参考下方,学习入门操作 基于 Flask 和 Socket.IO 的 WebSocket 实时数据更新实现 在当今数字化时代,实时性是衡量互联网应用的重要指标之一。无论是股票交易、在线游戏,还是实时监控大屏,WebSocket 已成为实现高效、双向…...
三开关VUE组件
一、使用效果 <template><QqThreeSwitch v-model"value" /><!-- <SqThreeSwitch v-model"value" :options"[test1, test2, test3]"><template #left-action><div style"display: flex"><IconMoon…...
SpringCloud+SpringCloudAlibaba学习笔记
SpringCloud 服务注册中心 eureka ap 高可用 分布式容错 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-netflix-eureka-server</artifactId> </dependency> <dependency><groupId…...
牛客小白月赛105(A~E)
文章目录 A lz的吃饭问题思路code B lz的数字问题思路code C lz的蛋挞问题思路code D lz的染色问题思路code E lz的括号问题思路code 总结 牛客小白月赛105 A lz的吃饭问题 思路 签到题,比较大小即可 code void solve(){int a,b,c,d;cin >> a >> b…...
OSPF协议整理
OSPF(Open Shortest Path First)即开放式最短路径优先协议,是一种广泛应用于大型网络中的链路状态路由协议。 OSPF 的基本概念 OSPF 是基于链路状态算法的内部网关协议(IGP),用于在一个自治系统ÿ…...
Java中的多线程
文章目录 Java中的多线程一、引言二、多线程的创建和启动1、继承Thread类2、实现Runnable接口 三、线程的常用方法1、currentThread()和getName()2、sleep()和yield()3、join() 四、线程优先级五、使用示例六、总结 Java中的多线程 一、引言 在Java中,多线程编程是…...
什么是聚簇索引、非聚簇索引、回表查询
其实聚集索引也叫聚簇索引,二级索引也叫非聚簇索引,大家不要认为这是不同的两个知识点。 定义 先看一下数据库的索引介绍。 聚簇索引 1. 如果存在主键(一般都存在),主键索引就是聚簇索引。 2. 如果不存在,…...
探索 Spring 框架核心组件:构建强大 Java 应用的基石
Spring框架作为Java企业级开发的首选框架之一,其强大的功能和灵活的架构深受开发者喜爱。Spring框架的核心组件共同构建了一个高效、可扩展的应用程序开发平台。本文将深入探讨Spring框架的核心组件,揭示它们如何在Spring框架中发挥关键作用。 一、Bean…...
Android 13 Aosp 默认允许应用动态权限
图库 frameworks/base/services/core/java/com/android/server/pm/permission/DefaultPermissionGrantPolicy.java 修改 public void grantDefaultPermissions(int userId) {DelayingPackageManagerCache pm new DelayingPackageManagerCache();grantPermissionsToSysCompon…...
【C++知识总结1】c++第一篇,简单了解一下命名空间是什么
一、C的由来 C语言是一种结构化和模块化的编程语言,它对于处理较小规模的程序非常适用。然而,当面临需要高度抽象和建模的复杂问题,以及规模较大的程序时,C语言就显得不那么合适了。为了应对这种挑战,并在解决软件危机…...
从0开始深度学习(32)——循环神经网络的从零开始实现
本章将从零开始,基于循环神经网络实现字符级语言模型(不是单词级) 首先我们把从0开始深度学习(30)——语言模型和数据集中的load_corpus_time_machine()函数进行引用,用于导入数据: train_iter…...
GitLab使用操作v1.0
1.前置条件 Gitlab 项目地址:http://******/req Gitlab账户信息:例如 001/******自己的分支名称:例如 001-master(注:master只有项目创建者有权限更新,我们只能更新自己分支,然后创建合并请求&…...
cuda conda yolov11 环境搭建
优雅的 yolo v11 标注工具 AutoLabel Conda环境直接识别训练 nvidia-smi 检查CUDA版本 下载nvidia cudnn对应的版本 将cuDNN压缩包内对应的文件复制到本地bin、include、lib的文件夹中 C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v12.6 miniConda快速开始-安装 执行…...
业务系统对接大模型的基础方案:架构设计与关键步骤
业务系统对接大模型:架构设计与关键步骤 在当今数字化转型的浪潮中,大语言模型(LLM)已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中,不仅可以优化用户体验,还能为业务决策提供…...
rknn优化教程(二)
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK,开始写第二篇的内容了。这篇博客主要能写一下: 如何给一些三方库按照xmake方式进行封装,供调用如何按…...
三维GIS开发cesium智慧地铁教程(5)Cesium相机控制
一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点: 路径验证:确保相对路径.…...
基于当前项目通过npm包形式暴露公共组件
1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹,并新增内容 3.创建package文件夹...
Python爬虫(一):爬虫伪装
一、网站防爬机制概述 在当今互联网环境中,具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类: 身份验证机制:直接将未经授权的爬虫阻挡在外反爬技术体系:通过各种技术手段增加爬虫获取数据的难度…...
LLM基础1_语言模型如何处理文本
基于GitHub项目:https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken:OpenAI开发的专业"分词器" torch:Facebook开发的强力计算引擎,相当于超级计算器 理解词嵌入:给词语画"…...
Java入门学习详细版(一)
大家好,Java 学习是一个系统学习的过程,核心原则就是“理论 实践 坚持”,并且需循序渐进,不可过于着急,本篇文章推出的这份详细入门学习资料将带大家从零基础开始,逐步掌握 Java 的核心概念和编程技能。 …...
音视频——I2S 协议详解
I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议,专门用于在数字音频设备之间传输数字音频数据。它由飞利浦(Philips)公司开发,以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...
站群服务器的应用场景都有哪些?
站群服务器主要是为了多个网站的托管和管理所设计的,可以通过集中管理和高效资源的分配,来支持多个独立的网站同时运行,让每一个网站都可以分配到独立的IP地址,避免出现IP关联的风险,用户还可以通过控制面板进行管理功…...
Python Einops库:深度学习中的张量操作革命
Einops(爱因斯坦操作库)就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库,用类似自然语言的表达式替代了晦涩的API调用,彻底改变了深度学习工程…...
