<!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>