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

您所在的位置：网站首页 › canvas图片移动到鼠标点击位置 › canvas实现鼠标拖拽矩形移动改变大小

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

#canvas实现鼠标拖拽矩形移动改变大小| 来源: 网络整理| 查看: 265

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

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

html:

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

js：

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

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

1 // canvas 矩形框集合 2 var rects=[]; 3 function rectar(x,y,width,height){ 4 this.x = x; 5 this.y = y; 6 this.width = width; 7 this.height = height; 8 this.isSelected = false; 9 }；绘制矩形框： 1 function drawRect() { 2 // 清除画布，准备绘制 3 context.clearRect(0, 0, canvas.width, canvas.height); 4 5 // 遍历所有矩形框 6 for(var i=0; i=0; i--) { 15 var rect = rects[i]; 16 17 widthstart=rect.x; 18 widthend=rect.x+rect.width; 19 20 heightstart=rect.y; 21 heightend=rect.y+rect.height; 22 23 // 判断这个点是否在矩形框中 24 if ((clickX>=widthstart&&clickX=heightstart)&&(clickY=(widthend-20))&&(clickY>=(heightend-20))) 46 // { 47 // SelectedRect = rect; 48 // right=true; 49 // } //18-02-01改 if ((clickX>=(widthend-20)&&((clickX=(heightend-20))&&(clickY>=(heightend+20))) { SelectedRect = rect; right=true; } 50 }

51 }

代码中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； ; };

【本文地址】

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

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

今日新闻

推荐新闻