zhyiwww
用平实的笔,记录编程路上的点点滴滴………
posts - 536,comments - 394,trackbacks - 0
<html xmlns:v="http://www.blogjava.net/zhyiwww/">
    <head>
        <title></title>
        
        <meta name="Generator" content="EditPlus" />
        <meta name="Author" content="eglic" />
        <meta name="ContentType" content="text/html" />
        <meta name="CharSet" content="GB2312" />
        
        <link rel="stylesheet" type="text/css" href="/style/default.css" />
        
        <style type="text/css">
            v\:*   {behavior:url(#default#VML);}  
        </style>
        
        
        
    </head>
    <body>
        
        <div id='lineDiv'        
            onmousedown = 'down(event)'    
            onmouseup='up(event)'
            onmousemove='move(event)'
            style='top:30px;left:30px;width:800px;height:600px;visibility:visible;border:solid 1px blue;background-color: #FF99FF'
        >    
         
       
      </div>
        
        <script type="text/javascript">
        
             /**
             * 定义点对象,也就是鼠标的位置的封装
             */
            function Point(){
                return this;
            }
            Point.prototype.setX = function(screenX){
            };
            Point.prototype.setY = function(screenY){
            }
            
            
            /**
             * 定义的屏幕点对象
             */
            function ScreenPoint(screenX,screenY){
                this.screenX = screenX;
                this.screenY = screenY;
                return this;
            }
            ScreenPoint.prototype = new Point();
            
            ScreenPoint.prototype.setX = function (screenX){
                this.screenX = screenX;
            };
            ScreenPoint.prototype.setY = function (screenY){
                this.screenY = screenY;
            };
            
            /**
             * 重载toString方法
             */
            ScreenPoint.prototype.toString = function(){
                return this.screenX.toString() + " ---  " + this.screenY.toString();
                //return "-----------";
            };  
            
        </script>
        
        <script language="javascript">
            
            // 你所点过的鼠标位置的数组,是点对象数组
            var disPoints = new Array();
            

            // 是否处于鼠标按下状态
            var  select = false;
            
            // 记录鼠标按下点的位置 ,默认是(0,0)  
            var  downX = 0;  
            var  downY = 0;
            
            // 当前用于画线的层            
            var lineDiv = document.getElementById("lineDiv");
            
            // 当前你鼠标画的线,在鼠标抬起前的那一条
            var line = null;
            
            /**
            * 处理鼠标按下事件
            */
            function down(event){                
                
                //alert(event);
                
                // 取得你选取的最后一个点
                var lastPoint = disPoints[disPoints.length - 1];
                //alert(lastPoint);
                
                // 判断是否是第一个点
                if(lastPoint == null){
                    // 鼠标按下点屏幕坐标
                    var mouseX1 = event.clientX -  getDivOffsetLeft();
                    var mouseY1 = event.clientY -  getDivOffsetTop();
                    
                    // 记录鼠标按下点的屏幕坐标
                    downX = mouseX1;
                    downY = mouseY1;
                    
                    // 记录第一个点
                    lastPoint = new ScreenPoint(downX,downY);
                    disPoints[0] = lastPoint;
                    //return;
                }
                
                // 如果不是第一个点
                // 取得当前鼠标点的位置
                var mouseX2 = event.clientX -  getDivOffsetLeft();
                var mouseY2 = event.clientY -  getDivOffsetTop();
                
                // 定义当前点
                var tmpPoint = new ScreenPoint(mouseX2,mouseY2);
                                
                // 定义线的ID,用于,取得线的对象
                var lineID = "the_line_" + (disPoints.length-1);
                
                // 在当前点,和最后一个点,两点画线
                line = drawLine(lineID,lastPoint,tmpPoint);
                            
                // 鼠标按下,记录按下的状态
                select = true;
                    
            }
            
            /**
            * 处理鼠标抬起事件
            */
             function up(event){        
                     //alert("up");            
                    // 取得鼠标抬起点的坐标,也就是确定点的坐标
                    var mouseX3 = event.clientX -  getDivOffsetLeft();
                    var mouseY3 = event.clientY -  getDivOffsetTop();
                    
                    // 最终确定的点的对象
                    var currentPoint = new ScreenPoint(mouseX3,mouseY3);
                    
                    // 把此点放入到线的端点数组里面,这个点,相对于下一次的操作来说,就是最后一个点
                    disPoints[disPoints.length] = currentPoint;
                    select = false;        
                }    
            /**
            * 处理鼠标移动事件
            */
             function move(event){
                     // 是否鼠标按下
                    if(select){        
                        // 取得当前鼠标的位置坐标
                        var mouseX2 = event.clientX -  getDivOffsetLeft();
                        var mouseY2 = event.clientY -  getDivOffsetTop();
                        
                        // 把线,从最后一个点画到当前位置
                        line.to = mouseX2 + "," + mouseY2;            
                    }
                    /*
                     * 取消事件冒泡,否则不能响应鼠标的抬起事件
                     */
                    window.event.cancelBubble = true;
                    window.event.returnValue = false;    
                }    
            
            
            function getDivOffsetLeft(){
                var lay1 = document.getElementById("lineDiv");
                //var rect = document.getElementById("rect");
                return lay1.offsetLeft;
            }
            function getDivOffsetTop(){
                var lay1 = document.getElementById("lineDiv");
                //var rect = document.getElementById("rect");
                return lay1.offsetTop;
            }
             
             
     
            /**                
            * 画线操作
            * 用VML 实现
            */
            function drawLine(id,startPoint,endPoint){
                //alert("start -- ");
                var   s="<v:line   " +
                    +     "id="
                    +     id
                    +    "   from="
                    +    "'"
                    +     startPoint.screenX
                    +    ","
                    +     startPoint.screenY
                    +    "'"
                    +     "   to="
                    +     "'"
                    +     endPoint.screenX
                    +    ","
                    +     endPoint.screenY
                    +    "'"
                    +    "  style='position:absolute;left:0px;top:0px;'></v:line>";
            
                var  o = document.createElement(s); 

                // 这个方法,使在特定的位置添加对象,具体使用,请参考其它的资料
                document.body.insertAdjacentElement('BeforeEnd',o);  
                
                return o;
            }
            
            
        </script>
    </body>
</html>



|----------------------------------------------------------------------------------------|
                           版权声明  版权所有 @zhyiwww
            引用请注明来源 http://www.blogjava.net/zhyiwww   
|----------------------------------------------------------------------------------------|
posted on 2007-04-05 19:32 zhyiwww 阅读(8105) 评论(11)  编辑  收藏 所属分类: gisvml

FeedBack:
# re: javascript鼠标画线的VML实现
2007-04-06 13:05 | BeanSoft
先支持一下  回复  更多评论
  
# re: javascript鼠标画线的VML实现
2007-07-09 15:20 | ~~
Good~~~~  回复  更多评论
  
# re: javascript鼠标画线的VML实现
2007-11-09 16:40 | 马大哈
先顶一下 太好了 谢谢楼主  回复  更多评论
  
# re: javascript鼠标画线的VML实现
2007-11-21 15:51 | irene
谢谢楼主,顶一个!
不过要如何控制画线结束呢?  回复  更多评论
  
# re: javascript鼠标画线的VML实现
2007-11-21 23:56 | vml
是啊
要是能够控制画线的结束就好了额
不过还是谢谢哈!  回复  更多评论
  
# re: javascript鼠标画线的VML实现
2007-11-23 09:33 | zhyiwww
这几天没有时间了,等些天,如果有时间,再修改一下,完善一下功能.  回复  更多评论
  
# re: javascript鼠标画线的VML实现
2007-11-24 21:21 | vml
等待你的修改哦 我也一直在想这个问题,但是水平有限啊!弄不出来
不想的能不能够实现在屏幕上添加一个按钮 这样点一下按钮就可以画一个点 或者画一条线 能够实现这样的就好了  回复  更多评论
  
# re: javascript鼠标画线的VML实现
2008-01-15 14:01 | gis_cn
能不能加上这个功能呢, 线画好后, 每个点都是可以拖动的, 这样可以调整线  回复  更多评论
  
# re: javascript鼠标画线的VML实现[未登录]
2008-03-08 10:51 |
谢谢!  回复  更多评论
  
# re: javascript鼠标画线的VML实现
2008-04-27 15:24 | sk
不错,谢了  回复  更多评论
  
# re: javascript鼠标画线的VML实现
2009-03-20 17:42 | 是是非非
<meta name="Author" content="eglic" />

都不记得啥时候写的了。。。  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: