借用 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" onclick="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>
相关推荐
wz_jsgraphics.js+index.html 博文链接：https://sailinglxg.iteye.com/blog/142290
wz_jsgraphics.js 专门用来绘制简单线条的 javaScript 的js包..简单实例可以去这里看看.. hi.baidu.com\johnny 自己汇总的..不是很全.谢谢
谁说JavaScript 不能画图呢? 从服务器端生成分析图再下载到游览器在服务器资源以及网络传输上都...资源中有wz_jsgraphics.js 3.03, 有其使用说明,还有一个简单的例子. 我试用了一下,可以的. 打算在一个项目中使用一下.
你是不是认为js就只能处理各文字检验，图片反转等等，你用js画过多变形吗，画过椭圆吗。来看人家写的这个js代码，从画线到画多变形。。。。强呀！
是一个非常详尽而有趣的JS库,它提供了绘制几何图形的功能,例如直线、圆、正方形
该函数可以实现画各种线条、矩形、圆形等图形，通过鼠标点击获取起点位置和终点位置。
NULL 博文链接：https://wubinclat.iteye.com/blog/649882
js， 画图，画线， jsgraphics
JS库，用DIV来画图，在任何浏览器都可能画线
用jquery写的图表统计脚本 canvaschartpainter.js canvaschartpainter.src.js chart.js chart.src.js chartplugin.js excanvas.js iecanvas.htc iecanvas.js jgchartpainter.js ...wz_jsgraphics.js
js画图 js画图包及使用方法 wz_jsgraphics wz_jsgraphics使用
js画图包这是个德国人写的很强大，可以实现一般图形的绘制，填充。里面的统计图例子中js文件引入的路径有问题应该改为<script type="text/javascript" src="wz_jsgraphics.js"></script>
│ │ │ │ │ │ fckspellcheckcommand_gecko.js 441 bytes │ │ │ │ │ │ fckspellcheckcommand_ie.js 1.07 KB │ │ │ │ │ │ fckstylecommand.js 2.25 KB │ │ │ │ │ │ ...
JSGraphics版本1.10,重新设计了类,更好的封装了私有函数,规范了公有函数接口,解决了firefox下不能显示问题
利用js模拟仪表盘的实现利用jsgraphics.js库下载 后 打开仪表盘.html 然后将图层 拖拽宽和高 必须一样