一款vml绘图工具,界面及功能很完美资源-CSDN下载

共2个文件

htm：2个

需积分: 10 166 浏览量 2010-02-24 14:51:22 上传评论 1 收藏 4KB ZIP 举报

**VML（Vector Markup Language）详解** VML，全称为Vector Markup Language，是一种用于创建矢量图形的XML标记语言。它在1990年代末由Microsoft公司开发，旨在为Web浏览器提供一种描绘矢量图形的方法，特别是在Internet Explorer浏览器上。VML在HTML文档中嵌入，允许开发者创建可缩放的、清晰的图形，而不会因为放大或缩小而失去质量。 **VML的基本结构与语法** VML的语法类似于HTML，每个图形元素都是一个XML标签。例如，要绘制一个矩形，可以使用`<v:rect>`标签，并通过属性来设置其位置、大小、颜色等。基本的矩形示例如下： ```xml <v:rect id="myRect" fillcolor="blue" strokeweight="2pt" strokecolor="black" style="position:absolute; left:50px; top:50px; width:100px; height:100px;"></v:rect> ``` 这里，`id`是元素的唯一标识，`fillcolor`和`strokecolor`分别指填充色和边框色，`strokeweight`定义边框宽度，`style`属性用于设置CSS样式，包括位置（`left`和`top`）和尺寸（`width`和`height`）。 **VML绘图工具的特性** 标题中提到的“一款vml绘图工具”很可能是一个专门用于设计和编辑VML图形的应用程序。这样的工具通常具有以下特点： 1. **用户界面友好**：直观的界面设计使得非编程背景的用户也能轻松操作，创建复杂的矢量图形。 2. **功能强大**：包含各种图形绘制工具，如线条、曲线、形状、文本等，以及颜色选择器、透明度调整、图层管理等高级功能。 3. **交互性**：可能支持实时预览，用户可以即时看到修改效果。 4. **导出和导入**：可以将VML图形保存为文件，或者导入现有的VML图形进行编辑。 5. **兼容性**：由于VML主要在IE浏览器上运行，所以工具可能特别优化了在IE上的显示效果。 **学习和应用** 对于学习VML的人来说，这款工具是一个很好的资源。通过它，你可以： 1. **实践绘图**：亲自动手绘制图形，理解各个属性的含义和用法。 2. **探索功能**：尝试不同的工具和选项，熟悉VML的全部功能。 3. **案例分析**：打开和分析现有的VML图形文件，了解其背后的代码结构。 4. **网页设计**：将VML图形嵌入到网页中，提升网站的视觉效果。 5. **兼容性测试**：由于VML主要适用于旧版IE，你可以借此了解不同浏览器对矢量图形的支持情况。虽然现在SVG（Scalable Vector Graphics）已经成为更主流的矢量图形标准，但VML在某些场景下仍然有其价值，特别是对于需要支持老版本IE浏览器的项目。这款工具可以帮助我们更好地理解和利用VML，提升我们的矢量图形设计技能。

资源推荐

资源详情

资源评论

收起资源包目录

15vml.zip （2个子文件）

功能超强-VML editor画图

blad.htm 4KB

editor.htm 7KB

<HTML xmlns:v = "urn:schemas-microsoft-com:vml"><HEAD><TITLE>VML editor</TITLE> <SCRIPT language=JavaScript> window.moveTo(0,0); window.resizeTo(screen.availWidth, screen.availHeight); function maak_code() { var raam = window.open('','vmlcode','height=600,width=600'); raam.document.open(); with(raam.document){ write('<html>\n'); write('<head>\n<title>VML code</title>\n</head>\n'); write('<body bgcolor="buttonface">\n'); write('<center>\n<form>\n'); write('<textarea style="width: 500px; height: 500px;">\n'); write('<html>\n<head>\n\n'); write('<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>\n'); write('<style type="text/css">\nv\\:* { behavior: url(#default#VML);}\n</style>\n\n'); write('</head>\n<body>\n\n'); write(document.frames[0].document.body.innerHTML.replace(/<br>/gi, '\n')); write('\n\n</body>\n</html>\n'); write('</textarea>\n<br>\n'); write('<input type="button" value="Select" style="font-family: Verdana, Arial; font-size: 12px; width: 150px; margin-top: 8px;" onclick="document.forms[0].elements[0].select()">\n'); write('</form>\n</center>\n'); write('</body>\n'); write('</html>'); } raam.document.close(); raam.focus(); } function legen() { document.frames[0].document.body.innerHTML = ''; document.frames[0].teller = 0; } kleurenkiezer = ''; function activeer_kiescellen() { var cellen = document.getElementsByTagName('td'); for(var i = 0; i < cellen.length; i++){ if(cellen[i].className == 'kleur'){ cellen[i].onclick = kies_kleur; } } } function voorbereiden_kleurkeuze(vul_of_rand) { if(kleurenkiezer != ''){ return;} document.getElementById(vul_of_rand + '_cel').style.backgroundColor = '#FFFFFF'; document.getElementById(vul_of_rand + '_cel').innerHTML = '<span style="color: #FF0033; font-size: 9px;">选择颜色</span>'; kleurenkiezer = vul_of_rand; } function kies_kleur() { if(kleurenkiezer == ''){ var fout = '你必须选择填充或者描边.\n\n'; fout += '你必须先单击"填充"或者"描边"上面的矩形颜色框 .\n\n'; fout += '然后你可以冲调色板中选择颜色. '; fout += '如果你不想要填充色或者描边色, 可以单击 X.\n'; alert(fout); return; } var kleur = (this.childNodes.length > 0)? '': this.bgColor; var HTML = (this.childNodes.length > 0)? '<span style="color: #FF0033; font-size: 9px;">透明</span>': ''; document.forms[0].elements[kleurenkiezer].value = kleur; document.getElementById(kleurenkiezer + '_cel').innerHTML = HTML; document.getElementById(kleurenkiezer + '_cel').style.backgroundColor = this.bgColor; kleurenkiezer = ''; } function verwijder_vorm_uit_tekenblad() { if(document.frames[0].teller > 0){ document.frames[0].document.getElementById('nr' + document.frames[0].teller).removeNode(true); document.frames[0].document.getElementsByTagName('br')[(document.frames[0].teller - 1)].removeNode(true); document.frames[0].teller--; } } window.onerror = function(){ return true;} window.onload = activeer_kiescellen; document.writeln('<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>'); document.writeln('<style type="text/css">'); document.writeln('v\\:* { behavior: url(#default#VML);}'); document.writeln('</style>'); </SCRIPT> <STYLE type=text/css> v\:* { behavior: url(#default#VML);} </STYLE> <STYLE type=text/css> body { background-color: buttonface; } select, input, td { font-family: Verdana, Arial; font-size: 10px; } .kleur { width: 20px; height: 20px; cursor: hand; } hr { width: 150px; } </STYLE> </HEAD> <BODY scroll=yes> <TABLE height="100%" width="100%"> <TBODY> <TR> <TD vAlign=top width=165> <FORM><INPUT type=hidden name=vulkleur> <INPUT type=hidden value=#000000 name=randkleur> <B>工具形状:</B> <SELECT style="WIDTH: 150px" name=gereedschap> <OPTION value=vrijevorm>任意形状</OPTION> <OPTION value=ovaal>椭圆</OPTION> <OPTION value=rechthoek>矩形</OPTION> <OPTION value=rondhoek>圆角矩形</OPTION></SELECT> <HR align=left> <B>大小:</B> <SELECT style="WIDTH: 150px" name=lijndikte> <OPTION value=1px>1px</OPTION> <OPTION value=2px>2px</OPTION> <OPTION value=3px>3px</OPTION> <OPTION value=4px>4px</OPTION> <OPTION value=5px>5px</OPTION> <OPTION value=6px>6px</OPTION> <OPTION value=7px>7px</OPTION> <OPTION value=8px>8px</OPTION> <OPTION value=9px>9px</OPTION> <OPTION value=10px>10px</OPTION> <OPTION value=11px>11px</OPTION> <OPTION value=12px>12px</OPTION></SELECT> <HR align=left> <TABLE> <TBODY> <TR> <TD class=kleur bgColor=#000000></TD> <TD class=kleur bgColor=#583200></TD> <TD class=kleur bgColor=#4e5800></TD> <TD class=kleur bgColor=#007c42></TD> <TD class=kleur bgColor=#0060a0></TD> <TD class=kleur bgColor=#051dff></TD></TR> <TR> <TD class=kleur bgColor=#a800cc></TD> <TD class=kleur bgColor=#d00095></TD> <TD class=kleur bgColor=#c40053></TD> <TD class=kleur bgColor=#ff0033></TD> <TD class=kleur bgColor=#fc6500></TD> <TD class=kleur bgColor=#ffef21></TD></TR> <TR> <TD class=kleur bgColor=#8cff21></TD> <TD class=kleur bgColor=#39ff71></TD> <TD class=kleur bgColor=#65ffd9></TD> <TD class=kleur bgColor=#79d0ff></TD> <TD class=kleur bgColor=#8d8dff></TD> <TD class=kleur bgColor=#ffc9fc></TD></TR> <TR> <TD class=kleur bgColor=#fff7e9></TD> <TD class=kleur bgColor=#e5ffe5></TD> <TD class=kleur bgColor=#fff2b9></TD> <TD class=kleur bgColor=#ddffa5></TD> <TD class=kleur bgColor=#ffeaa1></TD> <TD class=kleur align=middle bgColor=#ffffff><SPAN style="FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #ff0033">X</SPAN></TD></TR> <TR> <TD style="HEIGHT: 10px" cospan="6"></TD></TR> <TR> <TD onselectstart="return false" id=vulkleur_cel style="CURSOR: hand; HEIGHT: 50px; BACKGROUND-COLOR: #ffffff" onclick="voorbereiden_kleurkeuze('vulkleur')" align=middle colSpan=3><SPAN style="FONT-SIZE: 9px; COLOR: #ff0033">透明</SPAN> </TD> <TD onselectstart="return false" id=randkleur_cel style="CURSOR: hand; HEIGHT: 50px; BACKGROUND-COLOR: #000000" onclick="voorbereiden_kleurkeuze('randkleur')" align=middle colSpan=3></TD></TR> <TR> <TD style="FONT-SIZE: 9px" colSpan=3>填充</TD> <TD style="FONT-SIZE: 9px" colSpan=3>描边</TD></TR></TBODY></TABLE> <HR align=left> <INPUT type=checkbox name=anti_alias>  <B>消除锯齿</B> <HR align=left> <INPUT style="WIDTH: 150px" onfocus=this.blur() onclick=verwijder_vorm_uit_tekenblad() type=button value=撤销> <INPUT style="MARGIN-TOP: 8px; WIDTH: 150px" onfocus=this.blur() onclick=legen() type=button value=清空> <HR align=left> <INPUT style="WIDTH: 150px" onfocus=this.blur() onclick=maak_code() type=button value=生成代码 name=submitknop> </FORM><SPAN id=geen_script style="FONT-WEIGHT: bold; COLOR: #ff0033"></SPAN> </TD> <TD vAlign=top><IFRAME src="blad.htm" width="100%" height="100%"></IFRAME></TD></TR></TBODY></TABLE> <SCRIPT language=JavaScript> document.getElementById('geen_script').innerText = ''; document.forms[0].reset(); document.writeln('<v:oval style="position: absolute; left: 0px; top: 0px; width: 1px; height: 1px; display: none;" />'); </SCRIPT> <v:oval style="DISPLAY: none; LEFT: 0px; WIDTH: 1px; POSITION: absolute; TOP: 0px; HEIGHT: 1px" coordsize = "21600,21600"></v:oval></BODY></HTML>

评论收藏

内容反馈