借用 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>
相关推荐
JavaScript作为一种强大的客户端脚本语言，能够帮助我们实现在浏览器中绘制矢量图形，而wz_jsgraphics.js库就是这样一个专门用于JavaScript矢量绘图的工具。本文将深入探讨如何使用这个库以及其核心功能，旨在为...
谁说JavaScript 不能画图呢? 从服务器端生成分析图再下载到游览器在服务器资源以及网络传输上都...资源中有wz_jsgraphics.js 3.03, 有其使用说明,还有一个简单的例子. 我试用了一下,可以的. 打算在一个项目中使用一下.
wz_jsgraphics.js 专门用来绘制简单线条的 javaScript 的js包..简单实例可以去这里看看.. hi.baidu.com\johnny 自己汇总的..不是很全.谢谢
在【标题】"wz_jsgraphics.js javascript 画图"中提到的，JavaScript同样可以用于在浏览器中进行图形绘制，这主要得益于HTML5引入的Canvas API。 Canvas API是一个基于矢量图形的画布，允许开发者通过JavaScript...
JavaScript图形库 wz_jsgraphics 是一个强大的工具，专为在Web上创建动态和交互式的几何图形设计。这个库允许开发者利用JavaScript语言的灵活性和浏览器的原生支持，来绘制各种复杂的图形，包括直线、圆形和正方形等...
这篇博客文章“通过wz_jsgraphics在js上画图”可能深入探讨了如何使用这个库来创建图形。 `wz_jsgraphics`的主要优点在于它的易用性和灵活性，开发者可以通过调用一系列的方法来绘制线条、形状、图像等。例如，你...
标题“wz_jsgraphics”可能指的是一个基于JavaScript的图形绘制库，特别用于在网页上创建图形和线条。JavaScript（简称JS）是一种广泛使用的客户端脚本语言，它在浏览器环境中运行，为网页添加交互性和动态功能。...
该函数可以实现画各种线条、矩形、圆形等图形，通过鼠标点击获取起点位置和终点位置。
1. **线条和形状绘制**：`wz_jsgraphics`提供了一系列方法，如`line()`、`rect()`、`circle()`等，用于创建直线、矩形、圆形等基本图形。通过组合这些基本元素，可以构建出更复杂的图案。 2. **颜色和渐变**：支持...
JavaScript（简称JS）是一种广泛应用于Web开发的轻量级脚本语言，它在网页中能够实现动态交互，包括但不限于数据处理、用户界面控制以及各种视觉效果。本文将深入探讨一个名为“wz_jsgraphics”的JS画图包及其使用...
`wz_jsgraphics.js`可能封装了Canvas API，提供了一些简化版的函数，以帮助开发者更容易地进行绘图操作，比如绘制直线、曲线、圆、矩形、填充颜色、渐变、图像处理等。 在给定的博文链接中（注意，由于实际无法访问...
用jquery写的图表统计脚本 canvaschartpainter.js canvaschartpainter.src.js chart.js chart.src.js chartplugin.js excanvas.js iecanvas.htc iecanvas.js jgchartpainter.js ...wz_jsgraphics.js
在提供的文件“wz_jsgraphics.js”中，很可能就包含了一系列这样的函数，用于处理常见的绘图操作。这些函数可能包括但不限于以下几种： 1. **画线(lineTo)**：绘制直线，从当前绘图位置到指定的终点。 2. **填充...
js画图包这是个德国人写的很强大，可以实现一般图形的绘制，填充。里面的统计图例子中js文件引入的路径有问题应该改为<script type="text/javascript" src="wz_jsgraphics.js"></script>
综合以上信息，JSGraphics 1.10 是一个经过改进的JavaScript库，适用于创建动态图表，并且在Firefox等浏览器上表现良好。它提供了规范化的API接口，易于使用，同时通过AJAX支持动态数据加载，对于Web应用中的数据...