vue 鼠标拖动画矩形_用canvas实现鼠标拖动绘制矩形框

鼠标拖动绘制矩形框(canvas)

varlayer=0;

CanvasExt={

drawRect:function(canvasId,penColor,strokeWidth){varthat=this;

that.penColor=penColor;

that.penWidth=strokeWidth;varcanvas=document.getElementById(canvasId);//canvas 的矩形框

varcanvasRect=canvas.getBoundingClientRect();//矩形框的左上角坐标

varcanvasLeft=canvasRect.left;varcanvasTop=canvasRect.top;varlayerIndex=layer;varlayerName="layer";varx=0;vary=0;//鼠标点击按下事件，画图准备

canvas.οnmοusedοwn=function(e){//设置画笔颜色和宽度

varcolor=that.penColor;varpenWidth=that.penWidth;

layerIndex++;

layer++;

layerName+=layerIndex;

x=e.clientX-canvasLeft;

y=e.clientY-canvasTop;

$("#"+canvasId).addLayer({

type:'rectangle',

strokeStyle: color,

strokeWidth: