js本身不具有任何绘图功能。
但是有两种方法可以处理:
第一种：用div来模拟；
第二种：用vml。
但是有两种方法可以处理:
第一种：用div来模拟；
第二种：用vml。
解决方案 »
- 在指定位置显示层，当窗口大小变化时，层的位置就偏移了，有什么办法解决该问题？
- 为什么在ie7下面加载的flash跟extjs控件会分层，重叠的？其他控件也这样，请问下这怎么解决
- 有没有办法实现在按提交按钮后，弹出一个提示信息，在弹出提示信息的同时也提交◎◎◎◎
- 紧急求助！关于提交form后，弹出窗口的问题
- Jquery的Selectable，谁知道如何获取所选择的对象？
- 关于动态生成的文本域取值问题，谢谢。
- （简单问题，在线等待）javascript中如何去除输入文本左右两边的空格字符？
- 请教几个小问题~~~~
- 怎样才能强制定义select的宽度??
- 简单的问题啊！！!<tbody>标记有什么作用。怎么用，都有什么功能啊。请详细说明啊！！！
- window.event.srcElement.className 这段代码吃不透, 请教大侠
- 如何实例模态窗口上,点了问号后,在点别的地方出现提示,和windows中的一样
<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－www.51windows.Net</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'> <!--长方形可视化-->
<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'> <!--高级改可视化-->
<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='复制' class="bon2" onclick="window.clipboardData.setData('text',txt3.value);alert('已将数据复制到系统剪切板')"> <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=复制 onclick='div1.innerHTML+=thisobj.outerHTML;alert("复制完成，请使用选移功能拖动");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> <!--实现保存-->
<span style='position:absolute;z-index:2000;display:none' id='help'> <!--帮助信息-->
<textarea readonly='true' style='border:1 solid black;width:500;height:300'>
VML图像画板.2003（操作帮助及功能简介） 目前最强的网页VML(网页矢量图形标记语言)编辑工具之一，VML学习者的最佳学习工具
能够完成基本的三维网页的设计，做图及图形处理功能一般（原作者今后有时间会去强化）
基本的画笔及图形处理工具在右方，点选后在画板内使用鼠标左键应用
可将画板内VML代码图形保存为文件，亦可通过“修改原代码”实现“打开文件”等功能
文字:该功能暂未提供可视化的修改编辑功能，但代码为HTML相对比较简单
图片:支持FILE:///及HTTP://两种协议类型，矢量化后失真现象很少
记忆点:该功能只有在点击后大于点击时X，Y的坐标，才能看到效果，今后也许原作者会找到好的解决方法
填充:该功能只有“钢笔”所划的线无法使用
边框:该功能的“起点尖头”“终点尖头”只对“钢笔”“记忆点”所画的图形有效
保存为文件:在弹出保存对话框时，在对话框中“语言”下拉菜单中选择“Unicode”保存后能够正常显示
关于打开文件的功能:由于客户端资源及文件编码类型问题，该功能先已“修改原代码”代替，可直接将已保存的VML输入后点击“更新修改”即可虚拟完成已有文件的打开 VML图像画板.2003（版权信息） 原作者:风云舞
主 页:http://www.lshdic.com
最新版:可登陆主页查看
发布于:2003年8月25日
授 权:授权给任何个人使用、应用，自由DHTML代码，可任意修改学习、转载、强化，作者制作本作品出发点是为了提高用户的VML编程水准、开拓一个先例，因而未加密及方便参考仅采用一页代码，为此，未经原作者同意请不要将VML图像画板任何版本用于其他商业用途，侵我版权毁我及作品名声，公开于网站、软件发布及其他应用请保留原作者的这些声明（但可以追加其他信息，如修改者各项授权信息等）
</textarea><br>
<center><input type='button' value='关闭帮助' class="bon2" onclick="help.style.display='none'">
</span>
<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>我的杰作－www.51windows.Net</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,'我的杰作')">保存为文件</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=''">操作帮助</td><td width=60> </td><td width=60> </td><td align=right>原作:风云舞,蓝丽程序员网络:<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></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>记忆点<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>立体<button class=bon2 id=huabi>边框<button class=bon2 id=huabi>高级</button><br2>
<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: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>立体基本参数</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>
</div>
</td></tr></table>
</td></tr>
</table>
<script language='jscript'>
var bi=4 //定义当前使用的画笔工具，3为铅笔
var color1='#000000',color2='#000000',size1=0 //定义缺剩的画笔颜色及画笔填充颜色和笔边粗度
var xx=0,yy=0,zz=1000 //定义缺剩的X及Y坐标
var isok=false //区分画笔起点是否在DIV内，超出范围则无效
var moveobj=null,ckleft=0,cktop=0,ckwid=0,ckhei=0,ckto="" //被移动物件、调整大小物件的引用
var poly1=null,oldvalue="",oldx=0,oldy=0 //为了完成记忆点，创建一个可折式线段
var gaojiobj=null //为了完成“高级”功能，绑定被修改对象
var thisobj=null //为了完成各种基本编辑功能，如“置前”“复制”“删除”等
var zz2=1000 //为完成“置后”功能，zz2为负数
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: //调大小
if(event.srcElement.parentElement.id=="div1"){moveobj=event.srcElement;
ckleft=parseInt(moveobj.style.left);cktop=parseInt(moveobj.style.top);ckwid=moveobj.offsetWidth;ckhei=moveobj.offsetHeight}
break;
case 3: //扔出
break;
case 4: //钢笔
line1.style.left=event.x;line1.style.top=event.y;line1.to="0,0";line1.style.display=""
break;
case 5: //记忆点
if(poly1==null){
oldx=xx;oldy=yy
poly1=div1.appendChild(document.createElement("<v:polyline points='0 0 0 0' style='position:absolute;z-index:"+zz+";left:"+xx+";top:"+yy+";' strokecolor='"+color1+"' strokeweight='"+size1+"' fillcolor='"+color2+"'/>"))
}
if(oldx-tempx<1&&oldy-tempy<1)oldvalue=poly1.points.value.replace(/,/g,' ')
break;
case 6: //圆形
oval1.style.left=event.x;oval1.style.top=event.y;oval1.style.width=0;oval1.style.height=0;oval1.style.display=""
break;
case 7: //长方形
rect1.style.left=event.x;rect1.style.top=event.y;rect1.style.width=0;rect1.style.height=0;rect1.style.display=""
break;
case 8: //圆矩形
roundrect1.style.left=event.x;roundrect1.style.top=event.y;roundrect1.style.width=0;roundrect1.style.height=0;roundrect1.style.display=""
break;
case 9: //文字
wenzi1.style.left=event.x;wenzi1.style.top=event.y;wenzi1.style.display=""
break;
case 10: //图片
tupian1.style.left=event.x;tupian1.style.top=event.y;tupian1.style.display=""
break;
}
}}
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){ //记忆点
if(oldx-tempx<0&&oldy-tempy<0)poly1.points.value=oldvalue+" "+(tempx-oldx)+" "+(tempy-oldy)
}
if(event.button==1){
switch(bi){
case 1: //选移
if(moveobj!=null){moveobj.style.left=tempx-ckleft;moveobj.style.top=tempy-cktop}
break;
case 2: //调大小
if(moveobj!=null){
if(moveobj.tagName!="line"){
if(tempx>ckleft){moveobj.style.width=tempx-ckleft}else{moveobj.style.left=tempx;moveobj.style.width=ckleft-tempx}
if(tempy>cktop){moveobj.style.height=tempy-cktop}else{moveobj.style.top=tempy;moveobj.style.height=cktop-tempy}
}else{moveobj.to=parseInt(tempx-ckleft)+","+parseInt(tempy-cktop);if(ckto=="")ckto=parseInt(tempx-ckleft)+","+parseInt(tempy-cktop);}
}
break;
case 4: //钢笔
line1.to=(tempx-xx)+","+(tempy-yy)
break;
case 6: //圆形
if(tempx-xx<0){oval1.style.left=event.x;oval1.style.width=(xx-tempx)}else{oval1.style.width=(tempx-xx)}
if(tempy-yy<0){oval1.style.top=event.y;oval1.style.height=(yy-tempy)}else{oval1.style.height=(tempy-yy)}
break;
case 7: //长方形
if(tempx-xx<0){rect1.style.left=event.x;rect1.style.width=(xx-tempx)}else{rect1.style.width=(tempx-xx)}
if(tempy-yy<0){rect1.style.top=event.y;rect1.style.height=(yy-tempy)}else{rect1.style.height=(tempy-yy)}
break;
case 8: //圆矩形
if(tempx-xx<0){roundrect1.style.left=event.x;roundrect1.style.width=(xx-tempx)}else{roundrect1.style.width=(tempx-xx)}
if(tempy-yy<0){roundrect1.style.top=event.y;roundrect1.style.height=(yy-tempy)}else{roundrect1.style.height=(tempy-yy)}
break;
}}}