javascript鼠標(biāo)畫(huà)線的VML實(shí)現(xiàn):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'

>

/**

* 定義點(diǎn)對(duì)象，也就是鼠標(biāo)的位置的封裝

*/

function Point(){

return this;

}

Point.prototype.setX = function(screenX){

};

Point.prototype.setY = function(screenY){

}

/**

* 定義的屏幕點(diǎn)對(duì)象

*/

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

};

// 你所點(diǎn)過(guò)的鼠標(biāo)位置的數(shù)組，是點(diǎn)對(duì)象數(shù)組

var disPoints = new Array();

// 是否處于鼠標(biāo)按下?tīng)顟B(tài)

var? select = false;

// 記錄鼠標(biāo)按下點(diǎn)的位置 ，默認(rèn)是(0,0)

var? downX = 0;

var? downY = 0;

// 當(dāng)前用于畫(huà)線的層

var lineDiv = document.getElementById("lineDiv");

// 當(dāng)前你鼠標(biāo)畫(huà)的線，在鼠標(biāo)抬起前的那一條

var line = null;

/**

* 處理鼠標(biāo)按下事件

*/

function down(event){

//alert(event);

// 取得你選取的最后一個(gè)點(diǎn)

var lastPoint = disPoints[disPoints.length - 1];

//alert(lastPoint);

// 判斷是否是第一個(gè)點(diǎn)

if(lastPoint == null){

// 鼠標(biāo)按下點(diǎn)屏幕坐標(biāo)

var mouseX1 = event.clientX -? getDivOffsetLeft();

var mouseY1 = event.clientY -? getDivOffsetTop();

// 記錄鼠標(biāo)按下點(diǎn)的屏幕坐標(biāo)

downX = mouseX1;

downY = mouseY1;

// 記錄第一個(gè)點(diǎn)

lastPoint = new ScreenPoint(downX,downY);

disPoints[0] = lastPoint;

//return;

}

// 如果不是第一個(gè)點(diǎn)

// 取得當(dāng)前鼠標(biāo)點(diǎn)的位置

var mouseX2 = event.clientX -? getDivOffsetLeft();

var mouseY2 = event.clientY -? getDivOffsetTop();

// 定義當(dāng)前點(diǎn)

var tmpPoint = new ScreenPoint(mouseX2,mouseY2);

// 定義線的ID,用于，取得線的對(duì)象

var lineID = "the_line_" + (disPoints.length-1);

// 在當(dāng)前點(diǎn)，和最后一個(gè)點(diǎn)，兩點(diǎn)畫(huà)線

line = drawLine(lineID,lastPoint,tmpPoint);

// 鼠標(biāo)按下，記錄按下的狀態(tài)

select = true;

}

/**

* 處理鼠標(biāo)抬起事件

*/

function up(event){

//alert("up");

// 取得鼠標(biāo)抬起點(diǎn)的坐標(biāo)，也就是確定點(diǎn)的坐標(biāo)

var mouseX3 = event.clientX -? getDivOffsetLeft();

var mouseY3 = event.clientY -? getDivOffsetTop();

// 最終確定的點(diǎn)的對(duì)象

var currentPoint = new ScreenPoint(mouseX3,mouseY3);

// 把此點(diǎn)放入到線的端點(diǎn)數(shù)組里面，這個(gè)點(diǎn)，相對(duì)于下一次的操作來(lái)說(shuō)，就是最后一個(gè)點(diǎn)

disPoints[disPoints.length] = currentPoint;

select = false;

}

/**

* 處理鼠標(biāo)移動(dòng)事件

*/

function move(event){

// 是否鼠標(biāo)按下

if(select){

// 取得當(dāng)前鼠標(biāo)的位置坐標(biāo)

var mouseX2 = event.clientX -? getDivOffsetLeft();

var mouseY2 = event.clientY -? getDivOffsetTop();

// 把線，從最后一個(gè)點(diǎn)畫(huà)到當(dāng)前位置

line.to = mouseX2 + "," + mouseY2;

}

/*

* 取消事件冒泡，否則不能響應(yīng)鼠標(biāo)的抬起事件

*/

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;

}

/**

* 畫(huà)線操作

* 用VML 實(shí)現(xiàn)

*/

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

// 這個(gè)方法，使在特定的位置添加對(duì)象，具體使用，請(qǐng)參考其它的資料

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

return o;

}

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。