vml的简易画板_3

最新推荐文章于 2017-12-07 22:43:35 发布

anfeng5852

最新推荐文章于 2017-12-07 22:43:35 发布

阅读量87

点赞数

原文链接：http://www.cnblogs.com/Andmm/archive/2009/12/04/1617011.html

版权

/*----------------绘图引擎--------------------*/

//初始化绘图区域 0-未选择画笔
//画笔--1、直线--2、矩形--3、圆形--4、弧线--5、文本--6、路径文本--7、多边型--8、选择
//操作--10、拖放--11、缩放--12、删除--13、旋转--14、边框

//initpen_name-画笔类型参数
function draw_init(initpen_name)
{
pen_name=initpen_name;

    //清除画板提示
    var objmessage=document.getElementById("messagebox");
    if(objmessage!=null)
    {
        document.all.grapharea.removeChild(objmessage);
    }

    //直线
    if(initpen_name==1)
    {

　　　//读入输入区域
inputarea_line();

　　　//改变光标指针
document.all.grapharea.style.cursor="crosshair";

　　　//画图提示（当前操作和光标的位置）
        drawmessage.innerHTML="当前操作：直线 |";
    }

    //矩形
    if(initpen_name==2)
    {
        inputarea_rect();
        document.all.grapharea.style.cursor="crosshair";
        drawmessage.innerHTML="当前操作：矩形 |";
    }

    //圆形
    if(initpen_name==3)
    {
        inputarea_rect();
        document.all.grapharea.style.cursor="crosshair";
        drawmessage.innerHTML="当前操作：圆形 |";
    }

    //弧线
    if(initpen_name==4)
    {
        inputarea_arc();
        document.all.grapharea.style.cursor="crosshair";
        drawmessage.innerHTML="当前操作：弧线 |";
    }

    //文本
    if(initpen_name==5)
    {
        inputarea_text();
        document.all.grapharea.style.cursor="crosshair";
        drawmessage.innerHTML="当前操作：文本 |";
    }

    //路径文本
    if(initpen_name==6)
    {
        inputarea_textpath();
        document.all.grapharea.style.cursor="hand";
        drawmessage.innerHTML="当前操作：路径文本 |";
    }

    //多边型
    if(initpen_name==7)
    {
        inputarea_polyline();
        polyline_flag=false;
        polyline_sx=null;
        polyline_sy=null;
        polyline_arr=new Array();
        obj_polylineid=null;
        document.all.grapharea.style.cursor="crosshair";
        drawmessage.innerHTML="当前操作：多边型 |";
    }

    //选择
    if(initpen_name==8)
    {
        document.all.grapharea.style.cursor="hand";
        drawmessage.innerHTML="当前操作：对象选择 |";
    }

    //拖放
    if(initpen_name==10)
    {
        document.all.grapharea.style.cursor="hand";
        drawmessage.innerHTML="当前操作：拖放 |";
    }

    //缩放
    if(initpen_name==11)
    {
        document.all.grapharea.style.cursor="move";
        drawmessage.innerHTML="当前操作：缩放 |";
    }

    //旋转-部分图形不允许旋转
    if(initpen_name==13)
    {
        document.all.grapharea.style.cursor="move";
        drawmessage.innerHTML="当前操作：旋转 |";
    }

    //删除
    if(initpen_name==12)
    {
        document.all.grapharea.style.cursor="hand";
        drawmessage.innerHTML="当前操作：删除 |";
    }

    //边框
    if(initpen_name==14)
    {
        inputarea_stroke();
        document.all.grapharea.style.cursor="hand";
        drawmessage.innerHTML="当前操作：边框 |";
    }

    //3D立体-未实现
    if(initpen_name==15)
    {
        document.all.grapharea.style.cursor="hand";
        drawmessage.innerHTML="当前操作：3D立体 |";
    }
}

//落笔
document.all.grapharea.οnmοusedοwn=draw_down;
//绘画
document.all.grapharea.οnmοusemοve=draw_move;
//抬笔-因为拖动的画工程图不够精确，未实现，可扩展为拖动指针画图。

//document.all.grapharea.οnmοusemοve=draw_up;

function draw_down()
{

//右键取消绘图，并闭合多边形
   if(event.button==2)
   {
        if(pen_name==7 && obj_currentid!=null && polyline_arr!=null)
        {
            //闭合多边型
             if(document.all.input_isclose.checked)
             {
                var objmove=document.getElementById(obj_currentid);

                var strpoints=polyline_arr[0]+" l"+polyline_arr[1]+",";

                for(var i=2;i<polyline_arr.length;i++)
                {
                    if(i+1<polyline_arr.length)
                    {
                        strpoints+=polyline_arr[i]+",";
                    }
                    else
                    {
                        strpoints+=polyline_arr[i];
                    }
                }

                objmove.path=strpoints+",0,0 e";
             }

            //结束初始化
            polyline_sx=null;
            polyline_sy=null;
            polyline_flag=false;
            polyline_arr=new Array();
            obj_polylineid=null;
        }

     //终止拖动
     if(pen_name==10)
     {
        move_flag=false;
     }

     //停止缩放
     if(pen_name==11)
     {
        zoom_flag=false;
     }

     //停止旋转
     if(pen_name==13)
     {
        rotate_flag=false;
     }

     //清除路径文本对象
     if(pen_name==6)
     {
        obj_pathtextid=null;
     }

     //清除边框对象
     if(pen_name==14)
     {
        obj_strokeid=null;
     }

   }

//左键点击画图

//基本思想--获取输入的内容，初始化绘图数据。

//创建元素对象-访问元素改变属性。

//切记不要创建含子元素的复合元素对象。子元素必须单独创建再通过applyElement加入。

//polyline是个特殊的内容，由此看出vml的局限。画多边形必须用<v:shape>标记。用<v:polyline>会出现

//不可预期的内容。
   if(event.button==1)
   {
     //绘图笔
     if(pen_name==1 || pen_name==2 || pen_name==3 || pen_name==4 || pen_name==5
            || pen_name==6 || pen_name==7 || pen_name==14){

         obj_zindex++;

         //画直线
         if(pen_name==1 && !isNaN(document.all.input_startX.value) && !isNaN(document.all.input_startY.value)
                && !isNaN(document.all.input_endX.value) && !isNaN(document.all.input_endY.value))
         {
             pen_top=event.clientY;
             pen_left=event.clientX;

             if(!isNaN(document.all.input_strokewidth.value) && parseInt(document.all.input_strokewidth.value)<11)
             {
                pen_strokewidth=document.all.input_strokewidth.value;
             }

                //初始化当前多边型
                polyline_flag=true;
                polyline_arr.push("m0,0");
             }
         }//if-7

         //画边框
         if(pen_name==14 && obj_strokeid!=null)
         {
             if(!isNaN(document.all.input_strokewidth.value) && parseInt(document.all.input_strokewidth.value)<11)
             {
                    pen_strokewidth=document.all.input_strokewidth.value;
             }

             var obj_dashstyle=document.all.select_dashstyle.options[document.all.select_dashstyle.options.selectedIndex].value;
             var obj_opacity=document.all.select_opacity.options[document.all.select_opacity.options.selectedIndex].value;
             var obj_joinstyle=document.all.select_joinstyle.options[document.all.select_joinstyle.options.selectedIndex].value;
             var obj_endcap=document.all.select_endcap.options[document.all.select_endcap.options.selectedIndex].value;

            if(obj_strokeid.indexOf("line")==0)
            {
                var obji=obj_strokeid.indexOf("_");
                var objstroke=document.getElementById("linstroke_"+obj_strokeid.substr(obji+1,obj_strokeid.length-obji-1));

                objstroke.dashstyle=obj_dashstyle;
                objstroke.startarrowwidth=pen_strokewidth;
                objstroke.endarrowwidth=pen_strokewidth;
                objstroke.opacity=obj_opacity;
                objstroke.joinstyle=obj_joinstyle;
                objstroke.endcap=obj_endcap;
                objstroke.color=pen_strokecolor;
            }

            if(obj_strokeid.indexOf("rect")==0 || obj_strokeid.indexOf("oval")==0
                    || obj_strokeid.indexOf("arc")==0 || obj_strokeid.indexOf("polylin")==0)
            {
                 var objmove=document.getElementById(obj_strokeid);
                //子元素
                var objstroke=document.createElement("<v:stroke opacity=\"1\"/>");

                objstroke.dashstyle=obj_dashstyle;
                objstroke.opacity=obj_opacity;
                objstroke.joinstyle=obj_joinstyle;
                objstroke.endcap=obj_endcap;
                objstroke.color=pen_strokecolor;
                objstroke.weight=pen_strokewidth;

               objmove.applyElement(objstroke,"inside");
             }
         }//if-14

     }//if-绘图笔

     //终止拖动
     if(pen_name==10)
     {
        move_flag=false;
     }

     //停止缩放
     if(pen_name==11)
     {
        zoom_flag=false;
     }

     //停止旋转
     if(pen_name==13)
     {
        rotate_flag=false;
     }

//无笔类型的时候，vml提示
     if(pen_name==0)
     {
        var objmessage="<v:roundrect style=\"Z-INDEX:101;left:319px;width:284px;top:240px;height:80px;"+
                        "position:absolute;\" fillcolor=\"#66bbee\" arcsize=\"0.15\" id=\"messagebox\">"+
                        "<v:shadow on=\"T\" type=\"single\" color=\"#b3b3b3\" offset=\"5px,5px\"/>"+
                        "<v:Textbox inset=\"5pt,5pt,5pt,5pt\" print=\"t\">"+
                        "请选择绘图画笔类型。绘图基本操作：<br/>"+
                        "1、选择左侧画笔类型。<br/>2、填写下方图形对象属性。<br/>3、选择左侧画笔操作调整图形对象。</v:Textbox>"+
                        "</v:roundrect>"

        document.all.grapharea.innerHTML=objmessage;
     }//if-0
   }//if-event
}

//移动光标情况下的处理

//vml的有些笔类型是不可以缩放和旋转，当然可以通过其他方法实现，比如<v:group>

//对象操作选择

//此方法在创建绘图元素时候，作为onclick事件的响应函数
function operate_select(obj_operateid)
{
   //选择拖放对象
   if(pen_name==10 && !move_flag){
       if(obj_currentid==obj_operateid)
       {
           move_flag=false;
           obj_currentid=null;
       }
       else
       {
           obj_currentid=obj_operateid;
           var objmove=document.getElementById(obj_currentid);
           objmove.style.left=event.clientX+"px";
           objmove.style.top=event.clientY+"px";
           move_flag=true;
       }
   }

   //选择缩放对象
   if(pen_name==11 && !zoom_flag){
       if(obj_currentid==obj_operateid)
       {
           zoom_flag=false;
           obj_currentid=null;
       }
       else
       {
           obj_currentid=obj_operateid;
           var objmove=document.getElementById(obj_currentid);
           zoom_flag=true;
       }
   }

   //选择旋转对象
   if(pen_name==13 && !rotate_flag){
       obj_currentid=obj_operateid;
       var objmove=document.getElementById(obj_currentid);
       rotate_flag=true;
   }

   //选择删除对象
   if(pen_name==12){
       obj_currentid=obj_operateid;
       var objmove=document.getElementById(obj_currentid);
       if(confirm("确定要删除当前对象吗？"))
       {
           document.all.grapharea.removeChild(objmove);
       }
   }

   //路径文本
   if(pen_name==6){
        obj_pathtextid=obj_operateid;
   }

   //选择
   if(pen_name==8){
        obj_currentid=obj_operateid;
        alert(document.all.grapharea.innerHTML);
   }

   //边框
   if(pen_name==14){
        obj_strokeid=obj_operateid;
   }
}

//像素级移动
function move_object(objmovetype)
{
    pen_name=8;

    if(obj_currentid!=null)
    {
        var objmove=document.getElementById(obj_currentid);
        var strleft=objmove.style.left;
        var strtop=objmove.style.top;

        if(strleft.indexOf("px")>-1)
        {
            strleft=strleft.substr(0,strleft.length-2);
        }

        if(strtop.indexOf("px")>-1)
        {
            strtop=strtop.substr(0,strtop.length-2);
        }

        if(objmovetype==1)
        {
            objmove.style.top=(parseInt(strtop)-1).toString()+"px";
            drawmessage.innerHTML="当前操作：上移 |";
        }

        if(objmovetype==2)
        {
            objmove.style.top=(parseInt(strtop)+1).toString()+"px";
            drawmessage.innerHTML="当前操作：下移 |";
        }

        if(objmovetype==3)
        {
            objmove.style.left=(parseInt(strleft)-1).toString()+"px";
            drawmessage.innerHTML="当前操作：左移 |";
        }

        if(objmovetype==4)
        {
            objmove.style.left=(parseInt(strleft)+1).toString()+"px";
            drawmessage.innerHTML="当前操作：右移 |";
        }
    }
}