`

JS操作VML

prototype算法 
阅读更多
可以用鼠标拖动这条线，效果如图：



说明：还有一些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>
  • 大小: 13 KB
分享到：
| ubuntu 中文输入法安装
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JS和VML操作教程

    这篇"JS和VML操作教程"旨在教授如何使用JavaScript与VML技术来创建各种图表，如饼图、柱状图和曲线图等。这些图表在数据分析和可视化中至关重要，能够帮助用户直观地理解复杂的数据。 首先，让我们深入了解...

    vml.rar_VML_VML web_js v_js vml gis_web绘图

    这可能包含一个或多个示例，演示如何使用JavaScript操作VML来创建和更新地图或其他地理数据的可视化。 描述中的“结合IE运用VML进行web绘图功能，可以与js完美结合并扩展其功能”进一步强调了这个资源包是如何利用...

    带tooltip的js+vml曲线图示例

    2. **vChart.js**：这是JavaScript文件，包含了绘制和操作曲线图的逻辑。主要功能可能包括： - 数据处理：读取并解析数据源，可能来自服务器或者嵌入在HTML中的JSON对象。 - VML元素的创建：使用JavaScript创建VML...

    js 封装VML的饼图，柱状图，折线图

    在这个特定的案例中，我们讨论的是如何使用JavaScript封装VML（Vector Markup Language）来绘制饼图、柱状图和折线图。VML是一种矢量图形格式，允许在IE浏览器中创建和展示复杂的图形，特别是在不支持SVG（Scalable ...

    js+vml.chm

    3. JavaScript与VML结合：在JavaScript中操作VML，首先需要在HTML中引入VML的命名空间，然后通过创建VML元素并设置其属性来绘制图形。JavaScript可以动态改变这些图形的属性，如颜色、大小、位置等，实现交互性。 4...

    JS和VML画曲线图

    JavaScript（简称JS）是一种广泛用于网页和网络应用的编程语言，尤其在客户端脚本中扮演着重要角色。它能够操作HTML、CSS以及DOM，实现动态交互的效果。在本主题中，我们将探讨如何利用JavaScript和Vector Markup ...

    js.rar_VML_js vml_js绘图

    在"js.rar"这个压缩包中，可能包含了VML图形的创建、操作以及与JavaScript交互的示例，对于理解VML的工作原理和应用非常有帮助。如果你正在处理一个需要在老版本IE上展示图形的项目，或者对历史上的Web图形技术感...

    js+vml画图精彩实例

    2. **JavaScript与VML结合**：通过JavaScript，我们可以动态地创建、修改和操作VML元素，实现图形的动态绘制和交互。例如，使用DOM操作来添加、删除或修改VML对象，或者通过事件监听器响应用户的交互行为。 3. **...

    Javascript + VML + SVG 工作流设计器

    JavaScript，VML和SVG是网页开发中的重要技术，用于创建丰富的图形和交互式用户界面。在这个“Javascript + VML + SVG 工作流设计器”项目中，它们被巧妙地结合在一起，构建了一个强大的工作流设计工具。 ...

    VML.rar_VML_javascript_javascript 教程

    总结，VML.rar中的“VML.ppt”可能包含了关于如何使用JavaScript生成和操作VML图形的详细步骤和实例。尽管VML在现代Web开发中已经不那么常见，但了解其工作原理和历史背景，有助于理解Web图形技术的发展历程，也能为...

    vml+javascript实现的3d柱状图(仅适用于ie)

    开发者可能使用JavaScript库，如x-chart.js，来简化处理VML的过程，提供一个友好的API来创建和操作3D柱状图。 3D柱状图是一种数据可视化工具，它以三维方式呈现数据，使数据的对比更加直观。在VML和JavaScript的...

    vml+javascript直接在浏览器中绘制动态曲线图实例(源码-+Think in vml +vml+极道教程)

    在“vml+javascript直接在浏览器中绘制动态曲线图实例”中，我们主要学习如何通过JavaScript与VML结合，在不支持SVG（Scalable Vector Graphics）的老版IE浏览器中绘制动态曲线图。SVG是另一种更现代的矢量图形标准...

    js vml画流程图

    在JavaScript中，VML主要通过DOM（Document Object Model）操作来实现，可以创建VML元素，设置其属性，以及响应用户的交互。VML的优点在于其在老版本的Internet Explorer浏览器中表现优秀，因为这些浏览器不支持更...

    vML框架最新版

    它们可能包含了创建、修改和操作vML元素的函数，比如画圆（根据文件名推测可能与绘制椭圆相关）。JavaScript库的使用使得在网页上动态生成和更新矢量图形变得更加方便。这两个版本可能代表了不同版本的库，或者是库...

    vml+javascript直接在浏览器中绘制动态曲线图实例(源码-+Think+in+vml++vml+极道教程)

    VML是基于XML的语言，因此可以被XSLT处理，也可以通过JavaScript进行动态操作。 这个"vml+javascript直接在浏览器中绘制动态曲线图实例"提供了源码，可以帮助我们理解如何使用VML和JavaScript实现这一功能。首先，...

    vml 极道教程 详细的vml教程

    在"vml极道教程"中，你可以期待学习如何创建和操作VML图形，如何在HTML文档中嵌入VML，以及如何通过JavaScript进行交互式设计。此外，教程可能还会讲解如何处理兼容性问题，因为VML主要在Internet Explorer浏览器中...

    vml开发的流程图

    "ellipserVML.js"和"ellipserVML2.js"是两个JavaScript文件，它们很可能包含了实现流程图功能的核心代码。这些文件可能包含了定义图形的函数，如椭圆（可能用于流程图的节点）、连接线（表示流程的流向）等。...

    vml柱状图 vml html jquery

    可以考虑使用jQuery的`.each()`函数批量处理DOM操作，或者使用更高效的JavaScript原生方法。 9. **测试与调试**： 使用浏览器的开发者工具检查元素和CSS样式，确保柱状图在各种屏幕尺寸和浏览器下表现良好。同时，...

    vml+js实现的框图编辑器

    在这个特定的项目中，"vml+js实现的框图编辑器"利用了两种关键技术：VML（Vector Markup Language）和JavaScript，来构建一个能够执行多种操作的交互式编辑器。 VML，全称为矢量标记语言，是一种用于在网页上描绘...

Magicbox
Global site tag (gtag.js) - Google Analytics