站内搜索: 请输入搜索关键词

当前页面: 开发资料首页Javascript 专题5星级DHTML程序,VML在线图像画板2003.9版,极品!

5星级DHTML程序,VML在线图像画板2003.9版,极品!

摘要: 5星级DHTML程序,VML在线图像画板2003.9版,极品!


纯DHTML写的一个在线画图程序,原代码只有一页,最新版或在线演示

http://www.lshdic.com/VMLEDIT.HTM

进入上边那个网址测试,然后记的另存一份,部分原代码浏览(太长贴不开)


<head>




蓝丽网 - Vml图像画板.2003

</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'>

目前最强的网页VML(网页矢量图形标记语言)编辑工具之一,VML学习者的最佳学习工具
能够完成基本的三维网页的设计,做图及图形处理功能一般(原作者今后有时间会去强化)
基本的画笔及图形处理工具在右方,点选后在画板内使用鼠标左键应用
可将画板内VML代码图形保存为文件,亦可通过“修改原代码”实现“打开文件”等功能
文字:该功能暂未提供可视化的修改编辑功能,但代码为HTML相对比较简单
图片:支持FILE:///及HTTP://两种协议类型,矢量化后失真现象很少
记忆点:该功能只有在点击后大于点击时X,Y的坐标,才能看到效果,今后也许原作者会找到好的解决方法
填充:该功能只有“钢笔”所划的线无法使用
边框:该功能的“起点尖头”“终点尖头”只对“钢笔”“记忆点”所画的图形有效
保存为文件:在弹出保存对话框时,在对话框中“语言”下拉菜单中选择“Unicode”保存后能够正常显示
关于打开文件的功能:由于客户端资源及文件编码类型问题,该功能先已“修改原代码”代替,可直接将已保存的VML输入后点击“更新修改”即可虚拟完成已有文件的打开

VML图像画板.2003.8(版权信息)

原作者:风云舞
主 页:http://www.lshdic.com
最新版:可登陆主页查看
发布于:2003年8月28日
授 权:授权给任何个人使用、应用,自由DHTML代码,可任意修改学习、转载、强化,作者制作本作品出发点是为了提高用户的VML编程水准、开拓一个先例,因而未加密及方便参考仅采用一页代码,为此,未经原作者同意请不要将VML图像画板任何版本用于其他商业用途,侵我版权毁我及作品名声,公开于网站、软件发布及其他应用请保留原作者的这些声明(但可以追加其他信息,如修改者各项授权信息等)
</textarea>

<input type='button' value='关闭帮助' class="bon2" onclick="help.style.display='none'">

<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('\n我的杰作\n\n\n\n</head>\n<body>\n'+div1.innerHTML+'\n</body>\n');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>原作:风云舞,蓝丽程序员网络:http://www.lshdic.com
</td></tr><tr>
<td width=100% colspan=10 height=500>
<table cellspacing=0 cellpadding=0 height=100%%><tr><td width=660>

</td><td>

画笔选择


画笔基本参数

笔边粗度 <select style="width:54;" id=bibiancudu><option selected>1<script>for(i=2;i<101;i++)document.write("<option>"+i)</script></select>

画笔颜色 <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)'>

画笔背景 <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)'>

X Y 坐标 <input disabled='true' type='text' value='0,0' id='zuobiao' style='border:1 solid black;width:54;height:17;'>




全局工具

<input type='button' value='撤消' onclick='if(youbiao>0){div1.innerHTML=chexiao[youbiao];youbiao-=1;fanchexiao1=2}' class=bon2><input type='button' value='反撤消' onclick='if(youbiao
<input type='button' value='放大' onclick='for(i=0;i
<input type='button' value='左移' onclick='for(i=0;i
<input type='button' value='上移' onclick='for(i=0;i

</td></tr></table>
</td></tr>
</table>
<table cellspacing=0 cellpadding=0 style='position:absolute;width:100;height:100;display:none;background-color:red;z-index:3000' 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 //为了完成记忆点,创建一个可折式线段

</td> </tr> <tr> <td vAlign=top align=left height="100%">
↑返回目录
前一篇: 几种常用的表单输入判断
后一篇: 嵌入式Web视频点播系统实现方法