Canvas绘制不规则图形，实现可拖动，编辑

目前的工作在做在线的标注工具，接触canvas一年了，各种绘制，基本上图像的交互canvas都可以完成，也写了几篇关于canvas的文章，遇到的问题也写博客上了，对于canvas有问题的朋友可以去看看。一直想写一个关于canvas系列的东西，也没时间。正好最近再捣鼓canvas，有时间就写一点，一个功能一个功能的写，争取写一个系列。

以前都是绘制矩形，今天写一个新鲜的，绘制多边形可拖动编辑的多边形。见下图（截取自工程的一部分）:

(太大的GIF图传不上来，只能截取一小部分，找个时间把完整的功能录一个视频放在网盘上)。

鼠标点击绘制点，并且自动绘制曲线，（当曲线闭合的时候，弹出名称边界框--不重要），绘制完毕后，点击点可以改变形状，点击曲线内部可以拖动位置。

这篇文章就先写绘制不规则图像与拖动点吧，移动图像值得另起写一篇文章。

正文

写了这么多的canvas代码，我的经验就是一定要去写，一边写边看效果，做的过程中会有新的想法。对于canvas各种绘制的效果，还是得去动手去修改才能出效果。

写之前整理下思路：

1.鼠标点击绘制点-->绘制圆的方法，鼠标点为中心点。

2.每点击一次，绘制线段。--Lineto方法。

3.判断是否闭合。

4.判断是否点击了绘制过的点上--拖动改变形状。

5.重绘。

画布上每一次的更改都是要重新绘制画布的，所以要把绘制的点保存起来。这个思路和画矩形的思路大体相近，可以看下我的绘制矩形的文章。

1 1 //线段的点的集合
2 2 var points=[];
3 3 //可拖动圆圈的点的集合
4 4 var circles=[];
5 5 //每一个点的对象
6 6 function Point(x, y) {
7 7     this.x = x;
8 8     this.y = y;
9 9   }
1010 //圆圈对象
1111 function Circle(x, y) {
1212      this.x = x;
1313      this.y = y;
1414      this.radius = 10;
1515      this.color = "blue";
1616      //拖拽点的标记
1717      this.isSelected = false;
1818   }
1919 /*每一次的点都看作一个对象,然后把点放在数组里保存起来
2020 这样circles和points就会是这种形式
2121 points=[{(x0,y0},{x1,y1},{x2,y2}..]
2222 circles=[{x0,y0,10,blue,false}...]*/

上边的points和circles数组其实xy坐标是一样的，为啥创建两个呢？

如果项目小，就实现一个拖拽的图像就行了，那可以随便设置数组个数，随着标注工具增加，各种重绘，还是各干各的比较好，不要高耦合。

绘制：

1canvas.onmousedown=function(e){
2     var clickX = e.pageX - canvas.offsetLeft;
3     var clickY = e.pageY - canvas.offsetTop;
4     //判断当前点击点是否在已经绘制的圆圈上，如果是执行相关操作，并return，不进入画线的代码
5     for(var i=1; i<circles.length; i++) {
6        var circle = circles[i];
7        //使用勾股定理计算这个点与圆心之间的距离
8        var distanceFromCenter = Math.sqrt(Math.pow(circle.x - clickX, 2)
9            + Math.pow(circle.y - clickY, 2));
10
11        // 如果是其他的点，则设置可以拖动
12        if (distanceFromCenter <= circle.radius) {
13          // 清除之前选择的圆圈
14          index=i;
15          isDragging=true;
16          //停止搜索
17          return;
18        }
19      }
20    //如果点击新的位置，则进入下面的代码，绘制点
21    context.clearRect(0,0,canvas.width,canvas.height);
22    //遍历数组画圆
23     var circle=new Circle(clickX,clickY);
24     circles.push(circle);
25     circles[0].color="green";
26     for(var i=0; i<circles.length; i++) {
27        var circle = circles[i];
28        // 绘制圆圈
29        context.globalAlpha = 0.85;
30        context.beginPath();
31        context.arc(circle.x, circle.y, circle.radius, 0, Math.PI*2);
32        context.fillStyle = circle.color;
33        context.strokeStyle = "black";
34        context.fill();
35        context.stroke();
36      }
37      // 画线
38     var point=new Point(clickX,clickY);
39     points.push(point);
40     context.beginPath();
41     context.lineWidth = 4;
42     //从起始点开始绘制
43     context.moveTo(points[0].x,points[0].y);
44     for (var i = 0; i < points.length; i++) {
45       context.lineTo(points[i].x, points[i].y);
46     }
47     context.fillStyle="rgb(2,100,30)";
48     context.fill();
49     context.strokeStyle="#9d4dca";
50     context.stroke();
51   };

    每一次点击都要判断一下，如果点在曾经绘制的点上，那么就设置变量isDragging=true可以拖拽，return。如果没有，说明创建的是新的点，那么开始绘制并且加入数组。（代码部分的声明就不写了，直接出关键的思路代码，具体的还要自己动手去写）

拖拽点移动：

1canvas.onmousemove=function(e){
2   // 判断圆圈是否开始拖拽
3   if (isDragging == true) {
4     // 判断拖拽对象是否存在
5       // 取得鼠标位置
6       var x1 = e.pageX - canvas.offsetLeft;
7       var y1 = e.pageY - canvas.offsetTop;
8       context.clearRect(0,0,canvas.width,canvas.height);
9       //根据上文得到的index设置index点位置随鼠标改变
10       circles[index].x=x1;
11       circles[index].y=y1;
12       points[index].x=x1;
13       points[index].y=y1;
14       for(var i=0; i<circles.length; i++) {
15          var circle = circles[i];
16          // 绘制圆圈
17          context.globalAlpha = 0.85;
18          context.beginPath();
19          context.arc(circle.x, circle.y, circle.radius, 0, Math.PI*2);
20          context.fillStyle = circle.color;
21          context.strokeStyle = "black";
22          context.fill();
23          context.stroke();
24        }
25       context.beginPath();
26       context.moveTo(points[0].x,points[0].y);
27       for (var i = 0; i < points.length; i++) {
28         context.lineTo(points[i].x, points[i].y);
29       }
30       context.lineTo(points[0].x,points[0].y);
31       // context.fillStyle="#831f68";
32       context.fillStyle="rgb(2,100,30)";
33       context.fill();
34       context.strokeStyle="#9d4dca";
35       context.stroke();
36     }
37   };
38
39   canvas.onmouseup=function(){
40     isDragging=false;
41   };
42
43   canvas.onmouseout=function(){
44     isDragging=false;
45   };

其实实现拖拽并不难， 有一个地方就是如何判断鼠标点在了已经绘制的点上。循环所有点，只要鼠标点到圆心的距离小于半径，那么一定点在了这个点上。

这样一个简单的拖拽就实现了，后面的文章我还会继续增加新的功能，慢慢丰富代码。欢迎关注。

更新：一个V1.0工程的视频，百度网盘:链接: https://pan.baidu.com/s/1qFF3yF4T9oE9quiUx7hfoA 密码: md6g

1.0版本，后续版本慢慢更新，包括canvas的绘制和Vue的一些东东。可绘制、拖拽、编辑、下载坐标信息，对于一些数据集的标注工作可以辅助标记。