vml的简易画板_3

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

//初始化绘图区域 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.onmousedown=draw_down;
//绘画
document.all.grapharea.onmousemove=draw_move;
//抬笔-因为拖动的画工程图不够精确,未实现,可扩展为拖动指针画图。

//document.all.grapharea.onmousemove=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;
             }

             var objline=document.createElement(
                "<v:line style=\"Z-INDEX:"+obj_zindex.toString()+";left:"+pen_left+"px;top:"+pen_top+
                    "px;position:absolute;\" from=\""+document.all.input_startX.value+
                    ","+document.all.input_startY.value+
                    "\" to=\""+document.all.input_endX.value+","+document.all.input_endY.value+"\" "+
                    "id=\"line_"+obj_zindex.toString()+"\" strokecolor=\""+pen_color+"\" "+
                    "strokeweight=\""+pen_strokewidth+"px\" onclick=operate_select(this.id) \"></v:line>");
                         
             //子元素
             var objlinearrow=document.createElement(
                    "<v:stroke id=\"linstroke_"+obj_zindex.toString()+"\" opacity=\"1\" startarrow=\"none\" endarrow=\"none\"/>");
                   
             if(document.all.arrow_start.checked)
             {
                    objlinearrow.startarrow="classic";
             }
            
             if(document.all.arrow_end.checked)
             {
                    objlinearrow.endarrow="classic";
             }
            
             if(document.all.arrow_start.checked || document.all.arrow_end.checked)
             {
                objline.applyElement(objlinearrow,"inside");
             }
            
             //当前对象id
             obj_currentid=objline.id;
                         
             document.all.grapharea.appendChild(objline);
         }//if-1
        
         //画矩形      
         if(pen_name==2 && !isNaN(document.all.input_width.value) && !isNaN(document.all.input_height.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;
             }

             var objrect=document.createElement(
                "<v:rect style=\"Z-INDEX:"+obj_zindex.toString()+";left:"+pen_left+"px;top:"+pen_top+
                    "px;position:absolute;width:"+document.all.input_width.value+
                    "px;height:"+document.all.input_height.value+"px;\" strokeweight=\"1px\" "+
                    "id=\"rect_"+obj_zindex.toString()+"\" onclick=operate_select(this.id) \"></v:rect>");
                   
             objrect.strokecolor=pen_color;
             //边框
             if(document.all.input_isstroke.checked)
             {
                objrect.strokecolor=pen_strokecolor;
                objrect.strokeweight=pen_strokewidth+"px";
             }
            
             //填充
             if(document.all.input_isfill.checked)
             {
                objrect.fillcolor=pen_fillcolor;
             }
            
             //当前对象id
             obj_currentid=objrect.id;
                         
             document.all.grapharea.appendChild(objrect);
         }//if-2
        
         //画圆形     
         if(pen_name==3 && !isNaN(document.all.input_width.value) && !isNaN(document.all.input_height.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;
             }

             var objoval=document.createElement(
                "<v:oval style=\"Z-INDEX:"+obj_zindex.toString()+";left:"+pen_left+"px;top:"+pen_top+
                    "px;position:absolute;width:"+document.all.input_width.value+
                    "px;height:"+document.all.input_height.value+"px;\" strokeweight=\"1px\" "+
                    "id=\"oval_"+obj_zindex.toString()+"\" onclick=operate_select(this.id) \"></v:oval>");
                   
             objoval.strokecolor=pen_color;
             //边框
             if(document.all.input_isstroke.checked)
             {
                objoval.strokecolor=pen_strokecolor;
                objoval.strokeweight=pen_strokewidth+"px";
             }
            
             //填充
             if(document.all.input_isfill.checked)
             {
                objoval.fillcolor=pen_fillcolor;
                objoval.filled="t"
             }
            
             //当前对象id
             obj_currentid=objoval.id;
                         
             document.all.grapharea.appendChild(objoval);
         }//if-3
        
         //画弧线     
         if(pen_name==4 && !isNaN(document.all.input_startangle.value) && !isNaN(document.all.input_endangle.value)
                && !isNaN(document.all.input_width.value) && !isNaN(document.all.input_height.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;
             }

             var objarc=document.createElement(
                "<v:arc style=\"Z-INDEX:"+obj_zindex.toString()+";left:"+pen_left+"px;top:"+pen_top+
                    "px;position:absolute;width:"+document.all.input_width.value+
                    "px;height:"+document.all.input_height.value+"px;\" strokeweight=\"1px\" "+
                    "StartAngle=\""+document.all.input_startangle.value+
                    "\" EndAngle=\""+document.all.input_endangle.value+"\" "+
                    "id=\"arc_"+obj_zindex.toString()+"\" onclick=operate_select(this.id) \"></v:arc>");
                   
             objarc.strokecolor=pen_color;
             //边框
             if(document.all.input_isstroke.checked)
             {
                objarc.strokecolor=pen_strokecolor;
                objarc.strokeweight=pen_strokewidth+"px";
             }
            
             //填充
             if(document.all.input_isfill.checked)
             {
                objarc.fillcolor=pen_fillcolor;
                objarc.filled="t"
             }
            
             //当前对象id
             obj_currentid=objarc.id;
                         
             document.all.grapharea.appendChild(objarc);
         }//if-4
        
         //画文本     
         if(pen_name==5 && document.all.input_text.value!="" && document.all.input_text.value!=" ")
         {
             pen_top=event.clientY;
             pen_left=event.clientX;
             var strfontname="宋体";
             var strfontsize="12px";
            
             if(document.all.input_fontname.value!="" && document.all.input_fontname.value!=" ")
             {
                strfontname=document.all.input_fontname.value;
             }
            
             if(document.all.input_fontsize.value!="" && document.all.input_fontsize.value!=" ")
             {
                strfontsize=document.all.input_fontsize.value+"px";
             }

             var objtext=document.createElement(
                "<v:Textbox style=\"Z-INDEX:"+obj_zindex.toString()+";left:"+pen_left+"px;top:"+pen_top+
                    "px;position:absolute;width:32px;color:"+pen_color+
                    ";FONT-SIZE:"+strfontsize+";FONT-FAMILY:"+strfontname+";white-space: nowrap;\" "+
                    "inset=\"5pt,5pt,5pt,5pt\" print=\"t\" "+
                    "id=\"text_"+obj_zindex.toString()+"\" onclick=operate_select(this.id) \"></v:Textbox>");
            
             //换行
             if(document.all.input_iswrap.checked)
             {
                objtext.style.whiteSpace="normal";
             }
            
             //写入文本
             objtext.innerText=document.all.input_text.value;          
             //当前对象id
             obj_currentid=objtext.id;
                         
             document.all.grapharea.appendChild(objtext);
         }//if-5
        
         //画路径文本
         if(pen_name==6 && obj_pathtextid!=null &&
            document.all.input_text.value!="" && document.all.input_text.value!=" ")
         {
            var objpathtext=document.getElementById(obj_pathtextid);
           
            var strfontname="宋体";
            var strfontsize="12px";
            
             if(document.all.input_fontname.value!="" && document.all.input_fontname.value!=" ")
             {
                strfontname=document.all.input_fontname.value;
             }
            
             if(document.all.input_fontsize.value!="" && document.all.input_fontsize.value!=" ")
             {
                strfontsize=document.all.input_fontsize.value+"px";
             }
           
            //子元素
             var objpath=document.createElement("<v:path textpathok=\"t\" />");
             var objtextpath=document.createElement("<v:textpath style=\"FONT-SIZE:"+strfontsize+
                    ";white-space: nowrap;FONT-FAMILY:"+strfontname+"\" "+
                    "on=\"t\" fitpath=\"f\" string=\""+document.all.input_text.value+"\"/>");
                   
             objpathtext.applyElement(objtextpath,"inside");
             objtextpath.insertAdjacentElement("beforeBegin",objpath);
            
             //换行
             if(document.all.input_iswrap.checked)
             {
                objtextpath.style.whiteSpace="normal";
             }
            
             //缩放
             if(document.all.input_iszoom.checked)
             {
                objtextpath.fitpath="t";
             }
                         
            document.all.grapharea.appendChild(objpathtext);
                                
            obj_pathtextid=null;
         }//if-6
        
         //画多边型
         if(pen_name==7)
         {
             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;
             }
                
             if(polyline_flag)
             {
                var objmove=document.getElementById(obj_polylineid);
               
                var strpoint_x=event.clientX-polyline_sx;
                var strpoint_y=event.clientY-polyline_sy;
               
                //按坐标画多边型
                if(document.all.input_newX.value!=0 || document.all.input_newY.value!=0)
                {
                    strpoint_x=document.all.input_newX.value;
                    strpoint_y=document.all.input_newY.value;
                }
               
                polyline_arr.push(strpoint_x+","+strpoint_y);
               
                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];
                    }
                }
               
                strpoints+=" e";
                                                                          
                objmove.path=strpoints;
               
                var strdrawmessage=drawmessage.innerHTML;
                strdrawmessage=strdrawmessage.substr(0,strdrawmessage.indexOf("|")+1);
                drawmessage.innerHTML=strdrawmessage+
                    " ("+event.clientX.toString()+","+event.clientY.toString()+")"+
                    " | points("+strpoints+")";
               
                document.all.input_newX.value=0;
                document.all.input_newY.value=0;
             }
             else
             {
                 polyline_sx=pen_left;
                 polyline_sy=pen_top;
                
                 var objpolyline=document.createElement(
                    "<v:shape style=\"Z-INDEX:"+obj_zindex.toString()+";left:"+polyline_sx+"px;top:"+polyline_sy+
                        "px;position:absolute;width:100px;height:100px;\" path=\"m0,0 e\" coordsize=\"100,100\" "+
                        "id=\"polylin_"+obj_zindex.toString()+"\" filled=\"f\" strokecolor=\""+pen_color+"\" "+
                        "strokeweight=\""+pen_strokewidth+"px\" onclick=operate_select(this.id) \"></v:shape>");
                
                 objpolyline.strokecolor=pen_color;
                 //边框
                 if(document.all.input_isstroke.checked)
                 {
                    objpolyline.strokecolor=pen_strokecolor;
                    objpolyline.strokeweight=pen_strokewidth+"px";
                 }
                
                 //填充
                 if(document.all.input_isfill.checked)
                 {
                    objpolyline.fillcolor=pen_fillcolor;
                    objpolyline.filled="t"
                 }
                
                 //当前对象id
                obj_currentid=objpolyline.id;
                obj_polylineid=objpolyline.id;
                         
                document.all.grapharea.appendChild(objpolyline);

                //初始化当前多边型
                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>

function draw_move()
{
   //光标坐标
   var strdrawmessage=drawmessage.innerHTML;
   strdrawmessage=strdrawmessage.substr(0,strdrawmessage.indexOf("|")+1);
   drawmessage.innerHTML=strdrawmessage+" ("+event.clientX.toString()+","+event.clientY.toString()+")";
   
    //拖放
   if(pen_name==10 && move_flag && obj_currentid!=null){
       var objmove=document.getElementById(obj_currentid);
       objmove.style.left=event.clientX+"px";
       objmove.style.top=event.clientY+"px";
   }
  
   //缩放
   if(pen_name==11 && zoom_flag && 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(obj_currentid.indexOf("line")==0)
        {
            objmove.to="\""+(event.clientX*0.75-strleft*0.75).toString()+"pt,"+
                    (event.clientY*0.75-strtop*0.75).toString()+"pt\"";
        }
       
        //矩形
        if(obj_currentid.indexOf("rect")==0 || obj_currentid.indexOf("oval")==0
            || obj_currentid.indexOf("arc")==0)
        {
            objmove.style.width=Math.abs(event.clientX-strleft)+"px";         
            objmove.style.height=Math.abs(event.clientY-strtop)+"px";
        }
   }
  
   //旋转
   if(pen_name==13 && rotate_flag){
        var objmove=document.getElementById(obj_currentid);
       
        //直线
        if(obj_currentid.indexOf("line")==0)
        {
            var strfrom=new String(objmove.from);
            var stri=strfrom.indexOf(",");
            var strfrom_x=strfrom.substring(0,stri-2);
            var strfrom_y=strfrom.substring(stri+1,strfrom.length-2);
           
            var strto=new String(objmove.to);
            stri=strto.indexOf(",");
            var strto_x=strto.substring(0,stri-2);
            var strto_y=strto.substring(stri+1,strto.length-2);
             
            var strfromto_x=(parseFloat(strto_x)+parseFloat(strfrom_x))*0.5;
            var strfromto_y=(parseFloat(strto_y)+parseFloat(strfrom_y))*0.5;
           
            if(event.clientX*0.75>strfromto_x)
            {
                objmove.style.rotation=Math.atan((event.clientY*0.75-strfromto_y)/
                                (event.clientX*0.75-strfromto_x))*180/3.14;
            }
            else
            {
                objmove.style.rotation=180+Math.atan((event.clientY*0.75-strfromto_y)/
                                (event.clientX*0.75-strfromto_x))*180/3.14;
            }
        }
       
        //矩形
        if(obj_currentid.indexOf("rect")==0 || obj_currentid.indexOf("oval")==0
                || obj_currentid.indexOf("arc")==0)
        {
            var strwidth=objmove.style.width;
            var strheight=objmove.style.height;
           
            if(strwidth.indexOf("px")>-1)
            {strwidth=strwidth.substr(0,strwidth.length-2);}
           
            if(strheight.indexOf("px")>-1)
            {strheight=strheight.substr(0,strheight.length-2);}
           
            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);}
             
            var strrect_x=parseFloat(strleft)+parseFloat(strwidth)*0.5;
            var strrect_y=parseFloat(strtop)+parseFloat(strheight)*0.5;
           
            if(event.clientX>strrect_x)
            {
                objmove.style.rotation=Math.atan((event.clientY-strrect_y)/
                                (event.clientX-strrect_x))*180/3.14;
            }
            else
            {
                objmove.style.rotation=180+Math.atan((event.clientY-strrect_y)/
                                (event.clientX-strrect_x))*180/3.14;
            }//if-else
        }//矩形
   }//旋转
  
   //多边型的模拟线
   if(pen_name==7 && polyline_flag && obj_currentid!=null)
   {
        if(obj_currentid.indexOf("polylin")==0)
        {
            var objmove=document.getElementById(obj_currentid);
        }
   }
}

//对象操作选择

//此方法在创建绘图元素时候,作为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="当前操作:右移 |";
        }
    }
}

posted @ 2009-12-04 14:49  天书  阅读(699)  评论(0编辑  收藏  举报