• 欢迎访问本网站,技术教程,资源分享,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入东蓬莱!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏东部蓬莱吧

实现canvas画布移动拖拽功能(demo)

前端开发 Jokul 1年前 (2020-07-09) 352次浏览 0个评论 扫描二维码
<!DOCTYPE html>
<html>
    <head>
	<meta charset="utf-8">
	<title>移动canvas</title>
	<style type="text/css">
	      body{margin:20px auto; padding:0; width:1000px }
	      canvas{border:dashed 2px #ccc}
	      span{font-size:16px; cursor:pointer}
	</style>
	<script type="text/javascript">
		// canvas 矩形框集合,用于记录每画出一个矩形框点位坐标
		var rects=[];
		// canvas起始(0,0)坐标在左上角
		// 矩形框参数 x指x轴坐标,y指y轴坐标,width指方形的宽,height指方形的高
		function rectar(x,y,width,height){
			this.x = x;
			this.y = y;
			this.width = width;
			this.height = height;
			this.isSelected = false;
		};
		// 画形 操作是先清除整个画布再根据点位参数画出需要的形状
		function drawRect() {
			// 清除画布,准备绘制
			context.clearRect(0, 0, canvas.width, canvas.height);
			// 遍历所有矩形框
			for(var i=0; i<rects.length; i++) {
				var rect = rects[i];
				// 绘制矩形
				context.strokeStyle="#FF0000";
				// 如果被选中加粗线条
				if (rect.isSelected) {
					context.lineWidth = 30;
				}else {
					context.lineWidth = 10;
				}
				// 画出方形
				context.strokeRect(rect.x,rect.y,rect.width,rect.height,rect.color);
			}
		}
		//创建一个方形(页面中button的点击事件)
		function addRandomRect() {
			var x=50;
			var y=50;
			var width=400;
			var height=200;
			// 创建一个新的矩形对象
			var rect=new rectar(x,y,width,height);
			// 把它保存在数组中
			rects.push(rect);
			// 重新绘制画布
			drawRect();
		}
		// 初始化一些参数
		var SelectedRect;
		var x1;
		var y1;
		var right=false;
		var widthstart,widthend;
		var heightstart,heightend;
		// 点击canvas触发事件
		function canvasClick(e) {
	        // 取得画布上被单击的点
		var clickX = e.pageX - canvas.offsetLeft;
		var clickY = e.pageY - canvas.offsetTop;
			
	        // 查找被单击的矩形框
		for(var i=rects.length-1; i>=0; i--) {
			// 获取数组中方形对象
			var rect = rects[i];
			widthstart=rect.x;
			widthend=rect.x+rect.width;
			heightstart=rect.y;
			heightend=rect.y+rect.height;
			
			// 判断这个点是否在矩形框中
			if ((clickX>=widthstart&&clickX<(widthend-20))&&(clickY>=heightstart)&&(clickY<(heightend-20))) {
				console.log(clickX);
				console.log(clickY);
				// 清除之前选择的矩形框
				if (SelectedRect != null){
					SelectedRect.isSelected = false;
				}
				SelectedRect = rect;
				x1=clickX-SelectedRect.x;
				y1=clickY-SelectedRect.y;
				// 选择新圆圈
				rect.isSelected = true;
				// 使圆圈允许拖拽
				isDragging = true;
				// 更新显示
				drawRect();
				// 停止搜索
				return;
			}else{
				right = true;
				drawRect();
			}
		       // 设置拉伸的界限
		       if (clickX>=(widthend-20)&&((clickX<=(widthend+20)))&&(clickY>=(heightend-20))&&(clickY>=(heightend+20))){
				SelectedRect = rect;
				right=true;
			}
		} 
	}
		// canvas响应事件
		function dragRect(e) {
	                // 判断矩形是否开始拖拽
			if (isDragging == true) {
			// 判断拖拽对象是否存在
				if (SelectedRect != null) {
					// 取得鼠标位置
					var x = e.pageX - canvas.offsetLeft;
					var y = e.pageY - canvas.offsetTop;
					// 将圆圈移动到鼠标位置
					SelectedRect.x= x-x1;
					SelectedRect.y= y-y1;
					// 更新画布
					drawRect();
				}
			}      
			//判断是否开始拉伸
			if (right) {
				//设置拉伸最小的边界
				if ((e.pageX - canvas.offsetLeft-SelectedRect.x)>50) {
					SelectedRect.width=e.pageX - canvas.offsetLeft-SelectedRect.x;
				}else {
					SelectedRect.width=50;
				}
				console.log(SelectedRect.width);
				if((e.pageY - canvas.offsetTop-SelectedRect.y)>50){
					SelectedRect.height=e.pageY - canvas.offsetTop-SelectedRect.y;
				}else {
					SelectedRect.height=50;
				}
				drawRect();
			    }
			}
			 
			var isDragging = false;
			var right = false;
			
			// 停止画
			function stopDragging() {
			   isDragging = false;
			   right=false;
			};
			
			// 页面加载
		    window.onload = function() {
			   canvas = document.getElementById("canvas");
			   context = canvas.getContext("2d");
			   //鼠标按下事件
			   canvas.onmousedown = canvasClick;
			   //鼠标弹起事件
			   canvas.onmouseup = stopDragging;
			   //鼠标移出canvas事件
			   canvas.onmouseout = stopDragging;
			   //鼠标移到指定元素事件
			   canvas.onmousemove =dragRect;
			}
		</script>
	</head>
	<body>
		<canvas id="canvas" width="1000px" height="600px"></canvas>
		<span onclick="addRandomRect();"><mark>画方形</mark></span>
	</body>
</html>

东部蓬莱 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:实现canvas画布移动拖拽功能(demo)
喜欢 (0)
[支付宝]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址