CSDN首页 空间 新闻 论坛 Blog 下载 读书 网摘 搜索 .NET Java 视频 接项目 求职 在线学习 买书 程序员 通知
可用分押宝游戏火热进行中... 专题改版：Java Web 专题
CSDN社区
搜索 收藏 打印 关闭
CSDN社区 >  Web 开发 >  JavaScript

绘图---求助

楼主liberationxin（高山）2005-04-02 13:42:40 在 Web 开发 / JavaScript 提问

请问用JavaScript   绘制   平行四边形，直线，长方体 问题点数：0、回复次数：8Top

1 楼micker（希望下一代别再贫穷）回复于 2005-04-02 14:23:58 得分 0

js本身不具有任何绘图功能。  
  但是有两种方法可以处理:  
  第一种：用div来模拟；  
  第二种：用vml。Top

2 楼liberationxin（高山）回复于 2005-04-02 14:52:33 得分 0

请贴出代码Top

3 楼yjs_lh（长风浪子）回复于 2005-04-02 15:31:02 得分 0

看看VML相关的文档吧Top

4 楼fantiny（卖身不卖艺的菜鸟）回复于 2005-04-02 17:08:15 得分 0

<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－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>Top

5 楼fantiny（卖身不卖艺的菜鸟）回复于 2005-04-02 17:08:43 得分 0

<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>我的杰作－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>&nbsp;</td><td   width=60>&nbsp;</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>&nbsp;<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>&nbsp;<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>&nbsp;<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>Top

6 楼fantiny（卖身不卖艺的菜鸟）回复于 2005-04-02 17:09:08 得分 0

<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   //定义当前使用的画笔工具，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;    
  }}}Top

7 楼cybernaute（思客.NETing）回复于 2005-04-02 18:26:35 得分 0

http://dev.csdn.net/develop/article/28/28060.shtmTop

8 楼yeyu710（叶雨）回复于 2005-04-02 20:10:28 得分 0

唉,这东东还真难啊Top

相关问题

  • 绘图
  • 绘图
  • 绘图?
  • 绘图问题
  • 关于绘图。
  • 绘图问题
  • 关于绘图！
  • 绘图问题
  • 用JSP绘图
  • 绘图问题？

关键词

  • windows.net

得分解答快速导航

  • 帖主：liberationxin

相关链接

  • Web开发类图书

广告也精彩

反馈

请通过下述方式给我们反馈
反馈
提问
网站简介|广告服务|VIP资费标准|银行汇款帐号|网站地图|帮助|联系方式|诚聘英才|English|问题报告
世纪乐知(北京)网络技术有限公司 版权所有, 京 ICP 证 020026 号
北京创新乐知广告有限公司 提供技术支持
Copyright © 2000-2007, CSDN.NET, All Rights Reserved
GongshangLogo