<script type="text/javascript"> 
debugger;
var bi=4 //定义当前使用的画笔工具，3为铅笔 
var color1=\'#000000\',color2=\'#000000\',size1=0 //定义缺剩的画笔颜色及画笔填充颜色和笔边粗度 
var xx=0,yy=0,zz=1000 //定义缺剩的X及Y坐标 
var isok=false //区分画笔起点是否在DIV内，超出范围则无效 
var moveobj=null,ckleft=0,cktop=0,ckwid=0,ckhei=0,ckto="" //被移动物件、调整大小物件的引用 
var poly1=null,oldvalue="",oldx=0,oldy=0 //为了完成记忆点，创建一个可折式线段 
var gaojiobj=null //为了完成“高级”功能，绑定被修改对象 
var thisobj=null //为了完成各种基本编辑功能，如“置前”“复制”“删除”等 
var zz2=1000 //为完成“置后”功能，zz2为负数 
var div1= document.getElementById("div1");
div1.onmousedown=function(){ 
div1.setCapture();color1=huabiyanse.value;color2=huabibeijing.value;isok=true;size1=bibiancudu.options[bibiancudu.selectedIndex].text 
xx=event.x;yy=event.y;zz+=1 
for(i=0;i<huabi.length;i++){if(huabi[i].className=="bon1"){bi=i+1;break}} 
line1.strokecolor=color1;line1.strokeweight=size1;oval1.strokeweight=size1;oval1.strokecolor=color1 
oval1.fillcolor=color2;rect1.strokeweight=size1;rect1.strokecolor=color1 
rect1.fillcolor=color2;roundrect1.strokeweight=size1;roundrect1.strokecolor=color1 
roundrect1.fillcolor=color2; 
if(event.button==1){ 
switch(bi){ 
case 1: //选移 
if(event.srcElement.parentElement.id=="div1"){moveobj=event.srcElement;ckleft=xx-parseInt(moveobj.style.left);cktop=yy-parseInt(moveobj.style.top)} 
break; 
case 2: //调大小 
if(event.srcElement.parentElement.id=="div1"){moveobj=event.srcElement; 
ckleft=parseInt(moveobj.style.left);cktop=parseInt(moveobj.style.top);ckwid=moveobj.offsetWidth;ckhei=moveobj.offsetHeight} 
break; 
case 3: //扔出 
break; 
case 4: //钢笔 
line1.style.left=event.x;line1.style.top=event.y;line1.to="0,0";line1.style.display="" 
break; 
case 5: //记忆点 
if(poly1==null){ 
oldx=xx;oldy=yy 
poly1=div1.appendChild(document.createElement("<v:polyline points=\'0 0 0 0\' style=\'position:absolute;z-index:"+zz+";left:"+xx+";top:"+yy+";\' strokecolor=\'"+color1+"\' strokeweight=\'"+size1+"\' fillcolor=\'"+color2+"\'/>")) 
} 
if(oldx-tempx<1&&oldy-tempy<1)oldvalue=poly1.points.value.replace(/,/g,\' \') 
break; 
case 6: //圆形 
oval1.style.left=event.x;oval1.style.top=event.y;oval1.style.width=0;oval1.style.height=0;oval1.style.display="" 
break; 
case 7: //长方形 
rect1.style.left=event.x;rect1.style.top=event.y;rect1.style.width=0;rect1.style.height=0;rect1.style.display="" 
break; 
case 8: //圆矩形 
roundrect1.style.left=event.x;roundrect1.style.top=event.y;roundrect1.style.width=0;roundrect1.style.height=0;roundrect1.style.display="" 
break; 
case 9: //文字 
wenzi1.style.left=event.x;wenzi1.style.top=event.y;wenzi1.style.display="" 
break; 
case 10: //图片 
tupian1.style.left=event.x;tupian1.style.top=event.y;tupian1.style.display="" 
break; 
} 
}} 
div1.onmousemove=function(){ 
tempx=event.x;tempy=event.y;temp1=0;temp2=0 
zuobiao.value=tempx-allform1.offsetLeft-8+","+parseInt(tempy-toptd1.offsetHeight-7) 
if(bi==5&&poly1!=null){ //记忆点 
if(oldx-tempx<0&&oldy-tempy<0)poly1.points.value=oldvalue+" "+(tempx-oldx)+" "+(tempy-oldy) 
} 
if(event.button==1){ 
switch(bi){ 
case 1: //选移 
if(moveobj!=null){moveobj.style.left=tempx-ckleft;moveobj.style.top=tempy-cktop} 
break; 
case 2: //调大小 
if(moveobj!=null){ 
if(moveobj.tagName!="line"){ 
if(tempx>ckleft){moveobj.style.width=tempx-ckleft}else{moveobj.style.left=tempx;moveobj.style.width=ckleft-tempx} 
if(tempy>cktop){moveobj.style.height=tempy-cktop}else{moveobj.style.top=tempy;moveobj.style.height=cktop-tempy} 
}else{moveobj.to=parseInt(tempx-ckleft)+","+parseInt(tempy-cktop);if(ckto=="")ckto=parseInt(tempx-ckleft)+","+parseInt(tempy-cktop);} 
} 
break; 
case 4: //钢笔 
line1.to=(tempx-xx)+","+(tempy-yy) 
break; 
case 6: //圆形 
if(tempx-xx<0){oval1.style.left=event.x;oval1.style.width=(xx-tempx)}else{oval1.style.width=(tempx-xx)} 
if(tempy-yy<0){oval1.style.top=event.y;oval1.style.height=(yy-tempy)}else{oval1.style.height=(tempy-yy)} 
break; 
case 7: //长方形 
if(tempx-xx<0){rect1.style.left=event.x;rect1.style.width=(xx-tempx)}else{rect1.style.width=(tempx-xx)} 
if(tempy-yy<0){rect1.style.top=event.y;rect1.style.height=(yy-tempy)}else{rect1.style.height=(tempy-yy)} 
break; 
case 8: //圆矩形 
if(tempx-xx<0){roundrect1.style.left=event.x;roundrect1.style.width=(xx-tempx)}else{roundrect1.style.width=(tempx-xx)} 
if(tempy-yy<0){roundrect1.style.top=event.y;roundrect1.style.height=(yy-tempy)}else{roundrect1.style.height=(tempy-yy)} 
break; 
}}} 
div1.onmouseup=function(){ 
document.releaseCapture();if(isok==false){forerr();return false};isok=false;menu1.style.display=\'none\' 
tempx=event.x;tempy=event.y;divwid=div1.offsetWidth;divhei=div1.offsetHeight 
if(tempx>allform1.offsetLeft+divwid+5||tempx<allform1.offsetLeft+5){forerr();return alert("X坐标越界")} 
if(tempy>allform1.offsetTop+toptd1.offsetHeight+divhei+5||tempy<allform1.offsetTop+toptd1.offsetHeight+5){forerr();return alert("Y坐标越界")} 
if(event.button==2&&bi==5&&poly1!=null){ 
poly1.points.value=oldvalue;oldvalue="";poly1=null; 
}else if(event.srcElement.parentElement.id=="div1"&&event.button==2){menu1.style.left=tempx;menu1.style.top=tempy;menu1.style.display=\'\';thisobj=event.srcElement} 
if(event.button==1){ 
switch(bi){ 
case 1: //选移 
if(moveobj!=null&&parseInt(moveobj.style.left)<allform1.offsetLeft+5){forerr();return alert("被移动物体X1超出界限")} 
if(moveobj!=null&&parseInt(moveobj.style.left)+moveobj.offsetWidth-2>allform1.offsetLeft+divwid+5){forerr();return alert("被移动物体X2超出界限")} 
if(moveobj!=null&&parseInt(moveobj.style.top)<allform1.offsetTop+toptd1.offsetHeight+5){forerr();return alert("被移动物体Y1超出界限")} 
if(moveobj!=null&&parseInt(moveobj.style.top)+moveobj.offsetHeight-2>allform1.offsetTop+toptd1.offsetHeight+divhei+3){forerr();return alert("被移动物体Y2超出界限")} 
moveobj=null 
break; 
case 2: //调大小 
moveobj=null;ckto="" 
break; 
case 3: //仍出 
if(event.srcElement.parentElement.id=="div1")event.srcElement.outerHTML="" 
break; 
case 4: //钢笔 
var a="<v:line style=\'position:absolute;z-index:"+zz+";left:"+xx+";top:"+yy+";\' to=\'"+(event.x-xx)+","+(event.y-yy)+"\' strokecolor=\'"+color1+"\' strokeweight=\'"+size1+"\'/>";
alert(a)
div1.appendChild(document.createElement("<v:line style=\'position:absolute;z-index:"+zz+";left:"+xx+";top:"+yy+";\' to=\'"+(event.x-xx)+","+(event.y-yy)+"\' strokecolor=\'"+color1+"\' strokeweight=\'"+size1+"\'/>")) 
line1.style.display="none" 
break; 
case 6: //圆形 
div1.appendChild(document.createElement("<v:oval style=\'position:absolute;z-index:"+zz+";left:"+oval1.style.left+";top:"+oval1.style.top+";width:"+oval1.style.width+";height:"+oval1.style.height+";\' strokecolor=\'"+color1+"\' strokeweight=\'"+size1+"\' fillcolor=\'"+color2+"\'/>")) 
oval1.style.display="none" 
break; 
case 7: //长方形 
div1.appendChild(document.createElement("<v:rect style=\'position:absolute;z-index:"+zz+";left:"+rect1.style.left+";top:"+rect1.style.top+";width:"+rect1.style.width+";height:"+rect1.style.height+";\' strokecolor=\'"+color1+"\' strokeweight=\'"+size1+"\' fillcolor=\'"+color2+"\'/>")) 
rect1.style.display="none" 
break; 
case 8: //圆矩形 
div1.appendChild(document.createElement("<v:roundrect style=\'position:absolute;z-index:"+zz+";left:"+roundrect1.style.left+";top:"+roundrect1.style.top+";width:"+roundrect1.style.width+";height:"+roundrect1.style.height+";\' strokecolor=\'"+color1+"\' strokeweight=\'"+size1+"\' fillcolor=\'"+color2+"\'/>")) 
roundrect1.style.display="none" 
break; 
case 11: //渐变 
if(event.srcElement.parentElement.id=="div1"){ 
if(!usejianbian.checked){event.srcElement.fillcolor=tianchongbeijing.value}else{ 
temp1=jianbianyangshi[0].checked?\'gradient\':\'gradientradial\' 
temp2=event.srcElement.innerHTML.replace(/<v\:fill .*<\/v:fill>/gi,\'\') 
event.srcElement.innerHTML=temp2+"<v:fill color=\'"+jianbianse2.value+"\' color2=\'"+jianbianse1.value+"\' type=\'"+temp1+"\'/>" 
}} 
break; 
case 12: //立体 
if(event.srcElement.parentElement.id=="div1"){ 
temp2=event.srcElement.innerHTML.replace(/<v\:extrusion .*<\/v:extrusion>/gi,\'\') 
event.srcElement.innerHTML=temp2+"<v:Extrusion on=\'t\' color=\'"+litiyanse.value+"\' backdepth=\'"+houxiangshenzhan.options[houxiangshenzhan.selectedIndex].text+"\' foredepth=\'"+qianxiangshenzhan.options[qianxiangshenzhan.selectedIndex].text+"\' rotationangle=\'"+pianyishangbian.options[pianyishangbian.selectedIndex].text+","+pianyizuobian.options[pianyizuobian.selectedIndex].text+"\'/>" 
} 
break; 
case 13: //边框 
if(event.srcElement.parentElement.id=="div1"){ 
temp2=event.srcElement.innerHTML.replace(/<v\:stroke .*<\/v:stroke>/gi,\'\') 
event.srcElement.innerHTML=temp2+"<v:Stroke dashstyle=\'"+biankuangyangshi.options[biankuangyangshi.selectedIndex].text+"\' startarrow=\'"+qidianjiantou.options[qidianjiantou.selectedIndex].text+"\' endarrow=\'"+zhongdianjiantou.options[zhongdianjiantou.selectedIndex].text+"\'/>" 
event.srcElement.strokecolor=biankuangyanse.value 
biankuangcudu.options[biankuangcudu.selectedIndex].text==\'0\'?event.srcElement.stroked=false:event.srcElement.strokeweight=biankuangcudu.options[biankuangcudu.selectedIndex].text 
} 
break; 
case 14: //高级 
if(event.srcElement.parentElement.id=="div1"){ 
gaojiobj=event.srcElement 
txt2.value=event.srcElement.outerHTML.replace(/>/g,">\n").replace(/ = /g,"=").replace(/\: /g,":").replace(/\; /g,";");gaoji1.style.left=event.x;gaoji1.style.top=event.y;gaoji1.style.display=\'\' 
} 
}}} 
function rndcolor(theobjis){ 
colortab.style.display="";colorid.innerHTML="";str1="<table cellspacing=0 cellpadding=0>"; 
for(r=0;r<10;r++){str1+="<tr>" 
for(i=0;i<10;i++){ 
tempcolor1=Math.round(Math.random()*255).toString(16)+Math.round(Math.random()*255).toString(16)+Math.round(Math.random()*255).toString(16);while(tempcolor1.length<6){tempcolor1+=Math.round(Math.random()*9)} 
str1+="<td style=\'width:10;height:10;background-color:#"+tempcolor1+";\' onclick="+theobjis+".value=\'#"+tempcolor1+"\';"+theobjis+"lor=\'#"+tempcolor1+"\';colortab.style.display=\'none\'></td>" 
}str1+="</tr>"} 
colorid.innerHTML=str1+"</table>" 
} 
document.onmouseup=function(){ 
if(event.srcElement.tagName=="BUTTON"){ 
event.srcElement.blur();div1.focus();if(event.srcElement.className=="bon1"||event.button!=1)return true; 
for(i=0;i<huabi.length;i++)huabi[i].className="bon2" 
event.srcElement.className="bon1"; 
if(huabi[10].className=="bon1"){tianchong1.style.display=\'\';tianchongbeijing.value=tianchongbeijing.value==\'\'?huabibeijing.value:tianchongbeijing.value}else{tianchong1.style.display=\'none\';} 
if(huabi[11].className=="bon1"){liti1.style.display=\'\';litiyanse.value=litiyanse.value==\'\'?huabibeijing.value:litiyanse.value}else{liti1.style.display=\'none\';} 
if(huabi[12].className=="bon1"){biankuang1.style.display=\'\';biankuangyanse.value=biankuangyanse.value==\'\'?huabiyanse.value:biankuangyanse.value}else{biankuang1.style.display=\'none\';} 
if(poly1!=null){ //清除记忆点 
poly1.points.value=oldvalue;oldvalue="";poly1=null; 
};wenzi1.style.display=\'none\';tupian1.style.display=\'none\';gaoji1.style.display=\'none\';menu1.style.display=\'none\' 
}} 
function forerr(){ 
if(moveobj!=null&&bi==1){moveobj.style.left=xx-ckleft;moveobj.style.top=yy-cktop;ckleft=0;cktop=0;moveobj=null} 
if(moveobj!=null&&bi==2){ 
if(moveobj.tagName!="line"){moveobj.style.left=ckleft;moveobj.style.top=cktop;moveobj.style.width=ckwid;moveobj.style.height=ckhei;}else{moveobj.to=ckto;} 
ckleft=0;cktop=0;ckwid=0;ckhei=0;ckto="";moveobj=null 
} 
line1.style.display=\'none\';oval1.style.display=\'none\';rect1.style.display=\'none\';roundrect1.style.display=\'none\' 
} 
function charuwenzi(){ //插入文字 
if(txt1.value=="")return alert(\'请先输入文字，在点击插入\') 
var newtxt=document.createElement("<span style=\'position:absolute;z-index:"+zz+";left:"+xx+";top:"+yy+";color:"+color1+";\'></span>");newtxt.innerText=txt1.value 
div1.appendChild(newtxt);wenzi1.style.display=\'none\' 
} 
function charutupian(){ //插入图片 
if(file1.value=="")return alert(\'请先输入图片路径(HTTP://或FILE:///)格式，在点击插入\') 
if(file1.value.indexOf("\'")>-1)return alert("图片地址不可以含有违禁字符 \' 单引号") 
var newtxt=document.createElement("<v:Image style=\'position:absolute;z-index:"+zz+";left:"+xx+";top:"+yy+";width:100;height:100\' src=\'"+file1.value+"\'/>"); 
div1.appendChild(newtxt);tupian1.style.display=\'none\' 
} 
</script>