wz_jsgraphics.js 在图片上画直线、圆、矩形

最新推荐文章于 2024-05-15 09:59:45 发布

woini213

最新推荐文章于 2024-05-15 09:59:45 发布

阅读量2.3k

点赞数

分类专栏： javascript 文章标签： JavaScript wz_jsgraphics.js ViewUI

本文链接：https://blog.csdn.net/u011371255/article/details/84533214

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

woini213

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
wz_jsgraphics.js 在图片上画直线、圆、矩形

借用 wz_jsgraphics.js 提供的方法，在图片上画直线、圆、矩形。在图片上随意点两个点即可画直线、圆、矩形。 coordinate.html&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tr...
复制链接

扫一扫

专栏目录