JS操作VML

最新推荐文章于 2018-01-11 15:47:45 发布
weixin_34120274
最新推荐文章于 2018-01-11 15:47:45 发布
阅读量236
点赞数
文章标签： python javascript ViewUI
原文链接：https://my.oschina.net/darkness/blog/357339
版权
2019独角兽企业重金招聘Python工程师标准>>>
可以用鼠标拖动这条线，效果如图：

说明：还有一些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>
转载于:https://my.oschina.net/darkness/blog/357339