文档章节

canvas 画框调大小

o
 osc_fmg49rzg
发布于 2019/03/20 09:59
字数 976
阅读 9
收藏 0

精选30+云产品,助力企业轻松上云!>>>

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

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

四面字节跳动(高级开发岗):分布式+中间件+TCP+JVM+Hashmap+ThreadLocal

字节跳动的面试官都挺好,面试的内容是我面试那么多家以来最全面的,问题也没有特别刁钻,都比较符合工作场景。 项目很重要,项目是敲门砖也是面试的大头,如果我没有简历上的两个项目的话,...

IT-哆哆
5分钟前
0
0
直播回顾

因业务需要,接触了一下直播,作为一个小白,在此做个回顾。 需求:在我们自己的APP上直播带货 调研:阿里云视频直播、腾讯云标准直播 简单地来说,直播就是把主播端采集的视频传送给用户端。...

osc_nk8pyo7o
5分钟前
7
0
神经网络中的激活函数

作者|Renu Khandelwal 编译|VK 来源|Medium 什么是神经网络激活函数? 激活函数有助于决定我们是否需要激活神经元。如果我们需要发射一个神经元那么信号的强度是多少。 激活函数是神经元通过神...

osc_993tr4xp
7分钟前
9
0
重磅!YOLOv4阅读笔记(附思维导图和论文译文)!

今天刷看到了YOLOv4之时,有点激动和兴奋,等了很久的YOLOv4,你终究还是出现了 论文地址:https://arxiv.org/pdf/2004.10934.pdf GitHub地址:https://github.com/AlexeyAB/darknet 觉得作者...

osc_zwv9uj8l
7分钟前
0
0
2.链表

点击使用幕布网页版查看(含思维导图) 链表(单链表)是一种通过指针将一组零散的内存块串联起来的数据结构,每个链表的结点除了存储的数据之外,还需要记录链上的下一个节点的地址 链表的插...

osc_73pstnki
8分钟前
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部