javascript鼠標畫線的VML實現:http://www.blogjava.net/zhyiwww/archive/2007/04/05/108774.html

v\:*?? {behavior:url(#default#VML);}

onmousedown = 'down(event)'

οnmοuseup='up(event)'

οnmοusemοve='move(event)'

style='top:30px;left:30px;width:800px;height:600px;visibility:visible;border:solid

1px blue;background-color: #FF99FF'

>

/**

* 定義點對象，也就是鼠標的位置的封裝

*/

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 "-----------";

};

// 你所點過的鼠標位置的數組，是點對象數組

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="

+???? "id="

+???? id

+??? "?? from="

+??? "'"

+???? startPoint.screenX

+??? ","

+???? startPoint.screenY

+??? "'"

+???? "?? to="

+???? "'"

+???? endPoint.screenX

+??? ","

+???? endPoint.screenY

+??? "'"

+??? "? style='position:absolute;left:0px;top:0px;'>

";

var? o = document.createElement(s);

// 這個方法，使在特定的位置添加對象，具體使用，請參考其它的資料

document.body.insertAdjacentElement('BeforeEnd',o);

return o;

}

總結

以上是生活随笔為你收集整理的java前端vml_在Web中使用JavaScript和VML实现WebGIS中的测距的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。