网页在图片上画长方形和直线，并且能控制和编辑

工作上用到了在一张图片上画正方形和直线。并且可以控制和编辑

Your browser does not support the canvas element. 长方形直线

var c=document.getElementById(“myCanvas”);
var cxt=c.getContext(“2d”);
var img=new Image()
img.src=“1.jpg”
var zhzcztx = “”;

//已有长方形
var changfx = [];
//已经点击的长方形
var SelectedRect;
function rectar(x,y,width,height,qdfw){
this.x = x;
this.y = y;
this.w = width;
this.h = height;
this.isSelected = false;
//起点方位
this.qdfw = qdfw;
//鼠标悬浮时临时起点位置
this.xfwz = {};
}

//已有直线
var zxy = [];
//已选直线
var selectedLine;
function line(x,y,x1,y1,fangx){
this.x = x;
this.y = y;
this.x1 = x1;
this.y1 = y1;
this.isSelected = false;
//方向
this.fangx=fangx
//鼠标悬浮时临时起点位置
this.xfwz = {};
}

//起点位置
var qidian = {};
//移动的位置
var yidong = {};
//标识位标识操作
var candraw = ‘no’;
//时间轴
var intervalli;
//鼠标样式提示
var cursor = ‘default’;
//临时的xy用于托动
var linsxy = {}
function func(){
zhzcztx = document.getElementById(“tuxing”).value;
}
img.onload = function() {
//清理掉时间轴
//clearInterval(intervalli);
document.getElementById(“myCanvas”).width = img.width;
document.getElementById(“myCanvas”).height = img.height;
cxt.drawImage(img,0,0);
intervalli = setInterval(“huizhi()”,“50”);
zhzcztx = document.getElementById(“tuxing”).value;
}

//鼠标悬浮事件
function canvasOver(e){
var xyobj = getxy(e);
var signinline = “default”;
//检测长方形部分
//标志位看鼠标是否在线上
if (SelectedRect != null){
var objsxy = cfxsiddian (xyobj,SelectedRect);
if (objsxy.sbstyle!=""){
signinline = objsxy.sbstyle;
SelectedRect.xfwz.x = objsxy.x;
SelectedRect.xfwz.y = objsxy.y;
}
//先看是否在已选长方形线上
else if(cfxsixian(xyobj.x,xyobj.y,SelectedRect.x,SelectedRect.x+SelectedRect.w,SelectedRect.y,SelectedRect.y+SelectedRect.h,SelectedRect.qdfw)){
signinline = “move”;
}
}
for(var i=changfx.length-1; i>=0; i–) {
var rect = changfx[i];
if(!rect.isSelected){
if(cfxsixian(xyobj.x,xyobj.y,rect.x,rect.x+rect.w,rect.y,rect.y+rect.h,rect.qdfw)){
signinline = ‘pointer’;
}
}
}
//检测直线部分
if(selectedLine!=null){
var silis = zhixisnotLia(xyobj,selectedLine);
if(silis!=""){
signinline = silis
}else if(jiancezhix(xyobj,selectedLine)){
signinline = “move”;
}
}
for(var i=zxy.length-1; i>=0; i–){
var lineobj = zxy[i];
if(!lineobj.isSelected){
if(jiancezhix(xyobj,lineobj)){
signinline = ‘pointer’;
}
}
}
cursor = signinline;
c.style.cursor=signinline;
}
//直线鼠标在俩点上
function zhixisnotLia(xyobj,lineobj){
if(xyobj.x>=lineobj.x-2&&xyobj.x<=lineobj.x+2&&xyobj.y>=lineobj.y-2&&xyobj.y<=lineobj.y+2){
selectedLine.xfwz = {x:lineobj.x1,y:lineobj.y1};
return “w-resize”;
}else if(xyobj.x>=lineobj.x1-2&&xyobj.x<=lineobj.x1+2&&xyobj.y>=lineobj.y1-2&&xyobj.y<=lineobj.y1+2){
selectedLine.xfwz = {x:lineobj.x,y:lineobj.y};
return “w-resize”;
}
return “”;
}
var offset = 5;
//检测是否在直线上
function jiancezhix(xyobj,lineobj){
var minX = Math.min(lineobj.x, lineobj.x1); // 较小的X轴坐标值
var maxX = Math.max(lineobj.x, lineobj.x1); // 较大的X轴坐标值
var minY = Math.min(lineobj.y, lineobj.y1); // 较小的Y轴坐标值
var maxY = Math.max(lineobj.y, lineobj.y1); // 较大的Y轴坐标值
if (lineobj.y === lineobj.y1) {
// 水平线
if ((xyobj.x >= minX && xyobj.x <= maxX) && (xyobj.y >= minY - offset && xyobj.y <= maxY + offset)) {
return true;
}
}else if (lineobj.x === lineobj.x1) {
// 垂直线
if ((xyobj.y >= minY && xyobj.y <= maxY) && (xyobj.x >= minX - offset && xyobj.x <= maxX + offset)) {
return true;
}
} else {
// 斜线 (先判断点是否进入可接受大范围(矩形)，然后再根据直线上的交叉点进行小范围比较)
if ((xyobj.x >= minX && xyobj.x <= maxX) && (xyobj.y >= minY - offset && xyobj.y <= maxY + offset)) {
//求Y轴坐标
//方法1：根据tanθ= y/x = y1/x1, 即y = (y1/x1)x (该方法有局限性，垂直线(p2.x - p1.x)=0，不能用)
//var y = ((p2.y - p1.y) / (p2.x - p1.x)) * (px - p1.x);
//方法2：先求弧度hudu，根据cosθ=x/r, r=x/cosθ,求得r，再根据sinθ=y/r, y=sinθr, 求得y
var hudu = Math.atan2(lineobj.y1 - lineobj.y, lineobj.x1 - lineobj.x); // 直线的弧度(倾斜度)
// 用三角函数计出直线上的交叉点
var r = (xyobj.x - lineobj.x) / Math.cos(hudu); // 直角三角形的斜边（或理解成圆的半径）
var y = Math.sin(hudu) * r; // Y轴坐标
var p = { x: xyobj.x, y: lineobj.y + y }; // 直线上的交叉点
if ((Math.abs(xyobj.x - p.x) <= offset) && (Math.abs(xyobj.y - p.y) <= offset)) {
return true; // 1 - 点中
}
}
}
return false;
}

//点击
function canvasClick(e){
var xyobj = getxy(e);
//判定点的是长方形
for(var i=changfx.length-1; i>=0; i–) {
var rect = changfx[i];
if(cfxsixian(xyobj.x,xyobj.y,rect.x,rect.x+rect.w,rect.y,rect.y+rect.h,rect.qdfw)){
//点击到了某个长方形的线上
SelectedRect = rect;
rect.isSelected = true;
return;
}
}
//判定点的是直线
for(var i=zxy.length-1; i>=0; i–) {
var linobj = zxy[i];
if(jiancezhix(xyobj,linobj)){
//点击到了直线上
selectedLine = linobj;
linobj.isSelected = true;
return;
}
}
}
//获得直线的方向
function zhixGetFx(x,y,x1,y1){
var fx = “”;
if(x1<x&&y1y){
fx = “z”
}else if(x1>x&&y1y){
fx = “y”
}else if(x1x&&y1>y){
fx = “x”
}else if(x1x&&y1<y){
fx = “s”
}else if(x1x&&y1>y){
fx = “x”
}else if(x1>x&&y1>y){
fx = “yx”
}else if(x>x1&&y>y1){
fx = “zs”
}else if(x1>x&&y>y1){
fx = “ys”
}else if(x>x1&&y1>y){
fx = “zx”
}
return fx;
}
function canvaUp(e){
//不能画
candraw = ‘no’;
var isnull = (JSON.stringify(yidong) == “{}”);
if(!isnull){
if(qidian.x!=yidong.x&&qidian.y!=yidong.y){
if(zhzcztx’cfx’){
//生成已存在长方形
var fangwei = getqidfw(qidian,yidong);
var rect=new rectar(qidian.x,qidian.y,yidong.x-qidian.x,yidong.y-qidian.y,fangwei);
changfx.push(rect);
//创建完默认被选
rect.isSelected = true;
SelectedRect = rect;
}else{
var fx = zhixGetFx(qidian.x,qidian.y,yidong.x,yidong.y)
var lineobj=new line(qidian.x,qidian.y,yidong.x,yidong.y,fx);
zxy.push(lineobj);
//创建完默认被选
lineobj.isSelected = true;
selectedLine = lineobj;
}
}
}
//初始化终点
yidong = {};
}

//时间轴绘制
function huizhi(){
//清掉上面所有的东西
clearCanvas();
//绘制图片
cxt.drawImage(img,0,0);
//绘制已存在的形状
xingzhuang();
if(zhzcztx==‘cfx’){
//绘制长方形
changfxing();
}else{
//绘制直线
zhixian();
}
//绘制文字
}
//绘制正在进行的长方形
function changfxing(){
cxt.strokeRect(qidian.x,qidian.y,yidong.x-qidian.x,yidong.y-qidian.y);
}
//画直线
function zhixian (){
cxt.beginPath();
cxt.moveTo(qidian.x,qidian.y);
cxt.lineTo(yidong.x,yidong.y);
cxt.stroke();
}
//绘制已存在的形状
function xingzhuang(){
//长方形
for ( var i = 0; i <changfx.length; i++){
rect = changfx[i];
if(rect.isSelectedtrue){
cxt.lineWidth = 3;
}else{
cxt.lineWidth = 1;
}
cxt.strokeRect(rect.x,rect.y,rect.w,rect.h);
cxt.lineWidth = 1;
}
//直线
for ( var i = 0; i <zxy.length; i++){
var lineobj = zxy[i];
if(lineobj.isSelectedtrue){
cxt.lineWidth = 3;
}else{
cxt.lineWidth = 1;
}
cxt.beginPath();
cxt.moveTo(lineobj.x,lineobj.y);
cxt.lineTo(lineobj.x1,lineobj.y1);
cxt.stroke();
cxt.lineWidth = 1;
}
}
function clearCanvas(){
cxt.clearRect(0, 0, c.width, c.height)
cxt.drawImage(img, 0, 0)
}
//长方形四条线的判断鼠标是否在上面
//参数依次位点击的x 点击的y 长方形宽的起点宽的终点高的起点高的终点
function cfxsixian(clickX,clickY,widthstarts,widthends,heightstarts,heightends,qdfw){
if(qdfw==“zs”){
if((clickX>=widthstarts-1&&clickX<=widthstarts+1&&clickY>heightstarts&&clickY<heightends)
||(clickX>=widthends-1&&clickX<=widthends+1&&clickY>heightstarts&&clickY<heightends)
||(clickX>widthstarts&&clickX<widthends&&clickY>=heightstarts-1&&clickY<=heightstarts+1)
||(clickX>widthstarts&&clickX<widthends&&clickY>=heightends-1&&clickY<=heightends+1)){
return true;
}else{
return false;
}
}else if(qdfw==“zx”){
if((clickX>=widthstarts-1&&clickX<=widthstarts+1&&clickY<heightstarts&&clickY>heightends)
||(clickX>=widthends-1&&clickX<=widthends+1&&clickY<heightstarts&&clickY>heightends)
||(clickX>widthstarts&&clickX<widthends&&clickY>=heightstarts-1&&clickY<=heightstarts+1)
||(clickX>widthstarts&&clickX<widthends&&clickY>=heightends-1&&clickY<=heightends+1)){
return true;
}else{
return false;
}
}else if(qdfw==“ys”){
if((clickX>=widthstarts-1&&clickX<=widthstarts+1&&clickY>heightstarts&&clickY<heightends)
||(clickX>=widthends-1&&clickX<=widthends+1&&clickY>heightstarts&&clickY<heightends)
||(clickX<widthstarts&&clickX>widthends&&clickY>=heightstarts-1&&clickY<=heightstarts+1)
||(clickX<widthstarts&&clickX>widthends&&clickY>=heightends-1&&clickY<=heightends+1)){
return true;
}else{
return false;
}
}else if(qdfw==“yx”){
if((clickX>=widthstarts-1&&clickX<=widthstarts+1&&clickY<heightstarts&&clickY>heightends)
||(clickX>=widthends-1&&clickX<=widthends+1&&clickY<heightstarts&&clickY>heightends)
||(clickX<widthstarts&&clickX>widthends&&clickY>=heightstarts-1&&clickY<=heightstarts+1)
||(clickX<widthstarts&&clickX>widthends&&clickY>=heightends-1&&clickY<=heightends+1)){
return true;
}else{
return false;
}
}
}

//获得xy信息
function getxy(e){
var objxy = {};
objxy.x = e.clientX - e.target.parentNode.offsetLeft-5
objxy.y = e.clientY - e.target.parentNode.offsetTop-5
return objxy;
}

//长方形四个顶点的信息
function cfxsiddian (xyobj,SelectedRect){
var obj = {sbstyle:’’};
if(xyobj.x>=SelectedRect.x-2&&xyobj.x<=SelectedRect.x+2&&xyobj.y>=SelectedRect.y-2&&xyobj.y<=SelectedRect.y+2){
//起点
if(SelectedRect.qdfw==‘zs’){
//起点是左上
obj.sbstyle = ‘nw-resize’;
}else if(SelectedRect.qdfw==‘zx’){
//起点是左下
obj.sbstyle = ‘ne-resize’;
}else if(SelectedRect.qdfw==‘ys’){
//起点是右上
obj.sbstyle = ‘ne-resize’;
}else if(SelectedRect.qdfw==‘yx’){
//右下
obj.sbstyle = ‘nw-resize’;
}
obj.x = SelectedRect.x+SelectedRect.w;
obj.y = SelectedRect.y+SelectedRect.h;
}else if(xyobj.x>=SelectedRect.x+SelectedRect.w-2&&xyobj.x<=SelectedRect.x+SelectedRect.w+2&&xyobj.y>=SelectedRect.y-2&&xyobj.y<=SelectedRect.y+2){
//起点对应的横着的点
if(SelectedRect.qdfw==‘zs’){
//起点是左上
obj.sbstyle = ‘ne-resize’;
}else if(SelectedRect.qdfw==‘zx’){
//起点是左下
obj.sbstyle = ‘nw-resize’;
}else if(SelectedRect.qdfw==‘ys’){
//起点是右上
obj.sbstyle = ‘nw-resize’;
}else if(SelectedRect.qdfw==‘yx’){
//右下
obj.sbstyle = ‘ne-resize’;
}
obj.x = SelectedRect.x;
obj.y = SelectedRect.y+SelectedRect.h;
}else if (xyobj.x>=SelectedRect.x-2&&xyobj.x<=SelectedRect.x+2&&xyobj.y>=SelectedRect.y+SelectedRect.h-2&&xyobj.y<=SelectedRect.y+SelectedRect.h+2){
//起点对应竖着那点
if(SelectedRect.qdfw==‘zs’){
//起点是左上
obj.sbstyle = ‘ne-resize’;
}else if(SelectedRect.qdfw==‘zx’){
//起点是左下
obj.sbstyle = ‘nw-resize’;
}else if(SelectedRect.qdfw==‘ys’){
//起点是右上
obj.sbstyle = ‘nw-resize’;
}else if(SelectedRect.qdfw==‘yx’){
//右下
obj.sbstyle = ‘ne-resize’;
}
obj.x = SelectedRect.x+SelectedRect.w;
obj.y = SelectedRect.y;
}else if (xyobj.x>=SelectedRect.x+SelectedRect.w-2&&xyobj.x<=SelectedRect.x+SelectedRect.w+2&&xyobj.y>=SelectedRect.y+SelectedRect.h-2&&xyobj.y<=SelectedRect.y+SelectedRect.h+2){
//起点对应对各那点
if(SelectedRect.qdfw==‘zs’){
//起点是左上
obj.sbstyle = ‘nw-resize’;
}else if(SelectedRect.qdfw==‘zx’){
//起点是左下
obj.sbstyle = ‘ne-resize’;
}else if(SelectedRect.qdfw==‘ys’){
//起点是右上
obj.sbstyle = ‘ne-resize’;
}else if(SelectedRect.qdfw==‘yx’){
//右下
obj.sbstyle = ‘nw-resize’;
}
obj.x = SelectedRect.x;
obj.y = SelectedRect.y;
}
return obj;
}
//清理掉已经选的对象
function clearSelectAlready(){
if (SelectedRect != null) SelectedRect.isSelected = false;
SelectedRect = null;
if (selectedLine != null) selectedLine.isSelected = false;
selectedLine = null;
}
//获取起点方位
function getqidfw(qidian,yidong){
var fangwei = “”;
//起点
if(yidong.x-qidian.x>0&&yidong.y-qidian.y>0){
//起点是左上
fangwei = ‘zs’;
}else if(yidong.x-qidian.x>0&&yidong.y-qidian.y<0){
//起点是左下
fangwei = ‘zx’;
}else if(yidong.x-qidian.x<0&&yidong.y-qidian.y>0){
//起点是右上
fangwei = ‘ys’;
}else if(yidong.x-qidian.x<0&&yidong.y-qidian.y<0){
//右下
fangwei = ‘yx’;
}
return fangwei;
}