<HTML xmlns:v>
<HEAD>
<META http-equiv="Content-Type" content="text/html; Charset=gb2312">
<META name="GENERATOR" content="Network Programmer Companion (Lshdic)2004">
<META name="GENERATORDOWNLOADADDRESS" content="/">
<META NAME="KEYWORDS" CONTENT="Vml Image Paintboard">
<title>Lanli.com - Vml image drawing board.2003</title>
<STYLE>
v\:*{behavior:url(#default#VML);} /*Declare V as a VML variable*/
a{text-Decoration:none;color:white}
a:hover{text-Decoration:underline;color:yellow;}
td{font-size:12px;color:white}
.bon1{border-bottom:1 solid eeeeee;border-right:1 solid eeeeee;border-left:1 solid gray;border-top:1 solid gray;background-color:#619CE7;color:yellow;width:54}
.bon2{border-bottom:1 solid gray;border-right:1 solid gray;border-left:1 solid eeeeee;border-top:1 solid eeeeee;background-color:#619CE7;color:white;width:54}
</STYLE>
</HEAD>
<BODY oncontextmenu='return false' style='margin:1;cursor:default' vlink=#3732CD link='#3732CD' onselectstart='if(!="TEXTAREA"&&!="INPUT")return false'>
<v:Line style='position:absolute;z-index:2000;display:none' id='line1'> <!--Pen visualization-->
<v:Stroke dashstyle='shortdash'/>
</v:line>
<v:Oval style='position:absolute;z-index:2000;display:none' id='oval1'> <!--Circular visualization-->
<v:Stroke dashstyle='shortdash'/>
</v:oval>
<v:rect style='position:absolute;z-index:2000;display:none' id='rect1'> <!--Rectangle visualization-->
<v:Stroke dashstyle='shortdash'/>
</v:rect>
<v:roundrect style='position:absolute;z-index:2000;display:none' id='roundrect1'> <!--Circular saw visualization-->
<v:Stroke dashstyle='shortdash'/>
</v:roundrect>
<span style='position:absolute;z-index:2000;display:none' id='wenzi1'> <!--Insert text visualization-->
<textarea id='txt1' style='border:1 solid black;width:200;height:50'></textarea><br>
<center><input type='button' value='insert' class="bon2" onclick="charuwenzi()">
</span>
<span style='position:absolute;z-index:2000;display:none' id='tupian1'> <!--Insert image visualization-->
<input type='file' id='file1' style='width:200'><br>
<center><input type='button' value='insert' class="bon2" onclick="charutupian()">
</span>
<span style='position:absolute;z-index:2000;display:none' id='gaoji1'> <!--Advanced visualization-->
<textarea id='txt2' style='border:1 solid black;width:400;height:150'></textarea><br>
<center><input type='button' value='modify' class="bon2" onclick="=;gaojiobj=null;='none'">
</span>
<span style='position:absolute;z-index:2000;display:none' id='yuandaima'> <!--All original codes-->
<textarea id='txt3' style='border:1 solid black;width:600;height:400'></textarea><br>
<center><input type='button' value='Copy' class="bon2" onclick="('text',);alert('Data has been copied to the system clipboard')"> <input type='button' value='Update Modify' class="bon2" onclick="=;='none'"> <input type='button' value='Cancel' class="bon2" onclick="='none'">
</span>
<span style='position:absolute;z-index:2000;display:none' id='menu1'> <!--Pop-up menu-->
<input type=button class=bon2 value=preset onclick='zz+=1;=zz;="none"'><br>
<input type=button class=bon2 value=onclick='zz2-=1;=zz2;="none"'><br>
<input type=button class=bon2 value=Copy onclick='+=;alert("Copy is completed, please use the selection and drag");="none"'><br>
<input type=button class=bon2 value=delete onclick='="";="none"'><br>
</span>
<iframe id=web src="about:blank" style="display:none"></iframe> <!--Implementation Save-->
<span style='position:absolute;z-index:2000;display:none' id='help'> <!--Help Information-->
<textarea readonly='true' style='border:1 solid black;width:500;height:300'>
VML Image Paintboard.2003 (Operation Help and Function Introduction)
One of the most powerful web page VML (web vector graphics markup language) editing tools, the best learning tool for VML learners
Able to complete the basic three-dimensional web page design, and the graphics and graphics processing functions are generally (the original author will strengthen it if he has time in the future)
Basic brushes and graphics processing tools are on the right. Click to apply them using the left mouse button in the artboard.
You can save the VML code graphics in the artboard as a file, or you can also realize the functions of "opening files" and other functions through "Modify the original code"
Text: This function does not provide visual modification and editing functions, but the code is relatively simple to use HTML.
Picture: Supports FILE:/// and HTTP:// protocol types, and there are very few distortions after vectorization.
Memory point: This function can only see the effect when the coordinates of X and Y after clicking are greater than the coordinates of clicking. In the future, the original author may find a good solution.
Fill: This function only has the lines drawn by the "pen" and cannot be used
Border: The "starting point tip" and "end point tip" of this function are only valid for the graphics drawn by "pen" and "memory point".
Save as file: When the save dialog box pops up, select "Unicode" in the "Language" drop-down menu in the dialog box to save it and display it normally.
About the function of opening a file: Due to client resources and file encoding type issues, this function has been replaced by "Modify the original code". You can directly enter the saved VML and click "Update Modify" to virtually complete the opening of existing files.
VML Image Paintboard.2003 (Copyright Information)
Original author: Fengyunwu
Home Page:
Latest version: You can log in to the homepage to view
Posted on: August 25, 2003
Authorization: Authorized to any personal use and application, free DHTML code, which can be modified, learned, reproduced, and strengthened at will. The author's starting point for this work is to improve the user's VML programming level and set a precedent. Therefore, it is not encrypted and convenient to refer to, only one page of code is used. For this reason, please do not use any version of the VML image drawing board for other commercial purposes without the consent of the original author, infringe on my copyright and destroy my reputation and the work. Please retain these statements of the original author on the website, software release and other applications (but other information can be added, such as the authorized information of the modified person, etc.)
</textarea><br>
<center><input type='button' value='Close help' class="bon2" onclick="='none'">
</span>
<TABLE cellspacing=0 cellpadding=3 width=770 align=center bgcolor='#619CE7' style='border-right:3 dashed green;border-left:3 dashed #4735B0;border-top:1 solid blue;border-bottom:gray' id=allform1>
<tr align=center onmouseover='if(=="TD"&&==70)="aaaaaa"' onmouseout='if(=="TD")=""' style='cursor:hand'><td width=70 id=toptd1 onclick="=;=;=(/>/g,'>\n').replace(/ = /g,'=').replace(/\: /g,':').replace(/\; /g,';');=''">
Modify the original code</td><td width=70 onclick="('<HTML xmlns:v>\n<HEAD>\n<META http-equiv=Content-Type content=text/html;charset=gb2312>\n<TITLE>My masterpiece</TITLE>\n<META name=Gemeratpr content=Lanli VML Graphic Editor>\n<META name=GemeratprHomePage content=>\n<STYLE>\nv\\:*{behavior:url(#default#VML);}\n</STYLE>\n</HEAD>\n<BODY>\n'++'\n</BODY>\n</HTML>');('SaveAs',false,'My Masterpiece')">Save as a file</td><td width=70 onclick="if(=='Maximize View'){=-150;=-35;='Restore View'}else{=650;='100%';='Maximize View'}">Maximize View</td><td width=70 onclick="=;=;='"">Operation Help</td><td width=60> </td><td width=60> </td><td align=right>Original work: Fengyunwu, Lanli Programmer Network: <a href='' target='_blank'></a>
</td></tr><tr>
<td width=100% colspan=10 height=500>
<table cellspacing=0 cellpadding=0 height=100%%><tr><td width=660>
<div style='width:650;height:100%;background-color:white;border:1 solid gray;color:black;' id=div1></div>
</td><td>
<div style='width:110;height:100%;'>
<center><b>Brush selection</b><br>
<button class=bon2 id=huabi>Select and shift<button class=bon2 id=huabi>Recalling<button class=bon2 id=huabi>Top</button><button class=bon1 id=huabi>Fountain pen</button><button class=bon2 id=huabi>Memory point<button class=bon2 id=huabi>Round type<button class=bon2 id=huabi>Rectangular type<button class=bon2 id=huabi>Circular rectangular type<button class=bon2 id=huabi>Text<button class=bon2 id=huabi>Picture<button class=bon2 id=huabi>Fill<button class=bon2 id=huabi>Stereodimensional<button class=bon2 id=huabi>Border<button class=bon2 id=huabi>Advanced</button><br2>
<b>Basic parameters of brushes</b><br>
Pen edge thickness <select style="width:54;" id=bibiancudu><option selected>1<script>for(i=2;i<101;i++)("<option>"+i)</script></select><br>
Brush color <input style='border:1 solid black;width:54;height:17;' value='#000000' id=huabiyanse onmousedown='=-50;=+;rndcolor()'><br>
Brush background <input style='border:1 solid black;width:54;height:17;' value='#FFFFFF' id=huabibeijing onmousedown='=-50;=+;rndcolor()'><br>
X Y coordinates <input disabled='true' type='text' value='0,0' id='zuobiao' style='border:1 solid black;width:54;height:17;'><br>
<span id=tianchong1 style='display:none'>
<b> <br>Fill in basic parameters</b><br>
Normal background <input style='border:1 solid black;width:54;height:17;' value='' id=tianchongbeijing onmousedown='=-50;=+;rndcolor()'><br>Use gradient background<input type='checkbox' id='usejianbian'><br>
Gradient color one <input style='border:1 solid black;width:54;height:17;color:red' value='#FF0000' id=jianbianse1 onmousedown='=-50;=+;rndcolor()'>
<br>Gradial color two <input style='border:1 solid black;width:54;height:17;' value='#FFFFFF' id=jianbianse2 onmousedown='=-50;=+;rndcolor()'><br>
Up and down gradient <input type=radio name='jianbianyangshi' checked><br>
oblique gradient <input type=radio name='jianbianyangshi'>
</span>
<span id=liti1 style='display:none'>
<b> <br>Basic three-dimensional parameters</b><br>
Backward stretch <select style="width:54;" id=houxiangshenzhan><option selected>20<script>for(i=0;i<101;i++)("<option>"+i)</script></select><br>
<br>Forward Stretch <select style="width:54;" id=qianxiangshenzhan><option selected>0<script>for(i=1;i<101;i++)("<option>"+i)</script></select><br>
Offset left <select style="width:54;" id=pianyizuobian><option selected>0<script>for(i=1;i<101;i++)("<option>"+i)</script></select><br>
Offset upper <select style="width:54;" id=pianyishangbian><option selected>0<script>for(i=1;i<101;i++)("<option>"+i)</script></select><br>
Three-dimensional color <input style='border:1 solid black;width:54;height:17;' value='' id=litiyanse onmousedown='=-50;=+;rndcolor()'><br>
</span>
<span id=biankuang1 style='display:none'>
<b> <br>Basic parameters of borders</b><br>
Border thickness <select style="width:54;" id=biankuangcudu><option selected>1<script>for(i=0;i<101;i++)("<option>"+i)</script></select><br>
<br>Border style <select style="width:54;" id=biankuangyangshi><option selected>none<option>dash<option>dashdot<option>dot<option>longdash<option>longdashdot<option>shortdash<option>shortdashdot<option>shortdashdot<option>shortdashdot<option>shortdashdot<option>shortdashdot<option>shortdashdot</select><br>
Starting point pointed <select style="width:54;" id=qidianjiantou><option selected>none<option>block<option>classic<option>diamond<option>open<option>oval</select><br>
end point tip <select style="width:54;" id=zhongdianjiantou><option selected>none<option>block<option>classic<option>diamond<option>open<option>oval</select><br>
Border color <input style='border:1 solid black;width:54;height:17;' value='' id=biankuangyanse onmousedown='=-50;=+;rndcolor()'><br>
</span>
</div>
</td></tr></table>
</td></tr>
</table>
<table cellspacing=0 cellpadding=0 style='position:absolute;width:100;height:100;display:none;background-color:red' id='colortab'><tr><td id='colorid'></td></tr></table>
<script language='jscript'>
var bi=4 //Define the currently used brush tool, 3 is a pencil
var color1='#000000',color2='#00000',size1=0 //Define the missing brush color and brush fill color and brush edge thickness
var xx=0,yy=0,zz=1000 //Define the missing X and Y coordinates
var isok=false //Distinguish whether the starting point of the brush is within DIV, and if it is out of range, it is invalid
var moveobj=null,ckleft=0,cktop=0,ckwid=0,ckhei=0,ckto="" //References to moved objects and resized objects
var poly1=null,oldvalue="",oldx=0,oldy=0 //To complete the memory point, create a foldable line segment
var gaojiobj=null //In order to complete the "advanced" function, bind the modified object
var thisobj=null //In order to complete various basic editing functions, such as "setting before", "copy", "delete", etc.
var zz2=1000 //To complete the "set" function, zz2 is a negative number
function (){
();color1=;color2=;isok=true;size1=[].text
xx=;yy=;zz+=1
for(i=0;i<;i++){if(huabi[i].className=="bon1"){bi=i+1;break}}
=color1;=size1;=size1;=color1
=color2;=size1;=color1
=color2;=size1;=color1
=color2;
if(==1){
switch(bi){
case 1: //Select Move
if(=="div1"){moveobj=;ckleft=xx-parseInt();cktop=yy-parseInt()}
break;
case 2: //Resize
if(=="div1"){moveobj=;
ckleft=parseInt();cktop=parseInt();ckwid=;ckhei=}
break;
case 3: //Top
break;
case 4: //Pen
=;=;="0,0";=""
break;
case 5: //Memory point
if(poly1==null){
oldx=xx;oldy=yy
poly1=(("<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=(/,/g,' ')
break;
case 6: //Circular
=;=;=0;=0;=""
break;
case 7: //Rectangle
=;=;=0;=0;=""
break;
case 8: //Circular rectangle
=;=;=0;=0;=""
break;
case 9: //Text
=;=;=""
break;
case 10: //Picture
=;=;=""
break;
}
}}
function (){
tempx=;tempy=;temp1=0;temp2=0
=-8+","+parseInt(-7)
if(bi==5&&poly1!=null){ //Memory point
if(oldx-tempx<0&&oldy-tempy<0)=oldvalue+" "+(tempx-oldx)+" "+(tempy-oldy)
}
if(==1){
switch(bi){
case 1: //Select Move
if(moveobj!=null){=tempx-ckleft;=tempy-cktop}
break;
case 2: //Resize
if(moveobj!=null){
if(!="line"){
if(tempx>ckleft){=tempx-ckleft}else{=tempx;=ckleft-tempx}
if(tempy>cktop){=tempy-cktop}else{=tempy;=cktop-tempy}
}else{=parseInt(tempx-ckleft)+","+parseInt(tempy-cktop);if(ckto=="")ckto=parseInt(tempx-ckleft)+","+parseInt(tempy-cktop);}
}
break;
case 4: //Pen
=(tempx-xx)+","+(tempy-yy)
break;
case 6: //Circular
if(tempx-xx<0){=;=(xx-tempx)}else{=(tempx-xx)}
if(tempy-yy<0){=;=(yy-tempy)}else{=(tempy-yy)}
break;
case 7: //Rectangle
if(tempx-xx<0){=;=(xx-tempx)}else{=(tempx-xx)}
if(tempy-yy<0){=;=(yy-tempy)}else{=(tempy-yy)}
break;
case 8: //Circular rectangle
if(tempx-xx<0){=;=(xx-tempx)}else{=(tempx-xx)}
if(tempy-yy<0){=;=(yy-tempy)}else{=(tempy-yy)}
break;
}}}
function (){
();if(isok==false){forerr();return false};isok=false;='none'
tempx=;tempy=;divwid=;divhei=
if(tempx>+divwid+5||tempx<+5){forerr(); return alert("X coordinates out of bounds")}
if(tempy>++divhei+5||tempy<++5){forerr(); return alert("Y coordinates cross bound")}
if(==2&&bi==5&&poly1!=null){
=oldvalue;oldvalue="";poly1=null;
}else if(=="div1"&&==2){=tempx;=tempy;='';thisobj=}
if(==1){
switch(bi){
case 1: //Select Move
if(moveobj!=null&&parseInt()<+5){forerr();return alert("Moved object X1 exceeds the boundary")}
if(moveobj!=null&&parseInt()+-2>+divwid+5){forerr();return alert("Moved object X2 exceeds the boundary")}
if(moveobj!=null&&parseInt()<++5){forerr();return alert("Moved object Y1 exceeds the boundary")}
if(moveobj!=null&&parseInt()+-2>++divhei+3){forerr();return alert("Moved object Y2 exceeds the boundary")}
moveobj=null
break;
case 2: //Resize
moveobj=null;ckto=""
break;
case 3: // Still out
if(=="div1")=""
break;
case 4: //Pen
(("<v:line style='position:absolute;z-index:"+zz+";left:"+xx+";top:"+yy+";' to='"+(-xx)+","+(-yy)+"' strokecolor='"+color1+"' strokeweight='"+size1+"'/>"))
="none"
break;
case 6: //Circular
(("<v:oval style='position:absolute;z-index:"+zz+";left:"++";top:"++";width:"++";height:"++";' strokecolor='"+color1+"' strokeweight='"+size1+"' fillcolor='"+color2+"'/>"))
="none"
break;
case 7: //Rectangle
(("<v:rect style='position:absolute;z-index:"+zz+";left:"++";top:"++";width:"++";height:"++";' strokecolor='"+color1+"' strokeweight='"+size1+"' fillcolor='"+color2+"'/>"))
="none"
break;
case 8: //Circular rectangle
(("<v:roundrect style='position:absolute;z-index:"+zz+";left:"++";top:"++";width:"++";height:"++";' strokecolor='"+color1+"' strokeweight='"+size1+"' fillcolor='"+color2+"'/>"))
="none"
break;
case 11: //Gradial
if(=="div1"){
if(!){=}else{
temp1=jianbianyangshi[0].checked?'gradient':'gradientradial'
temp2=(/<v\:fill .*<\/v:fill>/gi,'')
=temp2+"<v:fill color='"++"' color2='"++"' type='"+temp1+"'/>"
}}
break;
case 12: //3D
if(=="div1"){
temp2=(/<v\:extrusion .*<\/v:extrusion>/gi,'')
=temp2+"<v:Extrusion on='t' color='"++"' backdepth='"+[].text+"' foredepth='"+[].text+"' rotationangle='"+[].text+","+[].text+"'/>"
}
break;
case 13: //Border
if(=="div1"){
temp2=(/<v\:stroke .*<\/v:stroke>/gi,'')
=temp2+"<v:Stroke dashstyle='"+[].text+"' startarrow='"+[].text+"' endarrow='"+[].text+"'/>"
=
[].text=='0'?=false:=[].text
}
break;
case 14: //Advanced
if(=="div1"){
gaojiobj=
=(/>/g,">\n").replace(/ = /g,"=").replace(/\: /g,":").replace(/\; /g,";");=;=;=''
}
}}}
function rndcolor(theobjis){
="";="";str1="<table cellspacing=0 cellpadding=0>";
for(r=0;r<10;r++){str1+="<tr>"
for(i=0;i<10;i++){
tempcolor1=(()*255).toString(16)+(()*255).toString(16)+(()*255).toString(16);while(<6){tempcolor1+=(()*9)}
str1+="<td style='width:10;height:10;background-color:#"+tempcolor1+";' onclick="+theobjis+".value='#"+tempcolor1+"';"+theobjis+".='#"+tempcolor1+"';='none'></td>"
}str1+="</tr>"}
=str1+"</table>"
}
function (){
if(=="BUTTON"){
();();if(=="bon1"||!=1)return true;
for(i=0;i<;i++)huabi[i].className="bon2"
="bon1";
if(huabi[10].className=="bon1"){='';===''?:}else{='none';}
if(huabi[11].className=="bon1"){='';===''?:}else{='none';}
if(huabi[12].className=="bon1"){='';===''?:}else{='none';}
if(poly1!=null){ //Clear the memory point
=oldvalue;oldvalue="";poly1=null;
};='none';='none';='none';='none'
}}
function forerr(){
if(moveobj!=null&&bi==1){=xx-ckleft;=yy-cktop;ckleft=0;cktop=0;moveobj=null}
if(moveobj!=null&&bi==2){
if(!="line"){=ckleft;=cktop;=ckwid;=ckhei;}else{=ckto;}
ckleft=0;cktop=0;ckwid=0;ckhei=0;ckto="";moveobj=null
}
='none';='none';='none';='none'
}
function charuwenzi(){ //Insert text
if(=="")return alert('Please enter the text first, click to insert')
var newtxt=("<span style='position:absolute;z-index:"+zz+";left:"+xx+";top:"+yy+";color:"+color1+";'></span>");=
(newtxt);='none'
}
function charutupian(){ //Insert picture
if(=="")return alert('Please enter the image path (HTTP:// or FILE:///) format first, click to insert')
if(("'")>-1)return alert("Image address cannot contain prohibited characters 's single quotes")
var newtxt=("<v:Image style='position:absolute;z-index:"+zz+";left:"+xx+";top:"+yy+";width:100;height:100' src='"++"'/>");
(newtxt);='none'
}
</script>
<HEAD>
<META http-equiv="Content-Type" content="text/html; Charset=gb2312">
<META name="GENERATOR" content="Network Programmer Companion (Lshdic)2004">
<META name="GENERATORDOWNLOADADDRESS" content="/">
<META NAME="KEYWORDS" CONTENT="Vml Image Paintboard">
<title>Lanli.com - Vml image drawing board.2003</title>
<STYLE>
v\:*{behavior:url(#default#VML);} /*Declare V as a VML variable*/
a{text-Decoration:none;color:white}
a:hover{text-Decoration:underline;color:yellow;}
td{font-size:12px;color:white}
.bon1{border-bottom:1 solid eeeeee;border-right:1 solid eeeeee;border-left:1 solid gray;border-top:1 solid gray;background-color:#619CE7;color:yellow;width:54}
.bon2{border-bottom:1 solid gray;border-right:1 solid gray;border-left:1 solid eeeeee;border-top:1 solid eeeeee;background-color:#619CE7;color:white;width:54}
</STYLE>
</HEAD>
<BODY oncontextmenu='return false' style='margin:1;cursor:default' vlink=#3732CD link='#3732CD' onselectstart='if(!="TEXTAREA"&&!="INPUT")return false'>
<v:Line style='position:absolute;z-index:2000;display:none' id='line1'> <!--Pen visualization-->
<v:Stroke dashstyle='shortdash'/>
</v:line>
<v:Oval style='position:absolute;z-index:2000;display:none' id='oval1'> <!--Circular visualization-->
<v:Stroke dashstyle='shortdash'/>
</v:oval>
<v:rect style='position:absolute;z-index:2000;display:none' id='rect1'> <!--Rectangle visualization-->
<v:Stroke dashstyle='shortdash'/>
</v:rect>
<v:roundrect style='position:absolute;z-index:2000;display:none' id='roundrect1'> <!--Circular saw visualization-->
<v:Stroke dashstyle='shortdash'/>
</v:roundrect>
<span style='position:absolute;z-index:2000;display:none' id='wenzi1'> <!--Insert text visualization-->
<textarea id='txt1' style='border:1 solid black;width:200;height:50'></textarea><br>
<center><input type='button' value='insert' class="bon2" onclick="charuwenzi()">
</span>
<span style='position:absolute;z-index:2000;display:none' id='tupian1'> <!--Insert image visualization-->
<input type='file' id='file1' style='width:200'><br>
<center><input type='button' value='insert' class="bon2" onclick="charutupian()">
</span>
<span style='position:absolute;z-index:2000;display:none' id='gaoji1'> <!--Advanced visualization-->
<textarea id='txt2' style='border:1 solid black;width:400;height:150'></textarea><br>
<center><input type='button' value='modify' class="bon2" onclick="=;gaojiobj=null;='none'">
</span>
<span style='position:absolute;z-index:2000;display:none' id='yuandaima'> <!--All original codes-->
<textarea id='txt3' style='border:1 solid black;width:600;height:400'></textarea><br>
<center><input type='button' value='Copy' class="bon2" onclick="('text',);alert('Data has been copied to the system clipboard')"> <input type='button' value='Update Modify' class="bon2" onclick="=;='none'"> <input type='button' value='Cancel' class="bon2" onclick="='none'">
</span>
<span style='position:absolute;z-index:2000;display:none' id='menu1'> <!--Pop-up menu-->
<input type=button class=bon2 value=preset onclick='zz+=1;=zz;="none"'><br>
<input type=button class=bon2 value=onclick='zz2-=1;=zz2;="none"'><br>
<input type=button class=bon2 value=Copy onclick='+=;alert("Copy is completed, please use the selection and drag");="none"'><br>
<input type=button class=bon2 value=delete onclick='="";="none"'><br>
</span>
<iframe id=web src="about:blank" style="display:none"></iframe> <!--Implementation Save-->
<span style='position:absolute;z-index:2000;display:none' id='help'> <!--Help Information-->
<textarea readonly='true' style='border:1 solid black;width:500;height:300'>
VML Image Paintboard.2003 (Operation Help and Function Introduction)
One of the most powerful web page VML (web vector graphics markup language) editing tools, the best learning tool for VML learners
Able to complete the basic three-dimensional web page design, and the graphics and graphics processing functions are generally (the original author will strengthen it if he has time in the future)
Basic brushes and graphics processing tools are on the right. Click to apply them using the left mouse button in the artboard.
You can save the VML code graphics in the artboard as a file, or you can also realize the functions of "opening files" and other functions through "Modify the original code"
Text: This function does not provide visual modification and editing functions, but the code is relatively simple to use HTML.
Picture: Supports FILE:/// and HTTP:// protocol types, and there are very few distortions after vectorization.
Memory point: This function can only see the effect when the coordinates of X and Y after clicking are greater than the coordinates of clicking. In the future, the original author may find a good solution.
Fill: This function only has the lines drawn by the "pen" and cannot be used
Border: The "starting point tip" and "end point tip" of this function are only valid for the graphics drawn by "pen" and "memory point".
Save as file: When the save dialog box pops up, select "Unicode" in the "Language" drop-down menu in the dialog box to save it and display it normally.
About the function of opening a file: Due to client resources and file encoding type issues, this function has been replaced by "Modify the original code". You can directly enter the saved VML and click "Update Modify" to virtually complete the opening of existing files.
VML Image Paintboard.2003 (Copyright Information)
Original author: Fengyunwu
Home Page:
Latest version: You can log in to the homepage to view
Posted on: August 25, 2003
Authorization: Authorized to any personal use and application, free DHTML code, which can be modified, learned, reproduced, and strengthened at will. The author's starting point for this work is to improve the user's VML programming level and set a precedent. Therefore, it is not encrypted and convenient to refer to, only one page of code is used. For this reason, please do not use any version of the VML image drawing board for other commercial purposes without the consent of the original author, infringe on my copyright and destroy my reputation and the work. Please retain these statements of the original author on the website, software release and other applications (but other information can be added, such as the authorized information of the modified person, etc.)
</textarea><br>
<center><input type='button' value='Close help' class="bon2" onclick="='none'">
</span>
<TABLE cellspacing=0 cellpadding=3 width=770 align=center bgcolor='#619CE7' style='border-right:3 dashed green;border-left:3 dashed #4735B0;border-top:1 solid blue;border-bottom:gray' id=allform1>
<tr align=center onmouseover='if(=="TD"&&==70)="aaaaaa"' onmouseout='if(=="TD")=""' style='cursor:hand'><td width=70 id=toptd1 onclick="=;=;=(/>/g,'>\n').replace(/ = /g,'=').replace(/\: /g,':').replace(/\; /g,';');=''">
Modify the original code</td><td width=70 onclick="('<HTML xmlns:v>\n<HEAD>\n<META http-equiv=Content-Type content=text/html;charset=gb2312>\n<TITLE>My masterpiece</TITLE>\n<META name=Gemeratpr content=Lanli VML Graphic Editor>\n<META name=GemeratprHomePage content=>\n<STYLE>\nv\\:*{behavior:url(#default#VML);}\n</STYLE>\n</HEAD>\n<BODY>\n'++'\n</BODY>\n</HTML>');('SaveAs',false,'My Masterpiece')">Save as a file</td><td width=70 onclick="if(=='Maximize View'){=-150;=-35;='Restore View'}else{=650;='100%';='Maximize View'}">Maximize View</td><td width=70 onclick="=;=;='"">Operation Help</td><td width=60> </td><td width=60> </td><td align=right>Original work: Fengyunwu, Lanli Programmer Network: <a href='' target='_blank'></a>
</td></tr><tr>
<td width=100% colspan=10 height=500>
<table cellspacing=0 cellpadding=0 height=100%%><tr><td width=660>
<div style='width:650;height:100%;background-color:white;border:1 solid gray;color:black;' id=div1></div>
</td><td>
<div style='width:110;height:100%;'>
<center><b>Brush selection</b><br>
<button class=bon2 id=huabi>Select and shift<button class=bon2 id=huabi>Recalling<button class=bon2 id=huabi>Top</button><button class=bon1 id=huabi>Fountain pen</button><button class=bon2 id=huabi>Memory point<button class=bon2 id=huabi>Round type<button class=bon2 id=huabi>Rectangular type<button class=bon2 id=huabi>Circular rectangular type<button class=bon2 id=huabi>Text<button class=bon2 id=huabi>Picture<button class=bon2 id=huabi>Fill<button class=bon2 id=huabi>Stereodimensional<button class=bon2 id=huabi>Border<button class=bon2 id=huabi>Advanced</button><br2>
<b>Basic parameters of brushes</b><br>
Pen edge thickness <select style="width:54;" id=bibiancudu><option selected>1<script>for(i=2;i<101;i++)("<option>"+i)</script></select><br>
Brush color <input style='border:1 solid black;width:54;height:17;' value='#000000' id=huabiyanse onmousedown='=-50;=+;rndcolor()'><br>
Brush background <input style='border:1 solid black;width:54;height:17;' value='#FFFFFF' id=huabibeijing onmousedown='=-50;=+;rndcolor()'><br>
X Y coordinates <input disabled='true' type='text' value='0,0' id='zuobiao' style='border:1 solid black;width:54;height:17;'><br>
<span id=tianchong1 style='display:none'>
<b> <br>Fill in basic parameters</b><br>
Normal background <input style='border:1 solid black;width:54;height:17;' value='' id=tianchongbeijing onmousedown='=-50;=+;rndcolor()'><br>Use gradient background<input type='checkbox' id='usejianbian'><br>
Gradient color one <input style='border:1 solid black;width:54;height:17;color:red' value='#FF0000' id=jianbianse1 onmousedown='=-50;=+;rndcolor()'>
<br>Gradial color two <input style='border:1 solid black;width:54;height:17;' value='#FFFFFF' id=jianbianse2 onmousedown='=-50;=+;rndcolor()'><br>
Up and down gradient <input type=radio name='jianbianyangshi' checked><br>
oblique gradient <input type=radio name='jianbianyangshi'>
</span>
<span id=liti1 style='display:none'>
<b> <br>Basic three-dimensional parameters</b><br>
Backward stretch <select style="width:54;" id=houxiangshenzhan><option selected>20<script>for(i=0;i<101;i++)("<option>"+i)</script></select><br>
<br>Forward Stretch <select style="width:54;" id=qianxiangshenzhan><option selected>0<script>for(i=1;i<101;i++)("<option>"+i)</script></select><br>
Offset left <select style="width:54;" id=pianyizuobian><option selected>0<script>for(i=1;i<101;i++)("<option>"+i)</script></select><br>
Offset upper <select style="width:54;" id=pianyishangbian><option selected>0<script>for(i=1;i<101;i++)("<option>"+i)</script></select><br>
Three-dimensional color <input style='border:1 solid black;width:54;height:17;' value='' id=litiyanse onmousedown='=-50;=+;rndcolor()'><br>
</span>
<span id=biankuang1 style='display:none'>
<b> <br>Basic parameters of borders</b><br>
Border thickness <select style="width:54;" id=biankuangcudu><option selected>1<script>for(i=0;i<101;i++)("<option>"+i)</script></select><br>
<br>Border style <select style="width:54;" id=biankuangyangshi><option selected>none<option>dash<option>dashdot<option>dot<option>longdash<option>longdashdot<option>shortdash<option>shortdashdot<option>shortdashdot<option>shortdashdot<option>shortdashdot<option>shortdashdot<option>shortdashdot</select><br>
Starting point pointed <select style="width:54;" id=qidianjiantou><option selected>none<option>block<option>classic<option>diamond<option>open<option>oval</select><br>
end point tip <select style="width:54;" id=zhongdianjiantou><option selected>none<option>block<option>classic<option>diamond<option>open<option>oval</select><br>
Border color <input style='border:1 solid black;width:54;height:17;' value='' id=biankuangyanse onmousedown='=-50;=+;rndcolor()'><br>
</span>
</div>
</td></tr></table>
</td></tr>
</table>
<table cellspacing=0 cellpadding=0 style='position:absolute;width:100;height:100;display:none;background-color:red' id='colortab'><tr><td id='colorid'></td></tr></table>
<script language='jscript'>
var bi=4 //Define the currently used brush tool, 3 is a pencil
var color1='#000000',color2='#00000',size1=0 //Define the missing brush color and brush fill color and brush edge thickness
var xx=0,yy=0,zz=1000 //Define the missing X and Y coordinates
var isok=false //Distinguish whether the starting point of the brush is within DIV, and if it is out of range, it is invalid
var moveobj=null,ckleft=0,cktop=0,ckwid=0,ckhei=0,ckto="" //References to moved objects and resized objects
var poly1=null,oldvalue="",oldx=0,oldy=0 //To complete the memory point, create a foldable line segment
var gaojiobj=null //In order to complete the "advanced" function, bind the modified object
var thisobj=null //In order to complete various basic editing functions, such as "setting before", "copy", "delete", etc.
var zz2=1000 //To complete the "set" function, zz2 is a negative number
function (){
();color1=;color2=;isok=true;size1=[].text
xx=;yy=;zz+=1
for(i=0;i<;i++){if(huabi[i].className=="bon1"){bi=i+1;break}}
=color1;=size1;=size1;=color1
=color2;=size1;=color1
=color2;=size1;=color1
=color2;
if(==1){
switch(bi){
case 1: //Select Move
if(=="div1"){moveobj=;ckleft=xx-parseInt();cktop=yy-parseInt()}
break;
case 2: //Resize
if(=="div1"){moveobj=;
ckleft=parseInt();cktop=parseInt();ckwid=;ckhei=}
break;
case 3: //Top
break;
case 4: //Pen
=;=;="0,0";=""
break;
case 5: //Memory point
if(poly1==null){
oldx=xx;oldy=yy
poly1=(("<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=(/,/g,' ')
break;
case 6: //Circular
=;=;=0;=0;=""
break;
case 7: //Rectangle
=;=;=0;=0;=""
break;
case 8: //Circular rectangle
=;=;=0;=0;=""
break;
case 9: //Text
=;=;=""
break;
case 10: //Picture
=;=;=""
break;
}
}}
function (){
tempx=;tempy=;temp1=0;temp2=0
=-8+","+parseInt(-7)
if(bi==5&&poly1!=null){ //Memory point
if(oldx-tempx<0&&oldy-tempy<0)=oldvalue+" "+(tempx-oldx)+" "+(tempy-oldy)
}
if(==1){
switch(bi){
case 1: //Select Move
if(moveobj!=null){=tempx-ckleft;=tempy-cktop}
break;
case 2: //Resize
if(moveobj!=null){
if(!="line"){
if(tempx>ckleft){=tempx-ckleft}else{=tempx;=ckleft-tempx}
if(tempy>cktop){=tempy-cktop}else{=tempy;=cktop-tempy}
}else{=parseInt(tempx-ckleft)+","+parseInt(tempy-cktop);if(ckto=="")ckto=parseInt(tempx-ckleft)+","+parseInt(tempy-cktop);}
}
break;
case 4: //Pen
=(tempx-xx)+","+(tempy-yy)
break;
case 6: //Circular
if(tempx-xx<0){=;=(xx-tempx)}else{=(tempx-xx)}
if(tempy-yy<0){=;=(yy-tempy)}else{=(tempy-yy)}
break;
case 7: //Rectangle
if(tempx-xx<0){=;=(xx-tempx)}else{=(tempx-xx)}
if(tempy-yy<0){=;=(yy-tempy)}else{=(tempy-yy)}
break;
case 8: //Circular rectangle
if(tempx-xx<0){=;=(xx-tempx)}else{=(tempx-xx)}
if(tempy-yy<0){=;=(yy-tempy)}else{=(tempy-yy)}
break;
}}}
function (){
();if(isok==false){forerr();return false};isok=false;='none'
tempx=;tempy=;divwid=;divhei=
if(tempx>+divwid+5||tempx<+5){forerr(); return alert("X coordinates out of bounds")}
if(tempy>++divhei+5||tempy<++5){forerr(); return alert("Y coordinates cross bound")}
if(==2&&bi==5&&poly1!=null){
=oldvalue;oldvalue="";poly1=null;
}else if(=="div1"&&==2){=tempx;=tempy;='';thisobj=}
if(==1){
switch(bi){
case 1: //Select Move
if(moveobj!=null&&parseInt()<+5){forerr();return alert("Moved object X1 exceeds the boundary")}
if(moveobj!=null&&parseInt()+-2>+divwid+5){forerr();return alert("Moved object X2 exceeds the boundary")}
if(moveobj!=null&&parseInt()<++5){forerr();return alert("Moved object Y1 exceeds the boundary")}
if(moveobj!=null&&parseInt()+-2>++divhei+3){forerr();return alert("Moved object Y2 exceeds the boundary")}
moveobj=null
break;
case 2: //Resize
moveobj=null;ckto=""
break;
case 3: // Still out
if(=="div1")=""
break;
case 4: //Pen
(("<v:line style='position:absolute;z-index:"+zz+";left:"+xx+";top:"+yy+";' to='"+(-xx)+","+(-yy)+"' strokecolor='"+color1+"' strokeweight='"+size1+"'/>"))
="none"
break;
case 6: //Circular
(("<v:oval style='position:absolute;z-index:"+zz+";left:"++";top:"++";width:"++";height:"++";' strokecolor='"+color1+"' strokeweight='"+size1+"' fillcolor='"+color2+"'/>"))
="none"
break;
case 7: //Rectangle
(("<v:rect style='position:absolute;z-index:"+zz+";left:"++";top:"++";width:"++";height:"++";' strokecolor='"+color1+"' strokeweight='"+size1+"' fillcolor='"+color2+"'/>"))
="none"
break;
case 8: //Circular rectangle
(("<v:roundrect style='position:absolute;z-index:"+zz+";left:"++";top:"++";width:"++";height:"++";' strokecolor='"+color1+"' strokeweight='"+size1+"' fillcolor='"+color2+"'/>"))
="none"
break;
case 11: //Gradial
if(=="div1"){
if(!){=}else{
temp1=jianbianyangshi[0].checked?'gradient':'gradientradial'
temp2=(/<v\:fill .*<\/v:fill>/gi,'')
=temp2+"<v:fill color='"++"' color2='"++"' type='"+temp1+"'/>"
}}
break;
case 12: //3D
if(=="div1"){
temp2=(/<v\:extrusion .*<\/v:extrusion>/gi,'')
=temp2+"<v:Extrusion on='t' color='"++"' backdepth='"+[].text+"' foredepth='"+[].text+"' rotationangle='"+[].text+","+[].text+"'/>"
}
break;
case 13: //Border
if(=="div1"){
temp2=(/<v\:stroke .*<\/v:stroke>/gi,'')
=temp2+"<v:Stroke dashstyle='"+[].text+"' startarrow='"+[].text+"' endarrow='"+[].text+"'/>"
=
[].text=='0'?=false:=[].text
}
break;
case 14: //Advanced
if(=="div1"){
gaojiobj=
=(/>/g,">\n").replace(/ = /g,"=").replace(/\: /g,":").replace(/\; /g,";");=;=;=''
}
}}}
function rndcolor(theobjis){
="";="";str1="<table cellspacing=0 cellpadding=0>";
for(r=0;r<10;r++){str1+="<tr>"
for(i=0;i<10;i++){
tempcolor1=(()*255).toString(16)+(()*255).toString(16)+(()*255).toString(16);while(<6){tempcolor1+=(()*9)}
str1+="<td style='width:10;height:10;background-color:#"+tempcolor1+";' onclick="+theobjis+".value='#"+tempcolor1+"';"+theobjis+".='#"+tempcolor1+"';='none'></td>"
}str1+="</tr>"}
=str1+"</table>"
}
function (){
if(=="BUTTON"){
();();if(=="bon1"||!=1)return true;
for(i=0;i<;i++)huabi[i].className="bon2"
="bon1";
if(huabi[10].className=="bon1"){='';===''?:}else{='none';}
if(huabi[11].className=="bon1"){='';===''?:}else{='none';}
if(huabi[12].className=="bon1"){='';===''?:}else{='none';}
if(poly1!=null){ //Clear the memory point
=oldvalue;oldvalue="";poly1=null;
};='none';='none';='none';='none'
}}
function forerr(){
if(moveobj!=null&&bi==1){=xx-ckleft;=yy-cktop;ckleft=0;cktop=0;moveobj=null}
if(moveobj!=null&&bi==2){
if(!="line"){=ckleft;=cktop;=ckwid;=ckhei;}else{=ckto;}
ckleft=0;cktop=0;ckwid=0;ckhei=0;ckto="";moveobj=null
}
='none';='none';='none';='none'
}
function charuwenzi(){ //Insert text
if(=="")return alert('Please enter the text first, click to insert')
var newtxt=("<span style='position:absolute;z-index:"+zz+";left:"+xx+";top:"+yy+";color:"+color1+";'></span>");=
(newtxt);='none'
}
function charutupian(){ //Insert picture
if(=="")return alert('Please enter the image path (HTTP:// or FILE:///) format first, click to insert')
if(("'")>-1)return alert("Image address cannot contain prohibited characters 's single quotes")
var newtxt=("<v:Image style='position:absolute;z-index:"+zz+";left:"+xx+";top:"+yy+";width:100;height:100' src='"++"'/>");
(newtxt);='none'
}
</script>