📄 fywvml2.htm
字号:
<HTML xmlns:v>
<HEAD>
<META http-equiv="Content-Type" content="text/html; Charset=gb2312">
<META name="GENERATOR" content="网络程序员伴侣(Lshdic)2004">
<META name="GENERATORDOWNLOADADDRESS" content="http://www.lshdic.com/downlshdic.asp">
<META NAME="KEYWORDS" CONTENT="Vml图像画板">
<title>蓝丽网 - Vml图像画板.2003.9.12</title>
<STYLE>
v\:*{behavior:url(#default#VML);} /*声明V为VML变量*/
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='if(event.srcElement.tagName!="TEXTAREA")return false' style='margin:1;cursor:default' vlink=#3732CD link='#3732CD' onselectstart='if(event.srcElement.tagName!="TEXTAREA"&&event.srcElement.tagName!="INPUT")return false' onhelp='if(help.style.display=="none"){bangzhu.click()}else{guanbibangzhu.click()};return false'>
<script>
function window.onerror(){ //防止未下载完毕时发生异步错误
return true
}
</script>
<v:Line style='position:absolute;z-index:2000;display:none' id='line1'> <!--钢笔可视化-->
<v:Stroke dashstyle='shortdash'/>
</v:line>
<v:arc startangle='-200' endangle='30' style='position:absolute;z-index:2000;display:none' id='arc1'> <!--弧形可视化-->
<v:Stroke dashstyle='shortdash'/>
</v:arc>
<v:Oval style='position:absolute;z-index:2000;display:none' id='oval1'> <!--圆形可视化-->
<v:Stroke dashstyle='shortdash'/>
</v:oval>
<v:rect style='position:absolute;z-index:2000;display:none' id='rect1'> <!--长方形可视化-->
<v:Stroke dashstyle='shortdash'/>
</v:rect>
<v:roundrect style='position:absolute;z-index:2000;display:none' id='roundrect1'> <!--圆锯形可视化-->
<v:Stroke dashstyle='shortdash'/>
</v:roundrect>
<span style='position:absolute;z-index:2000;display:none' id='wenzi1'> <!--插入文字可视化-->
<textarea id='txt1' style='border:1 solid black;width:300;height:100'></textarea><br>
<center>字体:<select style="width:100;" id=wenziziti onchange='gengxinwenzi.click()'><option selected>宋体<option>黑体<option>隶书<option>幼圆<option>楷体_GB2312<option>仿宋_GB2312<option>华文中宋<option>华文行楷<option>华文新魏<option>华文细黑<option>华文彩云<option>方正姚体<option>方正舒体<option>Wingdings<option>Wingdings 2<option>Wingdings 3<option>Webdings<option>System<option>@宋体<option>@黑体<option>@隶书<option>@幼圆<option>@楷体_GB2312<option>@仿宋_GB2312<option>@华文中宋<option>@华文行楷<option>@华文新魏<option>@华文细黑<option>@华文彩云<option>@方正姚体<option>@方正舒体<option>@System</select>有无边框<input type='checkbox' id='wenzibiankuang'><br>
颜色:<input type='text' style='border:1 solid black;width:50;height:17;' value='#000000' onmousedown='colortab.style.left=event.x-50;colortab.style.top=event.y+this.offsetHeight;rndcolor(this.id)' id='wenziyanse' onmousemove='gengxinwenzi.click()'>背景:<input type='text' style='border:1 solid black;width:50;height:17;' value='#FFFFFF' onmousedown='colortab.style.left=event.x-50;colortab.style.top=event.y+this.offsetHeight;rndcolor(this.id)' id='wenzibeijing' onmousemove='gengxinwenzi.click()'>大小:<select style="width:50;" id=wenzidaxiao onchange='gengxinwenzi.click()'><option selected>12<script>for(i=1;i<101;i++)document.write("<option>"+i)</script></select><br>
<input type='button' value='浏览更新' class="bon2" onclick="txt1.style.color=wenziyanse.value;txt1.style.backgroundColor=wenzibeijing.value;txt1.style.fontSize=wenzidaxiao.options[wenzidaxiao.selectedIndex].text;txt1.style.fontFamily=wenziziti.options[wenziziti.selectedIndex].text;" id='gengxinwenzi'><input type='button' value='插入' class="bon2" onclick="charuwenzi()"><input type='button' value='取消' class="bon2" onclick="wenzi1.style.display='none'">
</span>
<span style='position:absolute;z-index:2000;display:none' id='tupian1'> <!--插入图片可视化-->
<input type='file' id='file1' style='width:400'><br>
<center><select id='duibi'><option selected>默认对比度<script>for(i=0;i<101;i++)document.write("<option>"+i)</script></select><select id='secai'><option selected>默认色彩度<script>for(i=0;i<9.9;i+=0.1)document.write("<option>"+new Number(i).toFixed(1))</script><option>10</select><select id=liangdu><option>默认亮度<script>for(i=-0.5;i<0.6;i+=0.1)document.write("<option>"+new Number(i).toFixed(1))</script></select><input type='checkbox' onclick="duibi.disabled=this.checked;secai.disabled=this.checked;liangdu.disabled=this.checked" id=heibai><label for='heibai'>黑白效果</label><br>
<input type='button' value='插入' class="bon2" onclick="charutupian()"><input type='button' value='取消' class="bon2" onclick="tupian1.style.display='none'">
</span>
<span style='position:absolute;z-index:2000;display:none' id='gaoji1'> <!--高级改可视化-->
<textarea id='txt2' style='border:1 solid black;width:400;height:150'></textarea><br>
<center><input type='button' value='修改' class="bon2" onclick="gaojiobj.outerHTML=txt2.value;gaojiobj=null;gaoji1.style.display='none'"><input type=button class=bon2 value=取消 onclick='gaoji1.style.display="none"'>
</span>
<span style='position:absolute;z-index:2000;display:none' id='yuandaima'> <!--所有原代码-->
<textarea id='txt3' style='border:1 solid black;width:600;height:400'></textarea><br>
<center><input type='button' value='复制' class="bon2" onclick="window.clipboardData.setData('text',txt3.value);alert('已将数据复制到系统剪切板')"> <input type='button' value='更新修改' class="bon2" onclick="div1.innerHTML=txt3.value.replace('<!--这个工程使用了蓝丽VML图像画板所建立,VML图像画版地址http://www.lshdic.com/VMLEDIT.htm-->\n','');yuandaima.style.display='none'"> <input type='button' value='取消' class="bon2" onclick="yuandaima.style.display='none'">
</span>
<span style='position:absolute;z-index:2000;display:none' id='menu1'> <!--弹出菜单-->
<input type=button class=bon2 value=置前 onclick='zz+=1;thisobj.style.zIndex=zz;menu1.style.display="none"'><br>
<input type=button class=bon2 value=置后 onclick='zz2-=1;thisobj.style.zIndex=zz2;menu1.style.display="none"'><br>
<input type=button class=bon2 value=复制 onclick='div1.innerHTML+=thisobj.outerHTML;alert("复制完成，请使用选移功能拖动");menu1.style.display="none"' id=fuzhi><br>
<input type=button class=bon2 value=删除 onclick='thisobj.outerHTML="";menu1.style.display="none"' id=shanchu><br>
<hr style='width:50' size=0.5 color=blue>
<input type=button class=bon2 value=放大 onclick='try{thisobj.style.left=parseInt(thisobj.style.left)-5;thisobj.style.top=parseInt(thisobj.style.top)-5;thisobj.style.width=parseInt(thisobj.style.width)+10;thisobj.style.height=parseInt(thisobj.style.height)+10;}catch(e){};menu1.style.display="none"' onmousemove='showhelp("放大单个图形对象,对钢笔和记忆点2无效")'><br>
<input type=button class=bon2 value=缩小 onclick='try{thisobj.style.left=parseInt(thisobj.style.left)+5;thisobj.style.top=parseInt(thisobj.style.top)+5;thisobj.style.width=parseInt(thisobj.style.width)-10;thisobj.style.height=parseInt(thisobj.style.height)-10;}catch(e){};menu1.style.display="none"' onmousemove='showhelp("缩小单个图形对象,对钢笔和记忆点2无效")'><br>
<input type=button class=bon2 value=反转 onclick='thisobj.style.filter+="fliph ";menu1.style.display="none"' onmousemove='showhelp("增加Css滤镜的fliph的左右反转效果")'><br>
<input type=button class=bon2 value=颠倒 onclick='thisobj.style.filter+="flipv ";menu1.style.display="none"' onmousemove='showhelp("增加Css滤镜的flipy的上下颠倒效果")'><br>
<hr style='width:50' size=0.5 color=blue><input type=button class=bon2 value=取消 onclick='menu1.style.display="none"'>
</span>
<iframe id=web src="about:blank" style="display:none"></iframe> <!--实现保存-->
<span style='position:absolute;z-index:2000;display:none' id='help'> <!--帮助信息-->
<textarea readonly='true' style='border:1 solid black;width:700;height:400'>
VML图像画板.2003.10（操作帮助及功能简介）
目前最强的网页VML(网页矢量图形标记语言)编辑工具之一，VML学习者的最佳学习工具
能够完成基本的三维网页的设计，做图及图形处理功能2003.9版相对2003版有了较强的提高（原作者今后有时间会去强化）
基本的画笔、图形处理、全局工具在右方，点选后在画板内使用鼠标左键应用
可将画板内VML代码图形保存为文件，亦可通过“修改原代码”实现“打开文件”等功能
2003.10相比2003.9版新增功能:
快捷键:ESC=全部清除画布内容,CTRL+Z=撤消,CTRL+Y=反撤消,上下左右键=上下左右移,CTRL+上=放大,CTRL+下=缩小,F1=帮助
误操作:修正了钢笔工具无法绘制垂直线的漏洞
新增功能
文字:实现了文字的大小、字体、颜色等编辑调整功能
阴影:该功能可以迅速方便的为VML图形建立阴影效果
透明:该功能可以迅速方便的为VML图形设定各种效果透明度级别
全部清除:清空画布，撤消可点撤消按钮恢复已删除的内容
试运行:在浏览器而非编辑模式运行你所编辑的图形,在新窗口中,查看原文件可以看到所有VML必须代码
右键菜单:增加了单个放大、缩小、反转、颠倒、取消
帮助系统:必要的地方均含有动态说明
VML图像画板.2003.9.12（版权信息）
原作者:风云舞
主 页:http://www.lshdic.com
最新版:可登陆主页查看
制作完成于:2003年9月12日
版 本:2003.9.12（第四版）
VML技术问题&经典应用范例:可以登陆http://www.lshdic.com/bbs进行讨论或搜索
授 权:授权给任何个人使用、应用，自由DHTML代码，可任意修改学习、转载、强化，作者制作本作品出发点是为了提高用户的VML编程水准、开拓一个先例，因而未加密及方便参考仅采用一页代码，为此，未经原作者同意请不要将VML图像画板任何版本用于其他商业用途，侵我版权毁我及作品名誉，公开于网站、软件发布及其他应用请保留原作者的这些声明（但可以追加其他信息，如修改者各项授权信息等）
</textarea><br>
<center><input type='button' value='关闭帮助' class="bon2" onclick="help.style.display='none'" id=guanbibangzhu>
</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(event.srcElement.tagName=="TD"&&event.srcElement.width==70)event.srcElement.bgColor="aaaaaa"' onmouseout='if(event.srcElement.tagName=="TD")event.srcElement.bgColor=""' style='cursor:hand'><td width=70 id=toptd1 onclick="yuandaima.x=event.x;yuandaima.y=event.y;txt3.value='<!--这个工程是使用了蓝丽VML图像画板所建立,VML图像画版地址http://www.lshdic.com/VMLEDIT.htm-->\n'+div1.innerHTML.replace(/>/g,'>\n').replace(/ = /g,'=').replace(/\: /g,':').replace(/\; /g,';');yuandaima.style.display=''" onmousemove='showhelp("把已保存的VML代码粘贴修改实现打开,或者手写修改当前编辑器内的所有VML代码")'>
修改原代码</td><td width=70 onclick="web.document.write('<HTML xmlns:v>\n<HEAD>\n<META http-equiv=Content-Type content=text/html;charset=gb2312>\n<TITLE>我的杰作</TITLE>\n<META name=Gemeratpr content=VML图像画板>\n<META name=GemeratprHomePage content=http://www.lshdic.com>\n<STYLE>\nv\\:*{behavior:url(#default#VML);}\n</STYLE>\n</HEAD>\n<BODY>\n'+div1.innerHTML+'\n</BODY>\n</HTML>');web.document.execCommand('SaveAs',false,'我的杰作')" onmousemove='showhelp("将编辑器图形保存为后缀为htm的文件,注意保存时请使用Unicode保存")'>保存为文件</td><td width=70 onclick="if(this.innerText=='最大化视图'){div1.style.width=document.body.offsetWidth-150;div1.style.height=document.body.offsetHeight-35;this.innerText='恢复视图'}else{div1.style.width=650;div1.style.height='100%';this.innerText='最大化视图'}">最大化视图</td><td width=70 onclick="help.x=event.x;help.y=event.y;help.style.display=''" id=bangzhu onmousemove='showhelp("显示VML图像画板的相关操作帮助、信息以及原作者声明,快捷键F1")'>操作帮助</td><td width=60> </td><td width=60> </td><td align=right onmousemove='showhelp("欢迎访问原作者的站点-蓝丽网")'>原作:风云舞,蓝丽程序员网络:<a href='http://www.lshdic.com' target='_blank'>http://www.lshdic.com</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 onmouseover='try{showdiv.style.display="none"}catch(e){}'></div>
</td><td>
<div style='width:110;height:100%;'>
<center><b>画笔选择</b><br>
<button class=bon2 id=huabi>选移<button class=bon2 id=huabi>调大小<button class=bon2 id=huabi>弧形</button><button class=bon1 id=huabi>钢笔</button><button class=bon2 id=huabi onmousemove='showhelp("画笔:绘制Polyline线段,点选后按住鼠标左键在画布内移动")'>记忆点1</button><button class=bon2 id=huabi>圆型</button><button class=bon2 id=huabi>长方型</button><button class=bon2 id=huabi>圆矩型</button><button class=bon2 id=huabi>文字</button><button class=bon2 id=huabi>图片</button><button class=bon2 id=huabi onmousemove='showhelp("修改工具:点选后,单击画布内的任意非钢笔或记忆点2或文字所画的图形即可")'>填充</button><button class=bon2 id=huabi onmousemove='showhelp("修改工具:点选后,单击画布内的任意非使用文字工具所画的图形即可")'>立体</button><button class=bon2 id=huabi onmousemove='showhelp("修改工具:点选后,单击画布内的任意非使用文字工具所画的图形即可")'>边框</button><button class=bon2 id=huabi onmousemove='showhelp("修改工具:点选后,单击画布内的任意图形,即可显示其原代码")'>高级</button><button class=bon2 id=huabi onmousemove='showhelp("画笔:用本功能可以在任意方向画线段,不过所画出的图形不是一个整体而是一条条线")'>记忆点2</button><button class=bon2 id=huabi onmousemove='showhelp("修改工具:点选后,单击画布内的任意非文字或图片的图形,可以已文字填充它的轮廓")'>文字化</button><button class=bon2 id=huabi>阴影</button><button class=bon2 id=huabi onmousemove='showhelp("修改工具:点选后,单击画布内的任意图形,可调整其Css的alpha透明属性")'>透明度</button><br>
<b>画笔基本参数</b><br>
笔边粗度 <select style="width:54;" id=bibiancudu><option selected>1<script>for(i=2;i<101;i++)document.write("<option>"+i)</script></select><br>
画笔颜色 <input style='border:1 solid black;width:54;height:17;' value='#000000' id=huabiyanse onmousedown='colortab.style.left=event.x-50;colortab.style.top=event.y+this.offsetHeight;rndcolor(this.id)'><br>
画笔背景 <input style='border:1 solid black;width:54;height:17;' value='#FFFFFF' id=huabibeijing onmousedown='colortab.style.left=event.x-50;colortab.style.top=event.y+this.offsetHeight;rndcolor(this.id)'><br>
X Y 坐标 <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>填充基本参数</b><br>
普通背景 <input style='border:1 solid black;width:54;height:17;' value='' id=tianchongbeijing onmousedown='colortab.style.left=event.x-50;colortab.style.top=event.y+this.offsetHeight;rndcolor(this.id)'><br>使用渐变背景<input type='checkbox' id='usejianbian'><br>
渐变色一 <input style='border:1 solid black;width:50;height:17;color:red' value='#FF0000' id=jianbianse1 onmousedown='colortab.style.left=event.x-50;colortab.style.top=event.y+this.offsetHeight;rndcolor(this.id)'>
<br>渐变色二 <input style='border:1 solid black;width:50;height:17;' value='#FFFFFF' id=jianbianse2 onmousedown='colortab.style.left=event.x-50;colortab.style.top=event.y+this.offsetHeight;rndcolor(this.id)'><br>
上下渐变 <input type=radio name='jianbianyangshi' checked><br>
斜向渐变 <input type=radio name='jianbianyangshi'>
</span>
<span id=liti1 style='display:none'>
<b> <br>立体基本参数</b><br>
后向伸展 <select style="width:54;" id=houxiangshenzhan><option selected>20<script>for(i=0;i<101;i++)document.write("<option>"+i)</script></select><br>
<br>前向伸展 <select style="width:54;" id=qianxiangshenzhan><option selected>0<script>for(i=1;i<101;i++)document.write("<option>"+i)</script></select><br>
偏移左边 <select style="width:54;" id=pianyizuobian><option selected>0<script>for(i=1;i<101;i++)document.write("<option>"+i)</script></select><br>
偏移上边 <select style="width:54;" id=pianyishangbian><option selected>0<script>for(i=1;i<101;i++)document.write("<option>"+i)</script></select><br>
立体颜色 <input style='border:1 solid black;width:54;height:17;' value='' id=litiyanse onmousedown='colortab.style.left=event.x-50;colortab.style.top=event.y+this.offsetHeight;rndcolor(this.id)'><br>
</span>
<span id=biankuang1 style='display:none'>
<b> <br>边框基本参数</b><br>
边框粗度 <select style="width:54;" id=biankuangcudu><option selected>1<script>for(i=0;i<101;i++)document.write("<option>"+i)</script></select><br>
<br>边框样式 <select style="width:54;" id=biankuangyangshi><option selected>none<option>dash<option>dashdot<option>dot<option>longdash<option>longdashdot<option>shortdash<option>shortdashdot<option>shortdashdotdot<option>longdashdotdot<option>shortdot</select><br>
起点尖头 <select style="width:54;" id=qidianjiantou><option selected>none<option>block<option>classic<option>diamond<option>open<option>oval</select><br>
终点尖头 <select style="width:54;" id=zhongdianjiantou><option selected>none<option>block<option>classic<option>diamond<option>open<option>oval</select><br>
边框颜色 <input style='border:1 solid black;width:54;height:17;' value='' id=biankuangyanse onmousedown='colortab.style.left=event.x-50;colortab.style.top=event.y+this.offsetHeight;rndcolor(this.id)'><br>
</span>
<span id=yinying1 style='display:none'>
<b> <br>阴影基本参数</b><br>
左右偏移 <select style="width:54;" id=zuoyoupianyi><script>for(i=-50;i<51;i++)if(i!=5)document.write("<option>"+i);else document.write("<option selected>"+i)</script></select><br>
上下偏移 <select style="width:54;" id=shangxiapianyi><script>for(i=-50;i<51;i++)if(i!=5)document.write("<option>"+i);else document.write("<option selected>"+i)</script></select><br>
阴影颜色 <input style='border:1 solid black;width:54;height:17;' value='' id=yinyingyanse onmousedown='colortab.style.left=event.x-50;colortab.style.top=event.y+this.offsetHeight;rndcolor(this.id)'><br>
</span>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -