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: penWidth,

name:layerName,

fromCenter:false,

x: x, y: y,

width:1,

height:1});

$("#"+canvasId).drawLayers();

$("#"+canvasId).saveCanvas();//鼠标移动事件，画图

canvas.οnmοusemοve=function(e){

width=e.clientX-canvasLeft-x;

height=e.clientY-canvasTop-y;

$("#"+canvasId).removeLayer(layerName);

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

type:'rectangle',

strokeStyle: color,

strokeWidth: penWidth,

name:layerName,

fromCenter:false,

x: x, y: y,

width: width,

height: height

});

$("#"+canvasId).drawLayers();

}

};

canvas.οnmοuseup=function(e){varcolor=that.penColor;varpenWidth=that.penWidth;

canvas.οnmοusemοve=null;

width=e.clientX-canvasLeft-x;

height=e.clientY-canvasTop-y;

$("#"+canvasId).removeLayer(layerName);

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

type:'rectangle',

strokeStyle: color,

strokeWidth: penWidth,

name:layerName,

fromCenter:false,

x: x, y: y,

width: width,

height: height

});

$("#"+canvasId).drawLayers();

$("#"+canvasId).saveCanvas();

}

}

};

drawPen();functiondrawPen(){varcolor= "red";varwidth= 1;

CanvasExt.drawRect("canvas",color,width);

}