vue 鼠标拖动画矩形_canvas实现鼠标拖拽矩形移动改变大小

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

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

html:

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

js：

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

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

1 //canvas 矩形框集合

2 var rects=[];3 functionrectar(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 functiondrawRect() {2 //清除画布，准备绘制

3 context.clearRect(0, 0