JavaScript鼠标拖动绘制方框实现选区

学习编程，与君共勉。
针对JavaScript拖动鼠标绘制方框实现选区的方法，在网上查了很多，但感觉不是写的很繁琐就是感觉很乱，没有一个详细的步骤，这对于我们这些菜鸟来说真的很难理解，所以我写了一份比较简洁，注释详细的代码供大家参考。
先把代码放上来：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box{width: 500px;height: 500px;border: 1px solid black;margin: 20px auto;position: relative;}#box div{border: 1px solid green;position: absolute;}</style><script>window.onload = function () {var oBox = document.getElementById("box");//鼠标按下，获取初始点oBox.onmousedown = function (ev) {ev = window.event || ev;//1.获取按下的点var x1 = ev.clientX - oBox.offsetLeft;var y1 = ev.clientY - oBox.offsetTop;//2.创建divvar oDiv = document.createElement("div");oBox.appendChild(oDiv);oBox.onmousemove = function (ev) {ev = window.event || ev;var x2 = ev.clientX - oBox.offsetLeft;var y2 = ev.clientY - oBox.offsetTop;//3.设置div的样式oDiv.style.left = (x2 > x1 ? x1 : x2) +"px"; oDiv.style.top = (y2 > y1 ? y1 : y2) +"px";oDiv.style.width = Math.abs(x2-x1)+"px";oDiv.style.height =Math.abs(y2-y1)+"px";}return false;  //解除在划动过程中鼠标样式改变的BUG}//在鼠标抬起后终止onmousemove事件document.onmouseup = function () {oBox.onmousemove = null;}}</script>
</head>
<body>
<div id="box"></div>
</body>
</html>

现在开始对代码进行解释：在写代码之前，我们一定要想清楚自己想要干什么，比如说这里，我们的目的是绘制方框；然后下一步我们就要考虑怎么实现，在这里我用一段代码表示：

    var oDiv = document.createElement("div");  //创建divoBox.appendChild(oDiv);     //加入到父元素oDiv.style.left = "100px";    //设置坐标以及宽高oDiv.style.top = "100px";    oDiv.style.width = "100px";oDiv.style.height = "100px";

也就是说我们的最终目的是通过鼠标拖动创建div，然后将它放到父元素中显示，最后设置它的位置和宽高，这样就可以实现目的。
代码中已经有详细的注释，这里就不做赘述，我这里特意说明一下在设置div样式时，加入了反向绘制方块，三目运算符的功能是判断绘制方块的方向，如果 x2>x1,则说明是从上向下绘制，反之从下至上；而Math.abs()则是取绝对值，如果从下往上的话x2小于x1，这里就获取不了宽高。
当然，如果有对client，offset及scroll有疑问的话，建议先去参考下BOM教程。
送给诸位，也是送给自己的一句话:Learn No Stop Forever !

JavaScript鼠标拖动绘制方框实现选区相关推荐

Qt鼠标拖动绘制基本几何图形
概述用Qt鼠标事件实现基本几何图形的绘制,支持直线.矩形.圆形.椭圆.后期可以在此基础上进行扩展. 效果图实现本示例使用QGraphics体系来实现,因为要移动对象,所以生成的图形必须是一个单独 ...
C语言跟随鼠标画方框,JS拖动鼠标画出方框实现鼠标选区的方法
本文实例讲述了JS拖动鼠标画出方框实现鼠标选区的方法.分享给大家供大家参考.具体如下: 相当实用的一个JS技巧,拖动鼠标可画出一个方框,可作为一个选区的功能,可以用来画流程图,设计草图什么的,也可以作 ...
python matplotlib.pyplot 如何实时绘制三维动态窗口？（可鼠标拖动角度）
实时绘制三维图并更新窗口 # -*- coding: utf-8 -*- """ @File : test.py @Time : 2020/5/26 18:09 @Aut ...
【Java AWT 图形界面编程】使用鼠标滚轮缩放 Canvas 画布中绘制的背景图像 ( 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心示例 )
文章目录一.鼠标滚轮缩放的中心点设置为当前鼠标中心点 - 要点分析 1.保存当前鼠标指针指向的位置 2.根据鼠标指针指向的位置以及比例重新计算图片位置二.绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩 ...
利用javascript和WebGL绘制地球【翻译】
利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个AP ...
html 圆圈透明其他不透明,Javascript HTML5 Canvas绘制透明圆圈
我需要有一个函数在画布上绘制几个圆圈,从mousedown at center = x,y开始,并将鼠标拖动到deltaX,deltaY,从而为每个圆圈创建半径r.圆圈无法填充(需要它们透明),因此用 ...
C# 创建一个Panel并可以通过鼠标拖动并可以拉动改变大小（可生成多个Panel并保存布局到数据库中）
C# 创建一个Panel并可以通过鼠标拖动并可以拉动改变大小(可生成多个Panel并保存布局到数据库中) 一个用于绘制视频布局的控件,可在背景Panel上生成新的Panel并可以拖动改变位置以及调整大 ...
用鼠标拖动图片的JS代码
代码简介: 用鼠标拖动一个图片移动,就像拖动一个层一样,这是一个JS拖动类代码,你可以无限制的增加图片,代码复用率比较高. 代码内容: View Code <html><HEAD&g ...
Python+turtle交互式绘图：可以用鼠标拖动的小海龟
功能描述:代码运行后,在窗口上显示3个小海龟,使用鼠标拖动小海龟时可以动态改变窗口颜色,如下图所示. 说明:本例代码主体部分来自turtle Demo,我稍微修改了一下,重点增加了注释,方便阅读和理解 ...

JavaScript鼠标拖动绘制方框实现选区

JavaScript鼠标拖动绘制方框实现选区相关推荐

最新文章

热门文章