VML实现web top0 原型(5)-缩放

最新推荐文章于 2013-10-24 16:30:58 发布

laputa73

最新推荐文章于 2013-10-24 16:30:58 发布

阅读量972

点赞数

CC 4.0 BY-SA版权

分类专栏： web编程文章标签： web string path function behavior css

本文链接：https://blog.youkuaiyun.com/laputa73/article/details/5386262

web编程专栏收录该内容

54 篇文章

订阅专栏

本文介绍了如何使用VML矢量图形技术实现无级缩放，并展示了如何通过CSS和VML元素本身的coordsize属性实现缩放效果。通过实例演示了如何创建文本路径、绘制线条和设置文本，以及如何利用按钮触发缩放操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vml是矢量图形。理论上支持无级缩放。

注意，拓扑不是gis，一般不用部分装载，一次是显示全图的。所以缩放比gis简单。

vml可以看做普通的页面控件

使用css的style.zoom来实现缩放

另外,vml元素本身也支持coordsize缩放

这两者的效果是不同的

<html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title> 图例 </title> </head> <STYLE> v/:* { BEHAVIOR: url(#default#VML) } </STYLE> <body bgcolor="#ffffff">  <v:group ID="bandwidthLegend" style="position:absolute;Z-INDEX:2;WIDTH:200px;HEIGHT:200px;top:125;left:50" >  <v:line id="textforPE-7" style="Z-INDEX:5;LEFT:0;POSITION:absolute;TOP:0" from="0,-91" to="500,-90" strokecolor="#004382">  <v:path textpathok="t"/>  <v:textpath on="t" fitpath="f" string="电路带宽图例" style="Z-INDEX:100;font-family: '宋体'; font-size: 14px; color: #004382; background-repeat: no-repeat;" mce_style="Z-INDEX:100;font-family: '宋体'; font-size: 14px; color: #004382; background-repeat: no-repeat;"/> </v:path> </v:line>  <v:line id="textforPE-7" strokeweight="1px" style="Z-INDEX:5;LEFT:0;POSITION:absolute;TOP:0" from="0,0" to="200,0" strokecolor="#004382" />  <v:line id="textforPE-7" style="Z-INDEX:5;LEFT:0;POSITION:absolute;TOP:0" from="-3964.0,0" to="5520.0,1" strokecolor="#004382"> <v:path textpathok="t"/> <v:textpath on="t" fitpath="f" string=" <1000000 " style="Z-INDEX:100;font-family: '宋体'; font-size: 12px; color: #004382; background-repeat: no-repeat;" mce_style="Z-INDEX:100;font-family: '宋体'; font-size: 12px; color: #004382; background-repeat: no-repeat;"/> </v:line>  <v:line id="textforPE-7" strokeweight="2px" style="Z-INDEX:5;LEFT:0;POSITION:absolute;TOP:0" from="0,70" to="200,70" strokecolor="#004382" /> <v:line id="textforPE-7" style="Z-INDEX:5;LEFT:0;POSITION:absolute;TOP:0" from="-3964.0,70" to="5520.0,71" strokecolor="#004382"> <v:path textpathok="t"/> <v:textpath on="t" fitpath="f" string=" (1000000,9000000)" style="Z-INDEX:100;font-family: '宋体'; font-size: 12px; color: #004382; background-repeat: no-repeat;" mce_style="Z-INDEX:100;font-family: '宋体'; font-size: 12px; color: #004382; background-repeat: no-repeat;"/> </v:line>  <v:line id="textforPE-7" strokeweight="4px" style="Z-INDEX:5;LEFT:0;POSITION:absolute;TOP:0" from="0,140" to="200,140" strokecolor="#004382" /> <v:line id="textforPE-7" style="Z-INDEX:5;LEFT:0;POSITION:absolute;TOP:0" from="-3964.0,140" to="5520.0,141" strokecolor="#004382"> <v:path textpathok="t"/> <v:textpath on="t" fitpath="f" string=" (9000000,24000000)" style="Z-INDEX:100;font-family: '宋体'; font-size: 12px; color: #004382; background-repeat: no-repeat;" mce_style="Z-INDEX:100;font-family: '宋体'; font-size: 12px; color: #004382; background-repeat: no-repeat;"/> </v:line>  <v:line id="textforPE-7" strokeweight="6px" style="Z-INDEX:5;LEFT:0;POSITION:absolute;TOP:0" from="0,210" to="200,210" strokecolor="#004382" /> <v:line id="textforPE-7" style="Z-INDEX:5;LEFT:0;POSITION:absolute;TOP:0" from="-3964.0,210" to="5520.0,211" strokecolor="#004382"> <v:path textpathok="t"/> <v:textpath on="t" fitpath="f" string=" (24000000,900000000)" style="Z-INDEX:100;font-family: '宋体'; font-size: 12px; color: #004382; background-repeat: no-repeat;" mce_style="Z-INDEX:100;font-family: '宋体'; font-size: 12px; color: #004382; background-repeat: no-repeat;"/> </v:line> </v:group> <mce:script type="text/javascript"></mce:script> <button onclick="zoom(0.5)">缩小2倍cor</button><br> <button onclick="zoom(2)">放大 2倍cor</button><br> <button onclick="zoom1(0.5)">缩小2倍css</button><br> <button onclick="zoom1(2)">放大 2倍css</button><br> </body> </html>