借用 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>
