VML應(yīng)用實(shí)例大全
更新時(shí)間：2006年12月24日 00:00:00 作者：
<HTML xmlns:v>
<HEAD>
<META http-equiv="Content-Type" content="text/html; Charset=gb2312">
<META name="GENERATOR" content="網(wǎng)絡(luò)程序員伴侶(Lshdic)2004">
<META name="GENERATORDOWNLOADADDRESS" content="http://www.lshdic.com/downlshdic.asp">
<META NAME="KEYWORDS" CONTENT="Vml圖像畫(huà)板">
<title>藍(lán)麗網(wǎng) - Vml圖像畫(huà)板.2003</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='return false' style='margin:1;cursor:default' vlink=#3732CD link='#3732CD' onselectstart='if(event.srcElement.tagName!="TEXTAREA"&&event.srcElement.tagName!="INPUT")return false'>
<v:Line style='position:absolute;z-index:2000;display:none' id='line1'> <!--鋼筆可視化-->
<v:Stroke dashstyle='shortdash'/>
</v:line>
<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'> <!--長(zhǎng)方形可視化-->
<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:200;height:50'></textarea><br>
<center><input type='button' value='插入' class="bon2" onclick="charuwenzi()">
</span>
<span style='position:absolute;z-index:2000;display:none' id='tupian1'> <!--插入圖片可視化-->
<input type='file' id='file1' style='width:200'><br>
<center><input type='button' value='插入' class="bon2" onclick="charutupian()">
</span>
<span style='position:absolute;z-index:2000;display:none' id='gaoji1'> <!--高級(jí)改可視化-->
<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'">
</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='復(fù)制' class="bon2" onclick="window.clipboardData.setData('text',txt3.value);alert('已將數(shù)據(jù)復(fù)制到系統(tǒng)剪切板')"> <input type='button' value='更新修改' class="bon2" onclick="div1.innerHTML=txt3.value;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=復(fù)制 onclick='div1.innerHTML+=thisobj.outerHTML;alert("復(fù)制完成，請(qǐng)使用選移功能拖動(dòng)");menu1.style.display="none"'><br>
<input type=button class=bon2 value=刪除 onclick='thisobj.outerHTML="";menu1.style.display="none"'><br>
</span>
<iframe id=web src="about:blank" style="display:none"></iframe> <!--實(shí)現(xiàn)保存-->
<span style='position:absolute;z-index:2000;display:none' id='help'> <!--幫助信息-->
<textarea readonly='true' style='border:1 solid black;width:500;height:300'>
VML圖像畫(huà)板.2003（操作幫助及功能簡(jiǎn)介）
目前最強(qiáng)的網(wǎng)頁(yè)VML(網(wǎng)頁(yè)矢量圖形標(biāo)記語(yǔ)言)編輯工具之一，VML學(xué)習(xí)者的最佳學(xué)習(xí)工具
能夠完成基本的三維網(wǎng)頁(yè)的設(shè)計(jì)，做圖及圖形處理功能一般（原作者今后有時(shí)間會(huì)去強(qiáng)化）
基本的畫(huà)筆及圖形處理工具在右方，點(diǎn)選后在畫(huà)板內(nèi)使用鼠標(biāo)左鍵應(yīng)用
可將畫(huà)板內(nèi)VML代碼圖形保存為文件，亦可通過(guò)“修改原代碼”實(shí)現(xiàn)“打開(kāi)文件”等功能
文字:該功能暫未提供可視化的修改編輯功能，但代碼為HTML相對(duì)比較簡(jiǎn)單
圖片:支持FILE:///及HTTP://兩種協(xié)議類型，矢量化后失真現(xiàn)象很少
記憶點(diǎn):該功能只有在點(diǎn)擊后大于點(diǎn)擊時(shí)X，Y的坐標(biāo)，才能看到效果，今后也許原作者會(huì)找到好的解決方法
填充:該功能只有“鋼筆”所劃的線無(wú)法使用
邊框:該功能的“起點(diǎn)尖頭”“終點(diǎn)尖頭”只對(duì)“鋼筆”“記憶點(diǎn)”所畫(huà)的圖形有效
保存為文件:在彈出保存對(duì)話框時(shí)，在對(duì)話框中“語(yǔ)言”下拉菜單中選擇“Unicode”保存后能夠正常顯示
關(guān)于打開(kāi)文件的功能:由于客戶端資源及文件編碼類型問(wèn)題，該功能先已“修改原代碼”代替，可直接將已保存的VML輸入后點(diǎn)擊“更新修改”即可虛擬完成已有文件的打開(kāi)
VML圖像畫(huà)板.2003（版權(quán)信息）
原作者:風(fēng)云舞
主 頁(yè):http://www.lshdic.com
最新版:可登陸主頁(yè)查看
發(fā)布于:2003年8月25日
授 權(quán):授權(quán)給任何個(gè)人使用、應(yīng)用，自由DHTML代碼，可任意修改學(xué)習(xí)、轉(zhuǎn)載、強(qiáng)化，作者制作本作品出發(fā)點(diǎn)是為了提高用戶的VML編程水準(zhǔn)、開(kāi)拓一個(gè)先例，因而未加密及方便參考僅采用一頁(yè)代碼，為此，未經(jīng)原作者同意請(qǐng)不要將VML圖像畫(huà)板任何版本用于其他商業(yè)用途，侵我版權(quán)毀我及作品名聲，公開(kāi)于網(wǎng)站、軟件發(fā)布及其他應(yīng)用請(qǐng)保留原作者的這些聲明（但可以追加其他信息，如修改者各項(xiàng)授權(quán)信息等）
</textarea><br>
<center><input type='button' value='關(guān)閉幫助' class="bon2" onclick="help.style.display='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(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=div1.innerHTML.replace(/>/g,'>\n').replace(/ = /g,'=').replace(/\: /g,':').replace(/\; /g,';');yuandaima.style.display=''">
修改原代碼</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=藍(lán)麗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,'我的杰作')">保存為文件</td><td width=70 onclick="if(this.innerText=='最大化視圖'){div1.style.width=document.body.offsetWidth-150;div1.style.height=document.body.offsetHeight-35;this.innerText='恢復(fù)視圖'}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=''">操作幫助</td><td width=60> </td><td width=60> </td><td align=right>原作:風(fēng)云舞,藍(lán)麗程序員網(wǎng)絡(luò):<a 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></div>
</td><td>
<div style='width:110;height:100%;'>
<center><b>畫(huà)筆選擇</b><br>
<button class=bon2 id=huabi>選移<button class=bon2 id=huabi>調(diào)大小<button class=bon2 id=huabi>扔出</button><button class=bon1 id=huabi>鋼筆</button><button class=bon2 id=huabi>記憶點(diǎn)<button class=bon2 id=huabi>圓型<button class=bon2 id=huabi>長(zhǎng)方型<button class=bon2 id=huabi>圓矩型<button class=bon2 id=huabi>文字<button class=bon2 id=huabi>圖片<button class=bon2 id=huabi>填充<button class=bon2 id=huabi>立體<button class=bon2 id=huabi>邊框<button class=bon2 id=huabi>高級(jí)</button><br2>
<b>畫(huà)筆基本參數(shù)</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>
畫(huà)筆顏色 <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>
畫(huà)筆背景 <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 坐標(biāo) <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>填充基本參數(shù)</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:54;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:54;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>立體基本參數(shù)</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>邊框基本參數(shù)</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>
起點(diǎn)尖頭 <select style="width:54;" id=qidianjiantou><option selected>none<option>block<option>classic<option>diamond<option>open<option>oval</select><br>
終點(diǎn)尖頭 <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>
</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 //定義當(dāng)前使用的畫(huà)筆工具，3為鉛筆
var color1='#000000',color2='#000000',size1=0 //定義缺剩的畫(huà)筆顏色及畫(huà)筆填充顏色和筆邊粗度
var xx=0,yy=0,zz=1000 //定義缺剩的X及Y坐標(biāo)
var isok=false //區(qū)分畫(huà)筆起點(diǎn)是否在DIV內(nèi)，超出范圍則無(wú)效
var moveobj=null,ckleft=0,cktop=0,ckwid=0,ckhei=0,ckto="" //被移動(dòng)物件、調(diào)整大小物件的引用
var poly1=null,oldvalue="",oldx=0,oldy=0 //為了完成記憶點(diǎn)，創(chuàng)建一個(gè)可折式線段
var gaojiobj=null //為了完成“高級(jí)”功能，綁定被修改對(duì)象
var thisobj=null //為了完成各種基本編輯功能，如“置前”“復(fù)制”“刪除”等
var zz2=1000 //為完成“置后”功能，zz2為負(fù)數(shù)
function div1.onmousedown(){
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: //調(diào)大小
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: //記憶點(diǎn)
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: //長(zhǎng)方形
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;
}
}}
function div1.onmousemove(){
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){ //記憶點(diǎn)
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: //調(diào)大小
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: //長(zhǎng)方形
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;
}}}
function div1.onmouseup(){
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坐標(biāo)越界")}
if(tempy>allform1.offsetTop+toptd1.offsetHeight+divhei+5||tempy<allform1.offsetTop+toptd1.offsetHeight+5){forerr();return alert("Y坐標(biāo)越界")}
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("被移動(dòng)物體X1超出界限")}
if(moveobj!=null&&parseInt(moveobj.style.left)+moveobj.offsetWidth-2>allform1.offsetLeft+divwid+5){forerr();return alert("被移動(dòng)物體X2超出界限")}
if(moveobj!=null&&parseInt(moveobj.style.top)<allform1.offsetTop+toptd1.offsetHeight+5){forerr();return alert("被移動(dòng)物體Y1超出界限")}
if(moveobj!=null&&parseInt(moveobj.style.top)+moveobj.offsetHeight-2>allform1.offsetTop+toptd1.offsetHeight+divhei+3){forerr();return alert("被移動(dòng)物體Y2超出界限")}
moveobj=null
break;
case 2: //調(diào)大小
moveobj=null;ckto=""
break;
case 3: //仍出
if(event.srcElement.parentElement.id=="div1")event.srcElement.outerHTML=""
break;
case 4: //鋼筆
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: //長(zhǎng)方形
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: //高級(jí)
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+".style.color='#"+tempcolor1+"';colortab.style.display='none'></td>"
}str1+="</tr>"}
colorid.innerHTML=str1+"</table>"
}
function document.onmouseup(){
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){ //清除記憶點(diǎn)
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('請(qǐng)先輸入文字，在點(diǎn)擊插入')
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('請(qǐng)先輸入圖片路徑(HTTP://或FILE:///)格式，在點(diǎn)擊插入')
if(file1.value.indexOf("'")>-1)return alert("圖片地址不可以含有違禁字符 ' 單引號(hào)")
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>
<HEAD>
<META http-equiv="Content-Type" content="text/html; Charset=gb2312">
<META name="GENERATOR" content="網(wǎng)絡(luò)程序員伴侶(Lshdic)2004">
<META name="GENERATORDOWNLOADADDRESS" content="http://www.lshdic.com/downlshdic.asp">
<META NAME="KEYWORDS" CONTENT="Vml圖像畫(huà)板">
<title>藍(lán)麗網(wǎng) - Vml圖像畫(huà)板.2003</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='return false' style='margin:1;cursor:default' vlink=#3732CD link='#3732CD' onselectstart='if(event.srcElement.tagName!="TEXTAREA"&&event.srcElement.tagName!="INPUT")return false'>
<v:Line style='position:absolute;z-index:2000;display:none' id='line1'> <!--鋼筆可視化-->
<v:Stroke dashstyle='shortdash'/>
</v:line>
<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'> <!--長(zhǎng)方形可視化-->
<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:200;height:50'></textarea><br>
<center><input type='button' value='插入' class="bon2" onclick="charuwenzi()">
</span>
<span style='position:absolute;z-index:2000;display:none' id='tupian1'> <!--插入圖片可視化-->
<input type='file' id='file1' style='width:200'><br>
<center><input type='button' value='插入' class="bon2" onclick="charutupian()">
</span>
<span style='position:absolute;z-index:2000;display:none' id='gaoji1'> <!--高級(jí)改可視化-->
<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'">
</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='復(fù)制' class="bon2" onclick="window.clipboardData.setData('text',txt3.value);alert('已將數(shù)據(jù)復(fù)制到系統(tǒng)剪切板')"> <input type='button' value='更新修改' class="bon2" onclick="div1.innerHTML=txt3.value;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=復(fù)制 onclick='div1.innerHTML+=thisobj.outerHTML;alert("復(fù)制完成，請(qǐng)使用選移功能拖動(dòng)");menu1.style.display="none"'><br>
<input type=button class=bon2 value=刪除 onclick='thisobj.outerHTML="";menu1.style.display="none"'><br>
</span>
<iframe id=web src="about:blank" style="display:none"></iframe> <!--實(shí)現(xiàn)保存-->
<span style='position:absolute;z-index:2000;display:none' id='help'> <!--幫助信息-->
<textarea readonly='true' style='border:1 solid black;width:500;height:300'>
VML圖像畫(huà)板.2003（操作幫助及功能簡(jiǎn)介）
目前最強(qiáng)的網(wǎng)頁(yè)VML(網(wǎng)頁(yè)矢量圖形標(biāo)記語(yǔ)言)編輯工具之一，VML學(xué)習(xí)者的最佳學(xué)習(xí)工具
能夠完成基本的三維網(wǎng)頁(yè)的設(shè)計(jì)，做圖及圖形處理功能一般（原作者今后有時(shí)間會(huì)去強(qiáng)化）
基本的畫(huà)筆及圖形處理工具在右方，點(diǎn)選后在畫(huà)板內(nèi)使用鼠標(biāo)左鍵應(yīng)用
可將畫(huà)板內(nèi)VML代碼圖形保存為文件，亦可通過(guò)“修改原代碼”實(shí)現(xiàn)“打開(kāi)文件”等功能
文字:該功能暫未提供可視化的修改編輯功能，但代碼為HTML相對(duì)比較簡(jiǎn)單
圖片:支持FILE:///及HTTP://兩種協(xié)議類型，矢量化后失真現(xiàn)象很少
記憶點(diǎn):該功能只有在點(diǎn)擊后大于點(diǎn)擊時(shí)X，Y的坐標(biāo)，才能看到效果，今后也許原作者會(huì)找到好的解決方法
填充:該功能只有“鋼筆”所劃的線無(wú)法使用
邊框:該功能的“起點(diǎn)尖頭”“終點(diǎn)尖頭”只對(duì)“鋼筆”“記憶點(diǎn)”所畫(huà)的圖形有效
保存為文件:在彈出保存對(duì)話框時(shí)，在對(duì)話框中“語(yǔ)言”下拉菜單中選擇“Unicode”保存后能夠正常顯示
關(guān)于打開(kāi)文件的功能:由于客戶端資源及文件編碼類型問(wèn)題，該功能先已“修改原代碼”代替，可直接將已保存的VML輸入后點(diǎn)擊“更新修改”即可虛擬完成已有文件的打開(kāi)
VML圖像畫(huà)板.2003（版權(quán)信息）
原作者:風(fēng)云舞
主 頁(yè):http://www.lshdic.com
最新版:可登陸主頁(yè)查看
發(fā)布于:2003年8月25日
授 權(quán):授權(quán)給任何個(gè)人使用、應(yīng)用，自由DHTML代碼，可任意修改學(xué)習(xí)、轉(zhuǎn)載、強(qiáng)化，作者制作本作品出發(fā)點(diǎn)是為了提高用戶的VML編程水準(zhǔn)、開(kāi)拓一個(gè)先例，因而未加密及方便參考僅采用一頁(yè)代碼，為此，未經(jīng)原作者同意請(qǐng)不要將VML圖像畫(huà)板任何版本用于其他商業(yè)用途，侵我版權(quán)毀我及作品名聲，公開(kāi)于網(wǎng)站、軟件發(fā)布及其他應(yīng)用請(qǐng)保留原作者的這些聲明（但可以追加其他信息，如修改者各項(xiàng)授權(quán)信息等）
</textarea><br>
<center><input type='button' value='關(guān)閉幫助' class="bon2" onclick="help.style.display='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(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=div1.innerHTML.replace(/>/g,'>\n').replace(/ = /g,'=').replace(/\: /g,':').replace(/\; /g,';');yuandaima.style.display=''">
修改原代碼</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=藍(lán)麗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,'我的杰作')">保存為文件</td><td width=70 onclick="if(this.innerText=='最大化視圖'){div1.style.width=document.body.offsetWidth-150;div1.style.height=document.body.offsetHeight-35;this.innerText='恢復(fù)視圖'}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=''">操作幫助</td><td width=60> </td><td width=60> </td><td align=right>原作:風(fēng)云舞,藍(lán)麗程序員網(wǎng)絡(luò):<a 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></div>
</td><td>
<div style='width:110;height:100%;'>
<center><b>畫(huà)筆選擇</b><br>
<button class=bon2 id=huabi>選移<button class=bon2 id=huabi>調(diào)大小<button class=bon2 id=huabi>扔出</button><button class=bon1 id=huabi>鋼筆</button><button class=bon2 id=huabi>記憶點(diǎn)<button class=bon2 id=huabi>圓型<button class=bon2 id=huabi>長(zhǎng)方型<button class=bon2 id=huabi>圓矩型<button class=bon2 id=huabi>文字<button class=bon2 id=huabi>圖片<button class=bon2 id=huabi>填充<button class=bon2 id=huabi>立體<button class=bon2 id=huabi>邊框<button class=bon2 id=huabi>高級(jí)</button><br2>
<b>畫(huà)筆基本參數(shù)</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>
畫(huà)筆顏色 <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>
畫(huà)筆背景 <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 坐標(biāo) <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>填充基本參數(shù)</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:54;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:54;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>立體基本參數(shù)</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>邊框基本參數(shù)</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>
起點(diǎn)尖頭 <select style="width:54;" id=qidianjiantou><option selected>none<option>block<option>classic<option>diamond<option>open<option>oval</select><br>
終點(diǎn)尖頭 <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>
</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 //定義當(dāng)前使用的畫(huà)筆工具，3為鉛筆
var color1='#000000',color2='#000000',size1=0 //定義缺剩的畫(huà)筆顏色及畫(huà)筆填充顏色和筆邊粗度
var xx=0,yy=0,zz=1000 //定義缺剩的X及Y坐標(biāo)
var isok=false //區(qū)分畫(huà)筆起點(diǎn)是否在DIV內(nèi)，超出范圍則無(wú)效
var moveobj=null,ckleft=0,cktop=0,ckwid=0,ckhei=0,ckto="" //被移動(dòng)物件、調(diào)整大小物件的引用
var poly1=null,oldvalue="",oldx=0,oldy=0 //為了完成記憶點(diǎn)，創(chuàng)建一個(gè)可折式線段
var gaojiobj=null //為了完成“高級(jí)”功能，綁定被修改對(duì)象
var thisobj=null //為了完成各種基本編輯功能，如“置前”“復(fù)制”“刪除”等
var zz2=1000 //為完成“置后”功能，zz2為負(fù)數(shù)
function div1.onmousedown(){
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: //調(diào)大小
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: //記憶點(diǎn)
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: //長(zhǎng)方形
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;
}
}}
function div1.onmousemove(){
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){ //記憶點(diǎn)
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: //調(diào)大小
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: //長(zhǎng)方形
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;
}}}
function div1.onmouseup(){
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坐標(biāo)越界")}
if(tempy>allform1.offsetTop+toptd1.offsetHeight+divhei+5||tempy<allform1.offsetTop+toptd1.offsetHeight+5){forerr();return alert("Y坐標(biāo)越界")}
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("被移動(dòng)物體X1超出界限")}
if(moveobj!=null&&parseInt(moveobj.style.left)+moveobj.offsetWidth-2>allform1.offsetLeft+divwid+5){forerr();return alert("被移動(dòng)物體X2超出界限")}
if(moveobj!=null&&parseInt(moveobj.style.top)<allform1.offsetTop+toptd1.offsetHeight+5){forerr();return alert("被移動(dòng)物體Y1超出界限")}
if(moveobj!=null&&parseInt(moveobj.style.top)+moveobj.offsetHeight-2>allform1.offsetTop+toptd1.offsetHeight+divhei+3){forerr();return alert("被移動(dòng)物體Y2超出界限")}
moveobj=null
break;
case 2: //調(diào)大小
moveobj=null;ckto=""
break;
case 3: //仍出
if(event.srcElement.parentElement.id=="div1")event.srcElement.outerHTML=""
break;
case 4: //鋼筆
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: //長(zhǎng)方形
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: //高級(jí)
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+".style.color='#"+tempcolor1+"';colortab.style.display='none'></td>"
}str1+="</tr>"}
colorid.innerHTML=str1+"</table>"
}
function document.onmouseup(){
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){ //清除記憶點(diǎn)
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('請(qǐng)先輸入文字，在點(diǎn)擊插入')
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('請(qǐng)先輸入圖片路徑(HTTP://或FILE:///)格式，在點(diǎn)擊插入')
if(file1.value.indexOf("'")>-1)return alert("圖片地址不可以含有違禁字符 ' 單引號(hào)")
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>
相關(guān)文章
歡迎品嘗用vml畫(huà)的蘋(píng)果~~...2006-12-12
VML應(yīng)用實(shí)例大全...2006-12-12
放大縮小VML...2006-12-12
給VML增加事件...2006-12-12
vml簡(jiǎn)介...2006-12-12
腳本動(dòng)態(tài)生成VML...2006-12-12
Shape對(duì)象與VML坐標(biāo)系...2006-12-12
文本修改留痕...2006-12-12
數(shù)據(jù)圖表...2006-12-12
Group容器...2006-12-12