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

之前做过一个小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();

13  }；

*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；

; };

canvas实现鼠标拖拽矩形移动改变大小的更多相关文章

JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm 这篇文章主要介绍了JS实现漂亮的窗口 ...
WPF 在image控件用鼠标拖拽出矩形
原文:WPF 在image控件用鼠标拖拽出矩形版权声明:博客已迁移到 http://lindexi.gitee.io 欢迎访问.如果当前博客图片看不到,请到 http://lindexi.gitee ...
2018-11-19-WPF-在image控件用鼠标拖拽出矩形
title author date CreateTime categories WPF 在image控件用鼠标拖拽出矩形 lindexi 2018-11-19 15:35:13 +0800 2018- ...
Java3D读取3DMax模型并实现鼠标拖拽、旋转、滚轮缩放等功能
/**-------------------------------------------------代码区--------------------------------------------- ...
CSharpGL(20)用unProject和Project实现鼠标拖拽图元
CSharpGL(20)用unProject和Project实现鼠标拖拽图元效果图例如,你可以把Big Dipper这个模型拽成下面这个样子. 配合旋转,还可以继续拖拽成这样. 当然,能拖拽的不只 ...
拼图 canvas分割 dom拖拽 pc 移动端
参考:Canvas drag 实现拖拽拼图小游戏参考的案例,不支持手机端.总结下实现过程中遇到的小坑. gitHub:https://github.com/WppFrontEnd/puzzle 大概 ...
JavaScript鼠标拖拽特效及相关问题总结
#div1{width:200px;height:200px;background:red;position:absolute;} #div2{width:200px;height:200px;bac ...
一款基于jQuery的支持鼠标拖拽滑动焦点图
记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...
【狼】unity 鼠标拖拽物体实现任意角度自旋转
主要涉及函数 Input.GetAxis(“Mouse x”) 可取得鼠标横向(x轴)移动增量 Input.GetAxis(“Mouse y”) 可取得鼠标竖向(y轴)移动增量通过勾股定理获取拖拽长 ...

随机推荐

爬虫之FileCookieJar
简介虽然CookieJar模块能够做到给请求设置cookie,但是它的cookie是保存在内存里的,每次用都需要重新设置, 这就衍生了一个它的子类---FileCookieJar,它可以将cooki ...
shell_02
if判断: if [$? -eq 0];then echo "xxxxxxxxxxx" else echo "xxxxxxxxxxxxx" fi case判断: ...
数据结构-平衡二叉树旋转过程平衡因子分析 c和java代码实现对比
平衡二叉搜索树(Self-balancing binary search tree)又被称为AVL树(有别于AVL算法),且具有以下性质:它是一棵空树或它的左右两个子树的高度差的绝对值不超过1,并且 ...
vue 动画过渡
一.过渡(动画) 1. 简介 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果,本质上还是使用CSS3动画:transition.animation 2. 基本用法 1.使用t ...
Appium PageObject
原文地址http://blog.csdn.net/TalorSwfit20111208/article/details/77434950 由于无法联系上您,在此分享您的文章,希望谅解! Appium ...
The Cheap KD 10 design is not too far of a departure
Kevin Durant's Cheap KD 10 have to do with to determine the greatest spotlight they have seen around ...
MySQL数据库--练习
学生选课系统设计表关系创建表和插入数据 /* Navicat MySQL Data Transfer Source Server : localhost_3306 Source Server Ve ...
安装和使用php的mcrypt扩展
程序员们在编写代码程序时,除了要保证代码的高性能之外,还有一点是非常重要的,那就是程序的安全性保障.PHP除了自带的几种加密函数外,还有功能更全面的PHP加密扩展库和. 其中,Mcrypt扩展库可以实 ...
mysql服务解压版的安装(5.7)
推荐博客: https://www.cnblogs.com/LxyXY/p/7708016.html
从toString()方法到Object.prototype.toString.call()方法
一.toString方法和Object.prototype.toSting.call()的区别 var arr=[1,2]; 直接对一个数组调用toString()方法, console.log(ar ...

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