<!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>
<div style="position:relative; z-index:1;"> <img id="myimg" src="/taglib/img/test_0000.jpg" id="testimage" width="700" height="500"> <div style="position:absolute; top:0px; left:0px; z-index:98; opacity: 0.2;background:#FFF;"> <canvas id="mycanvas" width="700" height="500" ></canvas> </div> </div>
<script>canvas = $('#mycanvas')[0];canvas.ctx = canvas.getContext("2d");canvas.recs = [];
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 getEventIndex(recs,x,y,radious){//得到落点所在框的序数，-1代表没有落在任何框内 if(recs.length==0){ return -1; } for(var i=0;i<recs.length;i++){ if(x>(recs[i].x-radious) && x<(recs[i].x+recs[i].w+radious) && y>(recs[i].y-radious) && y<(recs[i].y+recs[i].h+radious)){ return i; } if(i==recs.length-1){ return -1; } }}
function clearCanvas(canvas,ctx){ ctx.clearRect(0,0,canvas.width,canvas.height);}
function getEventArea(data,x,y,radious){//得到落点在一个框中的区域 if(x>(data.x-radious) && x<(data.x+radious)){ if(y>(data.y-radious) && y<(data.y+radious)){ return 1; }else if(y>(data.y+radious) && y<(data.y+data.h-radious)){ return 2; }else{ return 3; } }else if(x>(data.x+data.w-radious) && x<(data.x+data.w+radious)){ if(y>(data.y-radious) && y<(data.y+radious)){ return 4; }else if(y>(data.y+radious) && y<(data.y+data.h-radious)){ return 5; }else{ return 6; } }else{ if(y>(data.y-radious) && y<(data.y+radious)){ return 7; }else if(y>(data.y+data.h-radious) && y<(data.y+data.h+radious)){ return 8; }else{ return 9; } }}
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;}
function drawOldRecs(recs,ctx){//鼠标画图后 //btn_clear(); if(recs.length==0){ return 0; } for (var i = 0; i < recs.length; i++) { //for (var j = 0; j < tags.length; j++) { //if (recs[i].type == tags[j].en_name) { //var id = document.getElementById('type_' + tags[j].en_name); //id.style.background = tags[j].color; canvas.ctx.beginPath(); ctx.lineWidth = 3; //ctx.strokeStyle =tags[j].color; ctx.strokeStyle="black"; ctx.strokeRect(recs[i].x, recs[i].y, recs[i].w, recs[i].h); //break; //} //} }}
$('#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;}
function reSizeRec(index,rec,ex,ey,recSize){ var temX=rec.x; var temY=rec.y; if(index<4&&temX+rec.w-ex>recSize){ rec.x=ex; } if((index==1 || index==4 || index==7)&&temY+rec.h-ey>recSize){ rec.y=ey; } if(index<4){ if(temX+rec.w-ex>recSize){ rec.w=temX+rec.w-ex; } }else if(index<7){ if(ex-temX>recSize){ rec.w=ex-temX; } } if(index==1 || index==4 || index==7){ if(temY+rec.h-ey>recSize){ rec.h=temY+rec.h-ey; } }else if(index==3 || index==6 || index==8){ if(ey-temY>recSize){ rec.h=ey-temY; } }}</script></body></html>
转载于:https://www.cnblogs.com/wff9342/p/10563068.html
相关资源：vue iview canvas 画框并改变大小