博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS操作VML
阅读量:7221 次
发布时间:2019-06-29

本文共 8005 字,大约阅读时间需要 26 分钟。

hot3.png

可以用鼠标拖动这条线,效果如图: 

17185348_wmvY.jpg 
说明:还有一些bug,定位还不是很准确。 
代码:

v\:*{behavior:url(#default#VML);}
/*为数组(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){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[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 = '
';          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 = '
';    var testPloyline = document.getElementById('testPolyline');    polylineMap.push(new Polyline(testPloyline.points.value, testPloyline));}

转载于:https://my.oschina.net/darkness/blog/357339

你可能感兴趣的文章
projectEuler pro10
查看>>
聚焦“云开发圆桌论坛”,大前端Serverless大佬们释放了这些讯号!
查看>>
数学模板
查看>>
c#中英文混合字符串截取指定长度
查看>>
.NetCore应用多个target framework
查看>>
pdfminer获取整页文本
查看>>
windows服务器多端口Redis安装步骤
查看>>
第二次作业心得
查看>>
爬虫——请求库之requests
查看>>
android子线程更新UI,与主Thread一起工作
查看>>
50行实现简易HTTP服务器
查看>>
细讲递归(recursion)
查看>>
进程和进程间通信
查看>>
微处理器的两种结构比较
查看>>
ORACLE EXPIRED(GRACE)
查看>>
Markdown应用样例
查看>>
多文本框的值得存放和赋值
查看>>
Linux中计划任务执行脚本crontab-简洁版
查看>>
Java - IO
查看>>
安卓app中嵌入一个H5页面,当手机系统设置字体变大时,如何使H5页面的字体不会随用户自己调整的系统字体变化而变化?...
查看>>