vue 鼠标拖动画矩形_vue下canvas绘制矩形

起因：根据项目需求本人写了一个绘制矩形的组件。

功能：在图片中绘制矩形，根据图片大小进行自适应展示，获取图片矩形坐标。

思路：首先定义一个固定大小的DIV，DIV标签中有监测鼠标变化的四个事件mousedown，mousemove，mouseup，mouseleave。

第二在DIV标签内有img，canvas两个标签，一个负责图片展示,一个负责绘制矩形。

其中img与DIV标签的大小相当，canvas是根据DIV标签position定位的以保证鼠标事件在图片上绘制矩形不会有偏差。

以下就是组件的全部代码和实现效果展示

取 消

确 定

.canvasDraw {

}

import vue from 'vue';

export default {

name:'canvasDraw',

props:['imgSrc'],

data() {

return {

startX:'', //画画开始的X坐标

startY:'', //画画开始的Y坐标

endX:'', //画画结束的X坐标

endY:'', //画画结束的Y坐