canvas 画框调大小

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="assets/jquery-3.2.1.min.js" type="text/javascript"></script>
</head>
<body>

canvas.x = 0;
canvas.y = 0;
canvas.url = '';

canvas.radious=5;
canvas.recSize=5;

canvas.drag = false;
canvas.resize = false;
canvas.draw = false;
canvas.showLitRecs=true;
canvas.index=-1;
canvas.side=0;//默认为0,代表画图

canvas.startX=0;
canvas.startY=0;

canvas.isRightClick = false;

function clearCanvas(canvas,ctx){
ctx.clearRect(0,0,canvas.width,canvas.height);
}

function drawLitRecs(ctx,data,size){//画移动时的小框,data为矩形框9个点的坐标
for(var i=0;i<data.length;i++){
ctx.strokeRect(data[i][0]-size/2,data[i][1]-size/2,size,size);
}
}

function changeResizeCursor(canvas,index){
switch(index){
case 0:
canvas.style.cursor="crosshair";
break;
case 1:
canvas.style.cursor="se-resize";
break;
case 2:
canvas.style.cursor="e-resize";
break;
case 3:
canvas.style.cursor="ne-resize";
break;
case 4:
canvas.style.cursor="sw-resize";
break;
case 5:
canvas.style.cursor="w-resize";
break;
case 6:
canvas.style.cursor="nw-resize";
break;
case 7:
canvas.style.cursor="s-resize";
break;
case 8:
canvas.style.cursor="n-resize";
break;
case 9:
canvas.style.cursor="move";
break;
default:
canvas.style.cursor="default";
}
}

function addToRecs(canvas,e){
var rec = {};
rec.x = (canvas.x>e.offsetX)?e.offsetX:canvas.x;
rec.y = (canvas.y>e.offsetY)?e.offsetY:canvas.y;
rec.w = Math.abs(e.offsetX - canvas.x);
rec.h = Math.abs(e.offsetY - canvas.y);
//rec.type = currentSelectedType;
canvas.recs.push(rec);
canvas.url = $('canvas')[0].toDataURL();
}

function drawRuler(canvas,ctx,e){//鼠标画图辅助线
ctx.beginPath();
ctx.strokeStyle = 'red';
//ctx.strokeStyle="#FF0000";
ctx.moveTo(e.offsetX, 0);
ctx.lineTo(e.offsetX, canvas.height);
ctx.moveTo(0, e.offsetY);
ctx.lineTo(canvas.width, e.offsetY);
ctx.stroke();
}

function prepareLitRecs(data){//把一个框的左上角坐标和宽高输入，得到8个坐标，左3，右3中2
var li=[];
li[0]=[data.x,data.y];
li[1]=[data.x,data.y+data.h/2];
li[2]=[data.x,data.y+data.h];
li[3]=[data.x+data.w,data.y];
li[4]=[data.x+data.w,data.y+data.h/2];
li[5]=[data.x+data.w,data.y+data.h];
li[6]=[data.x+data.w/2,data.y];
li[7]=[data.x+data.w/2,data.y+data.h];
return li;

}

$('#mycanvas').mousedown(function (e) {
this.x = e.offsetX;
this.y = e.offsetY;
this.index=getEventIndex(this.recs,this.x,this.y,this.radious);//得到落点所在框的序数

if (e.button == 2) {
if (this.index >= 0) {
this.isRightClick = true;
}
return ;
}

if(this.index>=0){//移动或者放缩
this.startX=this.recs[this.index].x;
this.startY=this.recs[this.index].y;
this.side=getEventArea(this.recs[this.index],this.x,this.y,this.radious);//得到落点在一个框中的区域
if(this.side<9){//准备缩放
this.resize=true;
}else{//准备拖动
this.drag=true;
}
drawLitRecs(this.ctx,prepareLitRecs(this.recs[this.index]),this.recSize);//画移动小框
}else{
this.draw=true;
}
changeResizeCursor(this,this.side);//判断小框类型
}).mouseup(function (e) {
if (this.isRightClick == true) {

this.index = getEventIndex(this.recs,this.x,this.y,this.radious);
this.recs.splice(this.index, 1);
clearCanvas(this,this.ctx);
for (var i = 0; i < this.recs.length; i++) {
this.ctx.strokeRect(this.recs[i].x, this.recs[i].y, this.recs[i].w, this.recs[i].h);
}
this.isRightClick = false;
return ;
}
this.resize=false;
this.drag=false;

if(this.draw){
addToRecs(this,e);//添加框
this.draw=false;
}

}).mousemove(function (e) {
var index;
var side;
clearCanvas(this,this.ctx);
drawRuler(this,this.ctx,e);
drawOldRecs(this.recs,this.ctx);//必须放在moveRec之下

index=getEventIndex(this.recs,e.offsetX,e.offsetY,this.radious);
if(index>-1){
side=getEventArea(this.recs[index],e.offsetX,e.offsetY,this.radious);//得到落点在一个框中的区域
}else{
side=0;
}
changeResizeCursor(this,side);
if(this.showLitRecs&&index>=0&&side>0){
drawLitRecs(this.ctx,prepareLitRecs(this.recs[index]),this.recSize);
}

if (this.draw) {
drawRec(this,this.ctx,e);
}
if (this.drag) {
moveRec(this,this.recs[this.index],e);
}
if (this.resize) {
reSizeRec(this.side,this.recs[this.index],e.offsetX,e.offsetY,this.recSize);
}

}).contextmenu(function (e) {
return false;
});

function drawRec(canvas,ctx,e){//画图
ctx.strokeRect(canvas.x,canvas.y,e.offsetX-canvas.x,e.offsetY-canvas.y);
}

function moveRec(canvas,rec,e){
rec.x=canvas.startX+e.offsetX-canvas.x;
rec.y=canvas.startY+e.offsetY-canvas.y;
}

posted @ 2019-03-20 09:59 wff9342 阅读(966) 评论(0) 编辑收藏举报

刷新页面返回顶部

wff9342

canvas 画框调大小

公告