可以用鼠标拖动这条线,效果如图:
说明:还有一些bug,定位还不是很准确。
代码:
<html xmlns:v>
<style type="text/css">v\:*{behavior:url(#default#VML);}</style>
<script type="text/javascript">
/*为数组(Array)添加 insertAt 方法 */
Array.prototype.insertAt = function(index, value){
var part1 = this.slice(0, index);
var part2 = this.slice(index );
part1.push(value);
return part1.concat(part2);
};
/*
* 为数组(Array)添加 removeAt 方法
删除数组 方法一
* 方法:Array.remove(dx) 通过遍历,重构数组
* 功能:删除数组元素.
* 参数:dx删除元素的下标.
Array.prototype.removeAt=function(dx)
{
if(isNaN(dx)||dx>this.length){return false;}
for(var i=0,n=0;i<this.length;i++)
{
if(this[i]!=this[dx])
{
this[n++]=this[i]
}
}
this.length-=1
}
a = ['1','2','3','4','5'];
alert("elements: "+a+"\nLength: "+a.length);
a.removeAt(1); //删除下标为1的元素
alert("elements: "+a+"\nLength: "+a.length);
方法二
* 方法:Array.baoremove(dx)
* 功能:删除数组元素.
* 参数:dx删除元素的下标.
* 返回:在原数组上修改数组.
* splice方法见http://www.w3school.com.cn/js/jsref_slice_array.asp
Array.prototype.removeAt = function(dx)
{
if(isNaN(dx)||dx>this.length){return false;}
this.splice(dx,1);
}
b = ['1','2','3','4','5'];
alert("elements: "+b+"\nLength: "+b.length);
b.removeAt(1); //删除下标为1的元素
alert("elements: "+b+"\nLength: "+b.length);
*/
Array.prototype.removeAt = function(index){
var part1 = this.slice(0, index);
var part2 = this.slice(index);
part1.pop();
return(part1.concat(part2));
}
/*获取元素在页面中x坐标的绝对位置*/
function getX(obj){
return obj.offsetLeft + (obj.offsetParent ? getX(obj.offsetParent) : obj.x ? obj.x : 0);
}
/*获取元素在页面中y坐标的绝对位置*/
function getY(obj){
return (obj.offsetParent ? obj.offsetTop + getY(obj.offsetParent) : obj.y ? obj.y : 0);
}
/*获取元素在页面中的绝对位置*/
function getAbsolutePosition(obj){
var t = obj.offsetTop;
var l = obj.offsetLeft;
var w = obj.offsetWidth;
var h = obj.offsetHeight;
while(obj=obj.offsetParent){
t+=obj.offsetTop;
l+=obj.offsetLeft;
}
return {
offsetTop: t,
offsetLeft: l,
offsetWidth: w,
offsetHeight: h
}
}
/**
* 坐标类
*/
Point = function(config){
if(arguments.length == 1){
this.x = config.x || 0;
this.y = config.y || 0;
this.absoluteX = config.absoluteX || 0;
this.absoluteY = config.absoluteY || 0;
} else if(arguments.length == 4){
this.x = arguments[0];
this.y = arguments[1];
this.absoluteX = arguments[2];
this.absoluteY = arguments[3];
} else {
throw "实例化Point对象参数不对!";
}
}
/**
* 多边线类
*/
Polyline = function(_points, obj){
this.points = _points || '';
this.pointsArray = [];
this.obj = obj;
this.init();
};Polyline.prototype = {
init: function(){
var _points = this.points.split(',');
var x, y, currentAbsoluteX, currentAbsoluteY, preAbsoluteX, preAbsoluteY;
for(var i=0;i<_points.length;i=i+2){
preAbsoluteX = preAbsoluteX || 0;
preAbsoluteY = preAbsoluteY || 0;
preAbsoluteX = (preAbsoluteX + '').replace('pt','');
preAbsoluteY = (preAbsoluteY + '').replace('pt','');
x = _points[i].replace('pt','') - 0;
y = _points[i+1].replace('pt','') - 0;
currentAbsoluteX = preAbsoluteX - 0 + x;
currentAbsoluteY = preAbsoluteY - 0 + y;
if(x == 0 && y== 0){
this.pointsArray.push(new Point(x, y, getAbsolutePosition(this.obj).offsetLeft*3/4, getAbsolutePosition(this.obj).offsetTop*3/4));
}else{
this.pointsArray.push(new Point(x, y, currentAbsoluteX + getAbsolutePosition(this.obj).offsetLeft*3/4, currentAbsoluteY + getAbsolutePosition(this.obj).offsetTop*3/4));
}
preAbsoluteX = currentAbsoluteX;
preAbsoluteY = currentAbsoluteY;
}
},
/*
* 判断给的坐标是否在多边线的两个端点坐标之间
* 如果在,返回起始端点的下标,否则返回-1
*/
getSidePositionIndex: function(_point){
for(var i=0;i<this.pointsArray.length-1;i++){
/*X坐标在两点之间*/
var flagX = (_point.absoluteX > this.pointsArray[i].absoluteX
&& _point.absoluteX < this.pointsArray[i+1].absoluteX)
||
(_point.absoluteX < this.pointsArray[i].absoluteX
&& _point.absoluteX > this.pointsArray[i+1].absoluteX);
/*Y坐标在两点之间*/
var flagY = (_point.absoluteY > this.pointsArray[i].absoluteY
&& _point.absoluteY < this.pointsArray[i+1].absoluteY)
||
(_point.absoluteY < this.pointsArray[i].absoluteX
&& _point.absoluteY > this.pointsArray[i+1].absoluteY);
if(flagX && flagY){
return i;
}
}
return -1;
}
}
/*记录当前鼠标是否按下*/
isMouseDown = false;
/*记录当前鼠标按下的位置*/
currentMouseDownPoint = null;
/*记录当前鼠标释放的位置*/
currentMouseUpPoint = null;
/*记录当前激活多边线对象*/
currentActiveLine = null;
polylineMap = [];
/*
* 鼠标按下处理函数
*/
function doMouseDown(obj){
obj.style.cursor = 'hand';
isMouseDown = true;
/*设置当前激活的多边线*/
currentActiveLine = obj;
/*设置当前鼠标按下位置*/
currentMouseDownPoint = new Point(0, 0, (event.offsetX + getAbsolutePosition(obj).offsetLeft) * 3/4, (event.offsetY + getAbsolutePosition(obj).offsetTop) * 3/4);
}
/*
* 鼠标释放处理函数
*/
function doMouseUp(obj){
if(currentActiveLine && isMouseDown){
/*测试*/
debug(obj);
currentActiveLine.style.cursor = 'default';
currentMouseUpPoint = new Point(0, 0, event.offsetX * 3/4, event.offsetY * 3/4);
var _polyLine = polylineMap[0];
var sidePositionIndex = _polyLine.getSidePositionIndex(currentMouseDownPoint);
if(sidePositionIndex == -1){
return;
}
var firstX = _polyLine.pointsArray[sidePositionIndex].x - 0;
var firstY = _polyLine.pointsArray[sidePositionIndex].y - 0;
firstX = firstX == 0 ? firstX : firstX + 'pt';
firstY = firstY == 0 ? firstY : firstY + 'pt';
var firstPosition = '' + firstX + ',' + firstY;
var secondPosition = '' + _polyLine.pointsArray[sidePositionIndex+1].x + 'pt,' + _polyLine.pointsArray[sidePositionIndex+1].y + 'pt';
/*这边以前算错了*/
var newPositionX = ((event.offsetX - getAbsolutePosition(currentActiveLine).offsetLeft) * 3/4);// - _polyLine.pointsArray[sidePositionIndex].absoluteX);
var newPositionY = ((event.offsetY - getAbsolutePosition(currentActiveLine).offsetTop) * 3/4);// - _polyLine.pointsArray[sidePositionIndex].absoluteY);
var newPosition = firstPosition + ','
+ newPositionX + 'pt,'
+ newPositionY + 'pt,'
+ secondPosition;
var tempValue = currentActiveLine.points.value;
/*这边第一次赋值成功,之后赋值全部失败
原先的值:"0,0,114.75pt,21.75pt,337.5pt,337.5pt"
找到需要替换的值:"0,0,114.75pt,21.75pt"
新的值:"0,0,80.25pt,-12.75pt,114.75pt,21.75pt"
替换后返回值正常:"0,0,80.25pt,-12.75pt,114.75pt,21.75pt,337.5pt,337.5pt"
再次输出值,错误:"0,-12.75pt,80.25pt,-25.5pt,114.75pt,9pt,337.5pt,324.75pt"
说明赋值失败,可就是不知道那边有错误
(先前算法有问题,改正后就ok了。不给该方法还有些bug就是很多情况下拖动不了,换成下面的重新绘制就很少出现该问题)
*/
// currentActiveLine.points.value = currentActiveLine.points.value.replace(firstPosition + ',' + secondPosition, newPosition);
document.getElementById('testDiv').innerHTML = '<v:polyline id="testPolyline" style="Z-INDEX:1;POSITION:absolute;LEFT:100px;TOP:100px" strokeweight="2px" strokecolor="#009900" onmousedown="doMouseDown(this);" onmouseup="doMouseUp(this);" onmousemove="doMouseMove(this)" points="'+currentActiveLine.points.value.replace(firstPosition + ',' + secondPosition, newPosition)+'" filled="f" fillcolor="white"/>';
if(tempValue != currentActiveLine.points.value){/*替换成功*/
/* 在sidePositionIndex处添加新的point*/
_polyLine.pointsArray = _polyLine.pointsArray.insertAt(sidePositionIndex + 1, new Point(newPositionX, newPositionY, event.offsetX * 3/4, event.offsetY * 3/4));
}else{
debugger;
}
/*测试*/
debug(obj);
}
isMouseDown = false;
currentActiveLine = null;
}
/*
* 鼠标移动处理函数
*/
function doMouseMove(obj){
/*测试*/
debug(obj);
obj.style.cursor = 'hand';
if(isMouseDown){
// TODO 用虚线显示鼠标弹出后的线的形状
}
}
/*用于打印信息的测试函数*/
function debug(obj){
try{
document.getElementById('debug').innerHTML = '\n' + event.offsetX + '-' + event.offsetY
+ '-MouseIsDown: ' + isMouseDown
+ '-currentActiveLine.points.value: ' + currentActiveLine.points.value;
} catch(e) {
document.getElementById('debug').innerHTML = '\n' + event.offsetX + '-' + event.offsetY
+ '-MouseIsDown: ' + isMouseDown;
}
}
window.onload = function(){
document.getElementById('testDiv').innerHTML = '<v:polyline id="testPolyline" style="Z-INDEX:1;POSITION:absolute;LEFT:100px;TOP:100px" strokeweight="2px" strokecolor="#009900" onmousedown="doMouseDown(this);" onmouseup="doMouseUp(this);" onmousemove="doMouseMove(this)" points="0,0,400px,400px" filled="f" fillcolor="white"/>';
var testPloyline = document.getElementById('testPolyline');
polylineMap.push(new Polyline(testPloyline.points.value, testPloyline));
}
</script>
<body onmouseup="doMouseUp(this);">
<!--
<v:line
id="testLine"
style="Z-INDEX:5;LEFT:233px;POSITION:absolute;TOP:150px"
onmousedown="doMouseDown(this);"
onmouseup="doMouseUp(this);"
onmousemove="doMouseMove(this)"
to="100pt,94.5pt"/>
-->
<div id="testDiv">
</div>
<div id="debug" />
</body>
</html>