首页 / CSS / 放大缩小VML_VML相关

放大缩小VML_VML相关

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了放大缩小VML_VML相关，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8403字，纯文字阅读大概需要13分钟。

内容图文

由于VML是矢量的，放大缩小变得很容易了。我们先看一个例子，看看VML能做到什么程度。还是以前面的一个飞碟做为例子。它是用线、圆、弧等形状拼凑起来的一个图形。我增加了移动事件，当放大太多了，可以拖动图片查看。

<?xml:namespace prefix = v /><v:group id=group1 style="LEFT: 187.5pt; WIDTH: 37.5pt; TOP: 150pt; 'position: relative" coordsize="6000,6000" o:spid="_x0000_s2078" height:37.5pt;z-index:0'><v:shape id=_x0000_s2051 style="LEFT: 235px; WIDTH: 235px; TOP: 209px; 'position: relative" coordsize="3765,2060" fillcolor="#bcbcd6" path="m1285,251l1126,469,580,1009,,1285r25,127l93,1547r101,126l1017,2026r1295,34l3209,1756r556,-368l3278,680,3059,319,2976,,1285,251r,xe" stroked="f" height:129'><v:shape id=_x0000_s2052 style="LEFT: 315px; TOP: 141px; 'position: relative" coordsize="1663,1633" fillcolor="#99ebff" path="m,1355r177,143l353,1582r487,51l1378,1498r285,-203l1545,456,1260,10,1025,,656,260,253,874,,1355r,xe" stroked="f" width:104;height:102'><v:shape id=_x0000_s2053 style="LEFT: 437px; TOP: 243px; 'position: relative" coordsize="415,489" fillcolor="#fff27f" path="m,25l186,,415,101,388,489,,25r,xe" stroked="f" width:26;height:31'><v:shape id=_x0000_s2054 style="LEFT: 409px; TOP: 269px; 'position: relative" coordsize="388,437" fillcolor="#fff27f" path="m209,l34,101,,302,125,437,329,327,388,152,209,r,xe" stroked="f" width:24;height:27'><v:shape id=_x0000_s2055 style="LEFT: 357px; TOP: 279px; 'position: relative" coordsize="462,479" fillcolor="#fff27f" path="m135,l,186,59,422r285,57l462,228,135,r,xe" stroked="f" width:29;height:30'><v:shape id=_x0000_s2056 style="LEFT: 303px; TOP: 274px; 'position: relative" coordsize="369,378" fillcolor="#fff27f" path="m,59l226,,369,186,243,378,32,363,,59r,xe" stroked="f" width:23;height:24'><v:shape id=_x0000_s2057 style="LEFT: 266px; TOP: 245px; 'position: relative" coordsize="513,454" fillcolor="#fff27f" path="m34,454l,211,110,34,302,,513,34,34,454r,xe" stroked="f" width:32;height:28'><v:shape id=_x0000_s2058 style="LEFT: 235px; TOP: 230px; 'position: relative" coordsize="1232,1040" fillcolor="black" path="m,926l162,844,321,751,479,652r78,-55l635,542r76,-61l787,420r76,-65l937,291,1086,150r74,-74l1232,r-80,122l1095,209r-68,97l951,411,867,521,780,631,686,734r-93,97l498,912r-95,67l312,1026r-171,14l,926r,xe" stroked="f" width:77;height:65'><v:shape id=_x0000_s2059 style="LEFT: 245px; TOP: 226px; 'position: relative" coordsize="3806,1937" fillcolor="black" path="m,1372r100,80l203,1526r110,67l424,1655r115,55l659,1762r247,82l1159,1901r263,34l1952,1937r527,-90l2734,1773r243,-99l3095,1617r114,-62l3319,1488r107,-74l3528,1338r97,-86l3719,1167r87,-93l3663,937,3528,804,3405,669,3285,536,3171,401,3064,268,2962,133,2863,r55,139l2979,277r65,135l3114,545r74,133l3270,808r85,127l3449,1060r-80,71l3285,1195r-84,63l3114,1313r-89,55l2931,1416r-190,87l2543,1574r-209,53l1901,1690r-455,3l975,1642,490,1534,247,1460,,1372r,xe" stroked="f" width:238;height:121'><v:shape id=_x0000_s2060 style="LEFT: 314px; TOP: 134px; 'position: relative" coordsize="1757,1787" fillcolor="black" path="m220,1624r63,43l357,1705r171,57l941,1787r435,-121l1578,1544r179,-169l1722,1069,1677,799,1620,567,1553,371r-40,-82l1473,217r-43,-63l1384,103,1337,61,1285,29,1177,,932,76,797,183,652,339r-74,95l502,542,422,662,342,795,258,941r-83,158l87,1272,,1458,80,1316r76,-133l234,1057,308,939,378,829,451,728r70,-93l587,552r67,-76l717,409r64,-57l840,303,956,232r109,-34l1255,248r158,207l1534,833r86,551l1451,1460r-172,65l1110,1576r-175,36l582,1647,220,1624r,xe" stroked="f" width:110;height:112'><v:shape id=_x0000_s2061 style="LEFT: 367px; TOP: 184px; 'position: relative" coordsize="354,416" fillcolor="black" path="m179,l302,60r52,147l341,289r-39,66l247,399r-68,17l53,355,,207,13,127,53,60,109,17,179,r,xe" stroked="f" width:22;height:26'><v:shape id=_x0000_s2062 style="LEFT: 357px; TOP: 206px; 'position: relative" coordsize="612,563" fillcolor="black" path="m,563l55,346,128,175r41,-64l211,59,301,r89,2l476,71,612,432,460,502,308,542,,563r,xe" stroked="f" width:38;height:35'><v:shape id=_x0000_s2063 style="LEFT: 363px; TOP: 171px; 'position: relative" coordsize="194,386" fillcolor="black" path="m,l124,386r70,-95l,,,,,xe" stroked="f" width:12;height:24'><v:shape id=_x0000_s2064 style="LEFT: 380px; TOP: 176px; 'position: relative" coordsize="237,304" fillcolor="black" path="m237,l72,304,,207,237,r,l237,xe" stroked="f" width:15;height:19'><v:shape id=_x0000_s2065 style="LEFT: 360px; TOP: 168px; 'position: relative" coordsize="105,105" fillcolor="black" path="m55,r50,55l90,90,55,105,,55,17,17,55,r,xe" stroked="f" width:7;height:7'><v:shape id=_x0000_s2066 style="LEFT: 391px; TOP: 172px; 'position: relative" coordsize="105,104" fillcolor="black" path="m55,r50,55l90,89,55,104,,55,17,17,55,r,xe" stroked="f" width:7;height:7'><v:shape id=_x0000_s2067 style="LEFT: 274px; TOP: 330px; 'position: relative" coordsize="468,1053" fillcolor="black" path="m261,l,1053,468,84,261,r,l261,xe" stroked="f" width:29;height:66'><v:shape id=_x0000_s2068 style="LEFT: 426px; TOP: 318px; 'position: relative" coordsize="361,1064" fillcolor="black" path="m,137r361,927l249,,,137r,l,137xe" stroked="f" width:23;height:67'><v:shape id=_x0000_s2069 style="LEFT: 265px; TOP: 386px; 'position: relative" coordsize="298,293" fillcolor="black" path="m150,l257,44r41,105l287,207r-30,48l207,287r-57,6l44,255,,149,11,90,44,44,91,10,150,r,xe" stroked="f" width:19;height:18'><v:shape id=_x0000_s2070 style="LEFT: 439px; TOP: 375px; 'position: relative" coordsize="278,278" fillcolor="black" path="m141,r95,40l278,141r-11,53l236,238r-95,40l40,238,,141,12,84,40,40,141,r,xe" stroked="f" width:17;height:17'><v:shape id=_x0000_s2071 style="LEFT: 362px; TOP: 339px; 'position: relative" coordsize="221,651" fillcolor="black" path="m,l53,651,221,16,,,,,,xe" stroked="f" width:14;height:41'><v:shape id=_x0000_s2072 style="LEFT: 359px; TOP: 374px; 'position: relative" coordsize="207,207" fillcolor="black" path="m102,r75,30l207,103r-30,74l102,207,30,177,,103,30,30,102,r,xe" stroked="f" width:13;height:13'><v:shape id=_x0000_s2073 style="LEFT: 264px; TOP: 244px; 'position: relative" coordsize="490,527" fillcolor="black" path="m490,37l347,,228,,62,92,,278,9,398,45,527r55,-57l133,419,125,229r25,-69l190,111,245,73,315,50,490,37r,xe" stroked="f" width:31;height:33'><v:shape id=_x0000_s2074 style="LEFT: 297px; TOP: 271px; 'position: relative" coordsize="521,508" fillcolor="black" path="m230,94l87,101,2,175,,329r26,80l70,468r116,40l325,495,445,434,509,333,521,202,488,101,454,63,407,33,268,r59,84l384,198r15,110l376,354r-45,30l211,388,158,322r7,-111l190,151,230,94r,xe" stroked="f" width:33;height:32'><v:shape id=_x0000_s2075 style="LEFT: 353px; TOP: 279px; 'position: relative" coordsize="546,524" fillcolor="black" path="m104,96l38,174,,269r19,94l83,441r96,58l285,524,391,509r94,-65l546,321,534,176,496,115,447,64,382,24,314,,175,5,296,85r71,84l388,313r-35,51l304,391,188,355,123,235,104,96r,xe" stroked="f" width:34;height:33'><v:shape id=_x0000_s2076 style="LEFT: 405px; TOP: 266px; 'position: relative" coordsize="500,494" fillcolor="black" path="m237,93l59,141,,300,28,428r33,40l102,494,310,483r98,-63l477,333,500,224,458,108,414,65,355,23,213,,367,158r30,101l384,308r-38,46l270,395r-61,l131,308r4,-129l173,124,237,93r,xe" stroked="f" width:31;height:31'><v:shape id=_x0000_s2077 style="LEFT: 436px; TOP: 243px; 'position: relative" coordsize="481,606" fillcolor="black" path="m296,479l384,222,367,142,319,91,169,44,,38,159,,357,32r78,67l481,211r-6,165l450,483,408,606,296,479r,xe" stroked="f" width:30;height:38'>











是否感觉出来了，放大缩小对 VML 的画质没有改变？因为 VML 是矢量的。动态改变它的 coordsize 值就可以了，注意，减小值等于放大，增大值就等于缩小。可以参考下面的脚本：

var xx=6000;
var yy=6000;
function zoom(h)
{
group1.coordsize=xx/h+","+yy/h;
}

上面的 xx,yy 是指默认状态下的 coordsize 值。调用这个函数的时候使用 zoom(n) 其中 n 是要放大的倍数。
当VML中包含 文字的时候，图形放大了，但文字不会自动放大。这样一来就很不对称了，有个技巧，就是文字都用一种标记包着，放大函数就需要改进一下了：
var xx=6000;
var yy=6000;
var fs=9;
function zoom(h)
{
group1.coordsize=xx/h+","+yy/h;
for(var i=0;i<document.all.tags("DIV").length;i++)
document.all.tags("DIV").item(i).style.fontSize=fs*h+"pt";
}

fs是默认状态下的文字大小。document.all.tags("DIV") 将返回页面上所有DIV元素，然后把他们的文字大小都变大。实践证明，放大后和VML的比例是不变的。

内容总结

以上是互联网集市为您收集整理的放大缩小VML_VML相关全部内容，希望文章能够帮你解决放大缩小VML_VML相关所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/415530.html

来源：【匿名】