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);

}