<html xmlns:v="http://m.tkk7.com/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://m.tkk7.com/zhyiwww
|----------------------------------------------------------------------------------------|
posted on 2007-04-05 19:32
zhyiwww 閱讀(8429)
評論(11) 編輯 收藏 所屬分類:
gis 、
vml