VML3

来源：互联网发布：htpp tjsgtx.cn js 编辑：程序博客网时间：2024/06/04 18:05

<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.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, currentAbsoluteY));
            }

            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){
debugger;
    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 * 3/4 - _polyLine.pointsArray[sidePositionIndex].absoluteX);
        var newPositionY = (event.offsetY * 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"
            说明赋值失败，可就是不知道那边有错误
        */
       currentActiveLine.points.value = currentActiveLine.points.value.replace(firstPosition + ',' + secondPosition, newPosition);

        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(){

    var testPloyline = document.getElementById('testPolyline');
    polylineMap.push(new Polyline(testPloyline.points.value, testPloyline));
}
</script>
<body onmouseup="doMouseUp(this);">

<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="0px,0px,450px,450px" filled="f" fillcolor="white"/>

<div id="debug" />

</body>
</html>