上传图片文件并立即显示到页面使用 javascript实现鼠标拖动画矩形框以及实现固定区域内随意拖动

首先，你要设计好鼠标事件处理方法，主要是鼠标左键点击，左键释放，还有鼠标移动方法
其次，要了解容什么方式，画一个矩形，设计一个方法：DrawRectgle(左上角，右下角），并且要确定当调用这个方法时，要把原来已经画好的矩形清除掉（或者是根据左上，右下坐标，调整矩形的大小，这样的话，就不用清除原有的矩形）

在鼠标左键按下事件中，获取鼠标位置，保存为左上角坐标，设置开始画矩形的一个标志
在鼠标左键弹起事件中，恢复划矩形的标志为false
在鼠标移动事件中，需要判断是否同时还按下了鼠标左键，如果按下了，并且画矩形标志为true,就获取鼠标位置，保存为右下角坐标（针对鼠标向左上移动的场合，要把左上，右下位置交换一下），然后画一个矩形

// css部分
#canvas {
		background-color: #AAAAAA;
		position: relative;
		background-size:100% 100%;
		border: 2px solid blue;
	}
 
#canvas>div {
		border: 2px solid green;
		position: absolute;
		background-color: #eaeaea;
	}
#canvas>div>span {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-family: simsun;
		font-size: 9pt;
	}
 
 
// html部分
<div id="canvas" style="width:850px;height:477px"></div>
 
// js部分
var canvasWidth= 850;
var canvasHeight = 477;
var allDivNum = 1;
CanvasExt = {
		drawRect: function(canvas) {//参数canvas--所画素材框的区域
			var that = this;
 
			// canvas 的矩形框
			var canvasRect = canvas.getBoundingClientRect();
			// 矩形框的左上角坐标
			var canvasLeft = canvasRect.left;
			var canvasTop = canvasRect.top;
			var x = 0;
			var y = 0;
 
			// 鼠标点击按下事件,画图准备
			$(document).on('mousedown', '#canvas', function(e) {
				// 解决修改时已存在素材框等，删除后再新增存在id重复问题
				var date = new Date().getTime();
				var id = "newDiv" + date + parseInt(Math.random()*10);
				
				var divEle = "";
				// x y为鼠标的落点
				x = e.clientX - canvasLeft;
				y = e.clientY - canvasTop;
				
				//创建div
				divEle = document.createElement('div');
				divEle.setAttribute("id", id);
 
				canvas.append(divEle)
				divEle.style.top = y + "px";
				divEle.style.left = x + "px";
				
				// 绑定删除操作
				var menu = new BootstrapMenu('#' + id, {
					actions: [{
						name: '删除展示框',
						onClick: function() {
							del(id);
						}
					}]
				});
				var tx = 0;
				var ty = 0;
				var twidth = 0;
				var theight = 0;
 
				// 添加拖拽操作
				divEle.onmousedown = function(e) {
					e.stopPropagation();// 阻止时间冒泡
					var divEleRect = this.getBoundingClientRect();
					var divEleLeft = e.clientX - divEleRect.left;
					var divEleTop = e.clientY - divEleRect.top;
					
					this.onmousemove = function(e) {
						e.stopPropagation();
						tx = e.clientX - canvasLeft - divEleLeft;
						ty = e.clientY - canvasTop - divEleTop;
						// 重新获取当前对象的宽和高
						twidth = document.getElementById(id).style.width;
						twidth = parseInt(twidth);
						theight = document.getElementById(id).style.height;
						theight = parseInt(theight);
						// 边界检测
						if(tx <= 0) {
							tx = 0;
							this.style.left = 0 + "px";
						} else if(tx + twidth > canvasWidth) {
							tx = canvasWidth - twidth;
							this.style.left = (canvasWidth - twidth) + "px";
						} else {
							this.style.left = tx + "px";
						}
						if(ty <= 0) {
							ty = 0;
							this.style.top = 0 + "px";
						} else if((ty + theight) > canvasHeight) {
							y = canvasHeight - theight;
							this.style.top = (canvasHeight - theight) + "px";
						} else {
							this.style.top = ty + "px";
						}
					}
					this.onmouseup = function(e) {
						var id = $(this).attr("id");
						e.stopPropagation();
						this.onmousemove = null;
					}
				};
 
				//鼠标移动事件，画图
				var width = 0;
				var height = 0;
				canvas.onmousemove = function(e) {
					e.stopPropagation();
					// width height是鼠标移动末尾距鼠标起始位置的差值
					width = e.clientX - canvasLeft - x;
					height = e.clientY - canvasTop - y;
					divEle.style.width = width + "px";
					divEle.style.height = height + "px";
					
					var tw = e.clientX - canvasLeft;
					var th = e.clientY - canvasTop;
					if(tw >= (parseInt(canvasWidth)-7) || th >=             
                             (parseInt(canvasHeight)-7)){ // 比canvas少3px,为了易于判断
						
							allDivNum++;
							divEle.innerHTML = "<span>素材框" + allDivNum + "</span>";
						canvas.onmousemove = null;
						canvas.onmouseup = null;
						return;
					}
				}
				canvas.onmouseup = function(e) {
					if(width < 10 || height < 10) {
						canvas.removeChild(divEle);
					} else {
						allDivNum++;
						divEle.innerHTML = "<span>素材框" + allDivNum + "</span>";
					}
					e.stopPropagation();
					canvas.onmousemove = null;
				}
			});
 
		}
	};
window.onload = function() {
		var canvas = document.getElementById("canvas");
		CanvasExt.drawRect(canvas);
		// 取消默认右击事件
		document.oncontextmenu = function(e) {
			e.preventDefault();
		}
	};

https://blog.csdn.net/qq_40302859/article/details/81945520

代码是会有冗余部分，自己改造一下

右键菜单用到的是BootstrapMenu.min.js

需要下载的可以移步https://download.csdn.net/download/qq_40302859/10620088

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head>
<title>JS实现用鼠标拖动画出矩形框_网页代码站(www.webdm.cn)</title>
<style type="text/css">
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}
html{color:#000;overflow-y:scoll;overflow:-moz-scrollbars-vertical}
.div{position:absolute; border:1px dashed blue; width:0px; height:0px;left:0px; top:0px; overflow:hidden;}
.retc{position:absolute; border:1px solid #CCCCCC; overflow:hidden; background:#EFEFEF}
</style>
</head>
<body>	
</body>
<script language = "javascript">
	var wId = "w";
	var index = 0;
	var startX = 0, startY = 0;
	var flag = false;
	var retcLeft = "0px", retcTop = "0px", retcHeight = "0px", retcWidth = "0px";
	document.onmousedown = function(e){
		flag = true;
		try{
			var evt = window.event || e;
			var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
			var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
			startX = evt.clientX + scrollLeft;
			startY = evt.clientY + scrollTop;
			index++;
			var div = document.createElement("div");
			div.id = wId + index;
			div.className = "div";
			div.style.marginLeft = startX + "px";
			div.style.marginTop = startY + "px";
			document.body.appendChild(div);
		}catch(e){
		//alert(e);
		}
	}
	document.onmouseup = function(){
		try{
			document.body.removeChild($(wId + index));
			var div = document.createElement("div");
			div.className = "retc";
			div.style.marginLeft = retcLeft;
			div.style.marginTop = retcTop;
			div.style.width = retcWidth;
			div.style.height = retcHeight;
			document.body.appendChild(div);
		}catch(e){
			//alert(e);
		}
		flag = false;
	}
	document.onmousemove = function(e){
		if(flag){
			try{
			var evt = window.event || e;
			var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
			var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
			retcLeft = (startX - evt.clientX - scrollLeft > 0 ? evt.clientX + scrollLeft : startX) + "px";
			retcTop = (startY - evt.clientY - scrollTop > 0 ? evt.clientY + scrollTop : startY) + "px";
			retcHeight = Math.abs(startY - evt.clientY - scrollTop) + "px";
			retcWidth = Math.abs(startX - evt.clientX - scrollLeft) + "px";
			$(wId + index).style.marginLeft = retcLeft;
			$(wId + index).style.marginTop = retcTop;
			$(wId + index).style.width = retcWidth;
			$(wId + index).style.height = retcHeight;
			}catch(e){
				//alert(e);
			}	
		}
	}
	var $ = function(id){
		return document.getElementById(id);
	}
</script>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
</html>

canvas实现鼠标拖拽矩形移动改变大小

项目的一个新需求，动态生成矩形框，鼠标点击拖动改变矩形框的位置，并可以调整大小。

之前做过一个小demo,需求类似，但是在canvas内只有一个矩形框，拖动移动，当时记得是用isPointInPath()直接判断鼠标是否点在了矩形框以内。新需求的矩形框个数为n,经过测试，isPointinPath实现过程中有bug，并不能精准定位到具体点击到canvas的某一个矩形框。经过一系列的头脑风暴，才想出了解决办法，才发现原来是最简单的方法，但是在思考的当初就被pass了，见代码：

html:

<body>
  <canvas id="canvas" width="400" height="300">
  </canvas>
</body>

小demo，不做其他修饰，直接写逻辑吧。

js：
第一步，创建一个容器，以保存Canvas内绘制的元素点。Canvas是一种非保留性的绘图界面，即不会记录过去执行的绘图操作，而是保持最终结果（构成图像的彩色像素）。

如果想让Canvas变得具有交互性，比如用户可以选择、拖动画布上的图形。那么我们必须记录绘制的每一个对象，才能在将来灵活的修改并重绘它们，实现交互。

// canvas 矩形框集合
    var rects=[];
     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";
        context.strokeRect(rect.x,rect.y,rect.width,rect.height,rect.color);

        if (rect.isSelected) {
          context.lineWidth = 50;
        }
        else {
          context.lineWidth = 10;
        }
      }
    }

这是一个绘制函数，因为在Canvas的所有操作，全部都是重新绘制的（先清除，在绘制），每次程序刷新画布时，会先使用 clearRect() 方法清除画布上的所有内容。但不用当心这样会造成画布闪烁，即画布上的圆圈一下子全部消失，然后一下子又重新出现。因为Canvas针对这个问题进行了优化，会在所有绘图逻辑执行完毕后才清除或绘制所有内容，保证最终结果的流畅。然后遍历矩形数组 其中的x,y，width,height来画矩形。

*这里我的项目是根据病变位置动态生成的矩形框，每一次生成矩形框，都要把它的位置信息添加到数组中，这里就直接创建矩形框了，可以根据自己需求改造

function addRandomRect() {
     var x=10;
     var y=10;
     var width=100;
     var height=100;
      // 创建一个新的矩形对象
      var rect=new rectar(x,y,width,height);

      // 把它保存在数组中
      rects.push(rect);
      // 重新绘制画布
     drawRect();
 }；

*Canvas点击事件

var SelectedRect;
    var x1;
    var y1;
    var right=false;
    var widthstart,widthend;
    var heightstart,heightend;

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);
          // 清除之前选择的矩形框
          if (SelectedRect != null) SelectedRect.isSelected = false;
          SelectedRect = rect;
          x1=clickX-SelectedRect.x;
          y1=clickY-SelectedRect.y;
          //选择新圆圈
          rect.isSelected = true;

          // 使圆圈允许拖拽
          isDragging = true;

          //更新显示
          drawRect();
          //停止搜索
          return;
        };
        /*
          设置拉伸的界限。
          */
       // if ((clickX>=(widthend-20))&&(clickY>=(heightend-20)))
       // {
       //   SelectedRect = rect;
       //  right=true;
       //  }
          //18-02-01改

            if ((clickX>=(widthend-20)&&((clickX<=(widthend+20)))&&(clickY>=(heightend-20))&&(clickY>=(heightend+20))) 
             {
             SelectedRect = rect;
              right=true; 
              }
  } 
}

代码中23行为判断具体点击哪个元素的语句，其实很简单，当初绕了很久，很简单直接判断鼠标点击点是否在矩形框之内即可，无论是哪个矩形框，只要在矩形框之内，就把当前矩形框设置为点击的矩形框。29行判断鼠标点击点相对于矩形框的位置。42-49行，是鼠标拉伸改变大小的判断，可以设置矩形四个角拉伸，但我认为太复杂了，只保留了右下角拉伸的点击判断，操作更简单一些。

响应事件：

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();
      }
    };

以上就完成了对矩形框的基本操作，然后添加onmouseup的函数和调用函数：

var isDragging = false;
    function stopDragging() {
      isDragging = false;
      right=false;
    }；
   function clearCanvas() {
     // 去除所有矩形
      rects = [];
    // 重新绘制画布.
    drawCircles();
    }

  window.onload = function() {
      canvas = document.getElementById("canvas");
      context = canvas.getContext("2d");
      canvas.onmousedown = canvasClick;
      canvas.onmouseup = stopDragging;
      canvas.onmouseout = stopDragging;
      canvas.onmousemove =dragRect；
; };