js实现 鼠标绘制两个不相交的矩形

最新推荐文章于 2022-03-22 13:35:23 发布
最新推荐文章于 2022-03-22 13:35:23 发布
阅读量407 收藏
点赞数
分类专栏： JavaScript实践 文章标签： 鼠标绘制区域 JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39186346/article/details/80542134
版权

一、效果图


二、功能说明

1.检测、屏蔽、删除三个按钮

页面上检测或者屏蔽框只能绘制一个

点击检测才可以绘制检测区域，点击屏蔽即绘制屏蔽区域，点击删除即删除当前选中的框；


三、代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<meta http-equiv="X-UA-Compatible" content="IE=8,chrome=1" />
<title>js绘制矩形</title>
<style>
	*{margin:0; padding:0;}
	html,body{width: 100%; height: 100%;}
	button{padding: 8px 30px; background: #fff; border: 1px solid #ddd;}
	#checkArea{position:absolute; background:#ccc;}
	#hideArea{position:absolute; background:#ccc;}
	.sel{ margin:30px auto; width:960px; overflow:hidden;}
	.red{background:red; color: #fff;}
	.blue{background:blue; color: #fff;}
	.xz{ width:340px; float:right;}
	.canvas{width: 500px; height: 500px; border: 2px solid #f00; margin-left: 100px; margin-top: 100px;}
</style>
</head>

<body>
	<div class="sel">
    	    <button id="check">检测</button>
    	    <button id="hide">屏蔽</button>
    	    <button id="del">删除</button>
        </div>
	<div id="canvas" class="canvas"></div>
	
<script src="js/jquery-1.11.0.min.js"></script>   
<script>
var redLine = {
	x:0,
	y:0,
	width:0,
	height:0
};
var greenLine = {
	x:0,
	y:0,
	width:0,
	height:0
}
	
function $Id(id){
	return document.getElementById(id);	
}

window.οnlοad=function(){
	var oCanvas=$Id('canvas');
	var color='';//点击按钮的时候  设置
	var xz = "";
	var checkSqu = 0;		//0-未画 1-已经画完
	var hideSqu = 0;		//0-未画 1-已经画完
	
	//选择了区域类型才可以画框
	function testDraw(){
		if(xz){
			if(xz == "hide"){
				color = "#f00";	//屏蔽区域用红色
				if(hideSqu == 0){
					draw();
				}
			}else{
				color = "#0f0";	//检测区域用绿色
				if(checkSqu == 0){
					draw();
				}
			}
		}
	}
	
	function draw(){
		oCanvas.οnmοusedοwn=function(ev){
			console.log("啦啦啦："+oCanvas.offsetLeft);	
			if(xz == "hide"){
				if(!(xz=="hide"&&hideSqu==0)){
					return;
				}
			}else if(xz == "check"){
				if(!(xz=="check"&&checkSqu==0)){
					return;
				}
			}
			if(oCanvas.setCapture){
				oCanvas.setCapture();
			}
			var oEv=ev||window.event;
			var disX=oEv.clientX;
			var disY=oEv.clientY;
			var oR=document.createElement('div');
			oR.id=xz+"Area";
			oR.style.top=disY+'px';
			oR.style.left=disX+'px';
			oR.style.border='1px solid '+color;
			oR.style.backgroundColor='#fff';
			document.body.appendChild(oR);
			
			document.οnmοusemοve=function(ev){
				var oEv=ev||window.event;
				var x=oEv.clientX;
				var y=oEv.clientY;
				
				if(x<oCanvas.offsetLeft){
					x=oCanvas.offsetLeft;	
				}else if(x>oCanvas.offsetLeft+oCanvas.offsetWidth){
					x=oCanvas.offsetLeft+oCanvas.offsetWidth
				}
				
				if(y<oCanvas.offsetTop){
					y=oCanvas.offsetTop;	
				}else if(y>oCanvas.offsetTop+oCanvas.offsetHeight){
					y=oCanvas.offsetTop+oCanvas.offsetHeight
				}
				
				if(xz == "check"){
					console.log("01236");
					//判断是否有检测区域
					if(redLine["x"]){
						if(disY < redLine["y"]){
							if((disX < redLine["x"] && x>redLine["x"])
								|| (disX >redLine["x"]+redLine["width"] && x<redLine["x"]+redLine["width"])
								|| (disX > redLine["x"] && disX <= redLine["x"]+redLine["width"])){
								if(y > redLine["y"]){
									y = redLine["y"];
								}
							}
						}
						if(disY >= redLine["y"] && disY <= (redLine["y"]+redLine["height"])){
							if(disX < redLine["x"] && x > redLine["x"]){
								x = redLine["x"];
							}
							if(disX > redLine["x"] && x<redLine["x"]+redLine["width"]){
								x = redLine["x"]+redLine["width"];
							}
						}
						if(disY > redLine["y"] + redLine["height"]){
							if((disX > redLine["x"] && disX <= redLine["x"]+redLine["width"])
								|| (disX < redLine["x"] && x > redLine["x"])
								|| (disX >redLine["x"]+redLine["width"] && x<redLine["x"]+redLine["width"])){
								if(y < redLine["y"] + redLine["height"]){
									console.log("123");
									y = redLine["y"] + redLine["height"];
								}
							}
						}
					}
				}else{
					//画屏蔽区域，判断检测区域有没有值
					if(greenLine["x"]){
						if(disY < greenLine["y"]){
							if((disX < greenLine["x"] && x>greenLine["x"])
								|| (disX >greenLine["x"]+greenLine["width"] && x<greenLine["x"]+greenLine["width"])
								|| (disX > greenLine["x"] && disX <= greenLine["x"]+greenLine["width"])){
								if(y > greenLine["y"]){
									y = greenLine["y"];
								}
							}
						}
						if(disY >= greenLine["y"] && disY <= (greenLine["y"]+greenLine["height"])){
							if(disX < greenLine["x"] && x > greenLine["x"]){
								x = greenLine["x"];
							}
							if(disX > greenLine["x"] && x<greenLine["x"]+greenLine["width"]){
								x = greenLine["x"]+greenLine["width"];
							}
						}
						if(disY > greenLine["y"] + greenLine["height"]){
							if((disX > greenLine["x"] && disX <= greenLine["x"]+greenLine["width"])
								|| (disX < greenLine["x"] && x > greenLine["x"])
								|| (disX >greenLine["x"]+greenLine["width"] && x<greenLine["x"]+greenLine["width"])){
								if(y < greenLine["y"] + greenLine["height"]){
									y = greenLine["y"] + greenLine["height"];
								}
							}
						}
					}
				}
				
				oR.style.width=Math.abs(x-disX)+'px';
				oR.style.top=Math.min(disY,y)+'px';
				oR.style.left=Math.min(disX,x)+'px';
				oR.style.height=Math.abs(y-disY)+'px';
				
				if(xz == "hide"){
					hideSqu = 1;	//屏蔽区域已经画过
				}else{
					checkSqu = 1;	//检测区域已经画过
				}
				oCanvas.οnmοusedοwn=null;
				
				if(xz == "hide"){
					redLine["x"] = Math.min(disX,x);
					redLine["y"] = Math.min(disY,y);
					redLine["width"] = Math.abs(x-disX);
					redLine["height"] = Math.abs(y-disY);
				}else if(xz == "check"){
					greenLine["x"] = Math.min(disX,x);
					greenLine["y"] = Math.min(disY,y);
					greenLine["width"] = Math.abs(x-disX);
					greenLine["height"] = Math.abs(y-disY);
				}
			}
			document.οnmοuseup=function(ev){
				var oEv=ev||window.event;

				document.οnmοusemοve=null;
				document.οnmοuseοut=null;
				
				if(oCanvas.releaseCapture){
					oCanvas.releaseCapture();
				}	
			}
			return false;
		}
	}
	
	$("#check").click(function(){
		if(! $(this).hasClass("blue")){
			if(xz){
				$("#"+xz).removeClass();
			}
			$(this).addClass("blue");
			xz = "check";
			testDraw();
		}
	})
	
	$("#hide").click(function(){
		if(! $(this).hasClass("red")){
			if(xz){
				$("#"+xz).removeClass();
			}
			$(this).addClass("red");
			xz = "hide";
			testDraw();
		}
	})
	
	$("#del").click(function(){
		if(xz == "check"){
			//删除check的div
			$("#checkArea").remove();
			greenLine["x"] = 0;
			greenLine["y"] = 0;
			greenLine["width"] = 0;
			greenLine["height"] = 0;
			checkSqu = 0;
			testDraw();
		}else if(xz == "hide"){
			//删除hide的div
			$("#"+xz+"Area").remove();
			hideSqu = 0;
			testDraw();
			redLine["x"] = 0;
			redLine["y"] = 0;
			redLine["width"] = 0;
			redLine["height"] = 0;
		}else{
			return;
		}
	})
}	

</script>
</body>
</html>


~~~新手~代码比较冗余~是可以实现效果的~欢迎大家留言~建议~批评~


WindyMorgan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现在图片中画矩形框,并得到对角坐标，设置map中area的样式.zip
05-28
vue实现在图片中画矩形框（JS图片画方块定位坐标）,并得到对角坐标，并拿到对应坐标制作图片热区并设置map中area的样式（图片热区map area的用法）
绘制旋转矩形以及旋转矩形的碰撞检测（基于BCGCBPro）
05-24
当用户停止划线，根据直线的两个端点可确定矩形的基本方向和大小。 3. **矩形倾斜**：根据直线的方向，可以计算出矩形的旋转角度。这需要对直线的斜率进行处理，然后将角度应用于矩形的原点。在BCGCBPro中，可以...
JZ10 -矩形覆盖问题（JS）
qq_43955202的博客
06-30 2193
题目描述：矩形覆盖问题 我们可以用21的小矩形横着或者竖着去覆盖更大的矩形。请问用n个21的小矩形无重叠地覆盖一个2n的大矩形，总共有多少种方法？ 比如n=3时，23的矩形块有3种覆盖方法： 题目解析： 当n = n，可以分为两种情况来讨论， （1）第一次用一个21的小矩形作为第一个格，那么剩下2（n-1）个矩形等待填充。 （2）第一次用一个12的小矩形作为第一个填充的矩形，下面的那个小矩形是必然要进行填充的，那么剩下2（n-2）个小矩形等待填充，所以n = n的情况总的方法为两种情况相加。 .
js 画矩形程序(可以画多个)（按下ctrl或者shift键clear all)
酷酷洋
04-16 256
.rubberBand { position: absolute; visibility: hidden; width: 0px; height: 0px; border: 2px solid red; } .hidden{ display: none; } var IMG; var i = 0; var startX=...
vue3实现鼠标左键拖拽画矩形框框选功能
qq_37656005的博客
03-22 5623
vue3 + eleemetuiPlus 实现鼠标左键拖拽画矩形框 框选列表功能，仿照桌面框选功能 效果如图： vue3鼠标框选 代码： <template> <div class="box-img" @mousedown="handleMouseDown"> <div class="mask" v-show="positionLi
使用JavaScript和DIV实现WebGIS中的鼠标拖动绘制矩形
weixin_30478619的博客
01-11 103
(SHENZHEN, January 11)http://www.handandaily.com使用JavaScript和DIV实现WebGIS中的鼠标拖动绘制矩形,我想大家都知道放大缩小吧!直接拖拉岂可！http://www.handandaily.com/dev/web/a.html 转载于:https://www.cnblogs.com/kaixin110/archive/2008/01/...
鼠标拖动改变容器大小的Jquery插件
dengjianbin的专栏
07-30 262
鼠标拖动改变容器大小的Jquery插件可以灵活设计调整容器高度和宽度的最大值和最小值，只要鼠标移到容器的右下角，鼠标的样式就会变成一个可以调整的状态，此时可以任意拖动鼠标改变容器的大小，用法简单 1、引入插件文件 2、初始化插件代码   效果如下 在线演示和下载请查看： http://www.jq-school.com/Detail.aspx?id=32 ...
矩形块
02-14
p5.play库通常提供了方便的内置碰撞检测函数，可以检测两个矩形是否相交，从而触发相应的反应，如改变颜色、发出声音或改变运动方向。 9. **文件结构**：“RectangleBlocks-main”可能包含项目的源代码文件（如.js...
jquery实现飞机大战小游戏.rar
06-28
可以使用简单的几何算法，如矩形碰撞检测，来判断两个对象是否相交。在jQuery中，你可以用`.each()`遍历所有敌机或子弹，进行检测： ```javascript player.bullets.forEach(function(bullet) { enemies.each...
Html5 Canvas动画基础碰撞检测的实现
12-02
- 碰撞检测的核心是判断两个矩形的边界是否相交。对于两个矩形A和B，不发生碰撞的情况有四种，分别是： - B的下边界在A的上方 - B的左边界在A的右边界右侧 - B的上边界在A的下方 - B的右边界在A的左边界左侧 -...
Vue使用Canvas绘制图片、矩形、线条、文字，下载图片
10-17
主要介绍了Vue使用Canvas绘制图片、矩形、线条、文字，下载图片的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线（包含箭头）
01-09
纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线，外部资源仅需要jquery。有以下功能： 1、创建节点 2、节点随鼠标任意拖动 3、切换拖动和画线模式 4、用鼠标绘制两个节点之间带有箭头的连线 5、连接线随节点移动保持连接状态 6、附带节点鼠标右键弹出自定义菜单代码
JS 绘图(圆形，多边形，线，矩形等等..)
02-29
JS 绘图(圆形，多边形，线，矩形等等..)
canvas鼠标绘制多边形
08-18
使用canvas 鼠标事件绘制多边形，鼠标按下事件，移动事件绘制，双击事件结束绘制。原生js，使用添加事件监听，移除事件监听方法来进行绘制开始和结束。简单小demo
通过鼠标画线,或者多边形
06-13
1.通过鼠标的点击移动画线,支持IE多种版本,已测试IE7-9;其他待测试 2.仅仅需要页面引用一个js即可
space-invader:一个Js写的小游戏，练习标准HTML 5中关于canvas的知识
06-16
游戏中的碰撞检测是判断两个或多个物体是否相交的关键。可以使用矩形碰撞检测（如`rectA.x < rectB.x + rectB.width && rectA.x + rectA.width > rectB.x && rectA.y ...
拖拽矩形
zhangj391的专栏
04-24 235
public MainWindow()         {             InitializeComponent();             onDraw();         }         protected void onDraw()         {             Path myPath = new Path();            
动态创建矩形及拖拽
帐前卒 专栏
08-31 1410
动态的创建矩形直接使用var divs = document.createElement("div");然后使用document.body.appendChild(divs);   如果这句不写是不能显示Div的。还可以为这个变量（div）再进行属性的赋值如：divs.id = 1;//设置iddivs.style.filter = "alpha(opacity=50)";//设置
鼠标画出矩形
weixin_34242819的博客
07-17 85
public partial class ImageLoader : Form { private Point startPoint, endPoint; bool mark = false; Graphics bitG; Bitmap bits; public ImageLoader() {...
用js实现鼠标绘制矩形图
最新发布
06-10
以下是用JavaScript实现鼠标绘制矩形图的示例代码： ```html <!DOCTYPE html> <title>Mouse Drawing #canvas { border: 1px solid #000; } <canvas id="canvas" width="600" height="400"></canvas> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值