当前位置：首页 → 问答吧 → VML实现铅笔功能?

VML实现铅笔功能?

时间：2008-08-20

来源：互联网

请问如何用VML或其他的方式实现类似系统画图里面的铅笔那样的画线功能?
因为做课件, 在讲解的过程中需要标记或写字之类, 小生跪求代码或思路...谢谢

作者: test01x 发布时间: 2008-08-20

实际程序
<HTML xmlns:v> <HEAD> <META http-equiv='Content-Type' content='text/html;charset=gb2312'> <Meta name='Gemeratpr' content='网络程序员伴侣(Lshdic)2005'> <TITLE>VML最简实现铅笔绘图功能</TITLE> <STYLE> v\:*{behavior:url(#default#VML);} /*声明V为VML变量*/ </STYLE> </HEAD> <body bgcolor=black> <div id=div1 style="background-color:white;width:400;height:400"></div> <input type=button value="清空" onclick="div1.innerHTML=''"> <script> //作者:风云舞 var xx=0,yy=0,oldvalue="",poly1,zz=1 function div1.onmousedown(){ //鼠标按下 if(event.button==1){ div1.setCapture() //画笔绘画开始，锁定鼠标 color1="red" //定义画笔基本颜色 size1=1 //定义画笔基本粗度 xx=event.x;yy=event.y;zz+=1 //定义基本起始坐标,zz是第三维,默认递增 poly1=div1.appendChild(document.createElement("<v:shape filled=false path='m0,0 l0,0' style='position:absolute;z-index:"+zz+";left:"+xx+";top:"+yy+";width:100;height:100' strokecolor='"+color1+"' strokeweight='"+size1+"' coordsize='100,100'/>")) oldvalue=poly1.path.value.replace("e","") }} function div1.onmousemove(){ //鼠标移动 if(event.button==1){ if(event.srcElement.tagName=="BODY"){div1.releaseCapture();return false} oldvalue+=","+(event.x-xx)+","+(event.y-yy);poly1.path.value=oldvalue poly1.path.value=poly1.path.value.replace(",0,",",").replace(",0 e","e") }} function div1.onmouseup(){ //鼠标弹起 div1.releaseCapture(); } </script>
提示：您可以先修改部分代码再运行

学习程序
<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html;charset=gb2312"> <META name="语法加亮工具" content="NBCoder2(代码花姑娘2)"> <META name="GENERATOR" content="网络程序员伴侣(Lshdic)2005"> <TITLE>你的标题</TITLE> <STYLE> *{font-size:13px;font-family:黑体,宋体,隶书,Courier New,System,Courier;} font{font-weight:normal;} </STYLE> </HEAD> <BODY link="blue" vlink="blue" alink="blue" style="word-break:break-all"> <BASE target="_blank"> <DIV STYLE="COLOR:rgb(0,0,0)" NBCoder-Style="Lshdic2005默认"> <HTML xmlns:v> <HEAD> <META http-equiv='Content-Type' content='text/html;charset=gb2312'> <Meta name='Gemeratpr' content='网络程序员伴侣(Lshdic)2005'> <TITLE>VML最简实现铅笔绘图功能</TITLE> <STYLE> v\:*{behavior:url(#default#VML);}   /*声明V为VML变量*/ </STYLE> </HEAD> <body bgcolor=black> <div id=div1 style="background-color:white;width:400;height:400"></div> <input type=button value="清空" onclick="div1.innerHTML=''"> <script> //作者:风云舞 var xx=0,yy=0,oldvalue="",poly1,zz=1 function div1.onmousedown(){   //鼠标按下 if(event.button==1){ div1.setCapture()       //画笔绘画开始，锁定鼠标 color1="red" //定义画笔基本颜色 size1=1 //定义画笔基本粗度 xx=event.x;yy=event.y;zz+=1 //定义基本起始坐标,zz是第三维,默认递增 poly1=div1.appendChild(document.createElement("<v:shape filled=false path='m0,0 l0,0' style='position:absolute;z-index:"+zz+";left:"+xx+";top:"+yy+";width:100;height:100' strokecolor='"+color1+"' strokeweight='"+size1+"' coordsize='100,100'/>")) oldvalue=poly1.path.value.replace("e","") }} function div1.onmousemove(){ //鼠标移动 if(event.button==1){ if(event.srcElement.tagName=="BODY"){div1.releaseCapture();return false} oldvalue+=","+(event.x-xx)+","+(event.y-yy);poly1.path.value=oldvalue poly1.path.value=poly1.path.value.replace(",0,",",").replace(",0 e","e") }} function div1.onmouseup(){ //鼠标弹起 div1.releaseCapture(); } </script> </div> </BODY> </HTML>
提示：您可以先修改部分代码再运行

[ 本帖最后由风云舞于 2008-9-5 21:04 编辑 ]

作者: 风云舞发布时间: 2008-09-05

风云舞老大，你这个例子完成后能保存到后台，或者保存成图片吗？

作者: 101010110001 发布时间: 2008-11-04

读div1.innerHTML,后台能存,图片好像不能保存,除非建立ACTIVEX

作者: 风云舞发布时间: 2008-11-05