借用 wz_jsgraphics.js 提供的方法,在图片上画直线、圆、矩形。
在图片上随意点两个点即可画直线、圆、矩形。
coordinate.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>坐标</title> <script type="text/javascript" src="wz_jsgraphics/wz_jsgraphics.js"></script> </head> <body> <div style="position:absolute;top:100px;left:20px;" id="myCanvas" name="myCanvas"> <img src="5034ab190d1db.jpg" id="test_img" name="test_img" οnclick="vControl('GETMOUSEPOSINPIC',this)" /> <script language="javascript" type="text/javascript"> var jg = new jsGraphics("myCanvas"); //jg.setColor("#ff0000"); // 选择红色 //jg.drawLine(93, 33, 144, 114); // 坐标点相对于 div 元素 "myCanvas" //jg.paint(); var JPos = {}; (function($){ $.$getAbsPos = function(p){ var _x = 0; var _y = 0; while(p.offsetParent){ _x += p.offsetLeft; _y += p.offsetTop; p = p.offsetParent; } _x += p.offsetLeft; _y += p.offsetTop; return {x:_x,y:_y}; }; $.$getMousePos = function(evt){ var _x,_y; evt = evt || window.event; if(evt.pageX || evt.pageY){ _x = evt.pageX; _y = evt.pageY; }else if(evt.clientX || evt.clientY){ _x = evt.clientX + document.body.scrollLeft - document.body.clientLeft; _y = evt.clientY + document.body.scrollTop - document.body.clientTop; }else{ return $.$getAbsPos(evt.target); } return {x:_x,y:_y}; } })(JPos); // 点击数 var clickCount = 1; // 在图片上随意点的两个点的坐标 var X1, Y1, X2, Y2; function vControl(pChoice){ switch(pChoice){ case "GETMOUSEPOSINPIC": var mPos = JPos.$getMousePos(); var iPos = JPos.$getAbsPos(arguments[1]); // 第一次触发时表示第一个点的坐标, // 第二次触发时表示第二个点的坐标 var temp = (mPos.x - iPos.x) + ":" + (mPos.y - iPos.y); if (1 == clickCount) { clickCount = clickCount + 1; // 第一个点的坐标 document.getElementById("coordinate1").value = temp; } else if ( clickCount > 1) { // 选择要画的图形 var choose_fun = document.getElementById("choose_fun").value; if (0 == choose_fun) { alert("请选择"); return false; } // 第二个点的坐标 document.getElementById("coordinate2").value = temp; if (clickCount >= 2) { jg.clear(); var p1 = document.getElementById("coordinate1").value; var p2 = document.getElementById("coordinate2").value; X1 = p1.split(":")[0]; Y1 = p1.split(":")[1]; X2 = p2.split(":")[0]; Y2 = p2.split(":")[1]; jg.setColor("#55bb55"); // 选择蓝色 jg.setStroke(3); if (1 == choose_fun) { // 画直线: 通过两个点的坐标 jg.drawLine(parseInt(X1), parseInt(Y1), parseInt(X2), parseInt(Y2)); } else if (2 == choose_fun) { /* 画圆 : 两个点之间的长度作为圆的半径 */ // 平方值 var p_1 = Math.pow(X1,2) + Math.pow(Y1, 2); var p_2 = Math.pow(X2,2) + Math.pow(Y2, 2); // 圆半径 var r = Math.abs(Math.round(Math.sqrt(p_1) - Math.sqrt(p_2))); // 画直线 jg.drawLine(parseInt(X1), parseInt(Y1), parseInt(X2), parseInt(Y2)); // 画圆 var deg=-1; setInterval(function() { deg++; x = parseInt(X1) + r*Math.cos(deg*Math.PI/180)+"px"; y = parseInt(Y1) + r*Math.sin(deg*Math.PI/180)+"px"; //alert(x + " " + y); myCanvas.innerHTML +="<div id='"+deg+"' style='position:absolute;margin:0px;width:3px; height:3px; background-color:#55bb55; left:"+x +"; top:"+y+";'></div>"},3); } else if (3 == choose_fun) { /* 画矩形 : 通过两个点 */ // 1. 确定哪个点是左上角 // 矩形的边长 var width = Math.abs(parseInt(X1) - parseInt(X2)); /// 矩形的高 var highth = Math.abs(parseInt(Y1) - parseInt(Y2)); if (parseInt(X1) < parseInt(X2)&& parseInt(Y1) > parseInt(Y2)) { // (X1,Y2)是左上角 // 一个矩形的外边线。参照左上角的坐标点,并指定矩形的宽度和高度 jg.drawRect(parseInt(X1), parseInt(Y2), width, highth); } else if (parseInt(X1) > parseInt(X2) && parseInt(Y1) < parseInt(Y2)) { // 左上角坐标是 (X2, Y1) jg.drawRect(parseInt(X2), parseInt(Y1), width, highth); } else if (parseInt(X1) > parseInt(X2) && parseInt(Y1) > parseInt(Y2)){ // 左上角坐标是 (X2, Y2) jg.drawRect(parseInt(X2), parseInt(Y2), width, highth); } else if (parseInt(X1) < parseInt(X2) && parseInt(Y1) < parseInt(Y2)){ // 左上角坐标是 (X1, Y1) jg.drawRect(parseInt(X1), parseInt(Y1), width, highth); } } jg.paint(); } } // 设置状态栏文本 window.status = (mPos.x - iPos.x) + " " + (mPos.y - iPos.y); break; } } </script> </div> <div align="center"> <select id="choose_fun" name="choose_fun"> <option value="0">请选择</option> <option value="1">直线</option> <option value="2">圆</option> <option value="3">矩形</option> </select> <br /> <input type="text" id="coordinate1" /> <br /> <input type="text" id="coordinate2" /> </div> </body> </html>