📄 step22.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Thinking in VML</title>
</head>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="style.css" />
<script>
var xx=6000;
var yy=6000;
function zoom(h)
{
group1.coordsize=xx/h+","+yy/h;
group1.title="现在是"+h+"倍图";
}
var dragapproved=false;
var x=y=0;
function move()
{
if(event.button==1 && dragapproved){
var sx=group1.style.posLeft+event.clientX-x;
var sy=group1.style.posTop +event.clientY-y;
x=event.clientX;
y=event.clientY;
group1.style.posLeft=sx;
group1.style.posTop =sy;
}
return false
}
function drags()
{
if(event.button!=1) return
dragapproved=true;
x=event.clientX;
y=event.clientY;
document.onmousemove=move;
}
documentonselectstart=new Function("self.event.returnValue=false");
document.onmousedown=drags;
</script>
<body>
<table align="center">
<tr>
<td align="center" class="title"><strong>放大缩小VML</strong></td>
</tr>
<tr>
<td >
<div class="memo" style="width:700;line-height:23px">
由于VML是矢量的，放大缩小变得很容易了。我们先看一个例子，看看VML能做到什么程度。还是以前面的一个飞碟做为例子。它是用线、圆、弧等形状拼凑起来的一个图形。我增加了移动事件，当放大太多了，可以拖动图片查看。<br><br>
<table>
<tr>
<td>
<div id="oDIV" style="postition:relative;width:600;height:500;overflow:scroll" class=memo>
<v:group id="group1" style='position:relative;width:50;height:50;top:200;left:250' coordorigin="0,0" coordsize="6000,6000">
<v:shape id="_x0000_s2051"
style='position:relative;left:234.75pt;top:208.875pt;width:235.25pt;height:128.875pt'
coordsize="3765,2060" path="m1285,251l1126,469,580,1009,,1285,25,1412,93,1547,194,1673,1017,2026,2312,2060,3209,1756,3765,1388,3278,680,3059,319,2976,,1285,251,1285,251xe"
fillcolor="#bcbcd6" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2052" style='position:relative;left:314.625pt;
top:140.5pt;width:104pt;height:102pt' coordsize="1663,1633" path="m0,1355l177,1498,353,1582,840,1633,1378,1498,1663,1295,1545,456,1260,10,1025,,656,260,253,874,,1355,,1355xe"
fillcolor="#99ebff" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2053" style='position:relative;left:436.875pt;
top:243pt;width:25.875pt;height:30.5pt' coordsize="415,489" path="m0,25l186,,415,101,388,489,,25,,25xe"
fillcolor="#fff27f" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2054" style='position:relative;left:408.625pt;
top:268.75pt;width:24.25pt;height:27.375pt' coordsize="388,437" path="m209,0l34,101,,302,125,437,329,327,388,152,209,,209,0xe"
fillcolor="#fff27f" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2055" style='position:relative;left:356.625pt;
top:279.25pt;width:28.875pt;height:30pt' coordsize="462,479" path="m135,0l0,186,59,422,344,479,462,228,135,,135,0xe"
fillcolor="#fff27f" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2056" style='position:relative;left:302.625pt;
top:274pt;width:23pt;height:23.625pt' coordsize="369,378" path="m0,59l226,,369,186,243,378,32,363,,59,,59xe"
fillcolor="#fff27f" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2057" style='position:relative;left:266.25pt;
top:245.125pt;width:32.125pt;height:28.375pt' coordsize="513,454" path="m34,454l0,211,110,34,302,,513,34,34,454,34,454xe"
fillcolor="#fff27f" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2058" style='position:relative;left:234.75pt;
top:230.375pt;width:77pt;height:65pt' coordsize="1232,1040" path="m0,926l162,844,321,751,479,652,557,597,635,542,711,481,787,420,863,355,937,291,1086,150,1160,76,1232,,1152,122,1095,209,1027,306,951,411,867,521,780,631,686,734,593,831,498,912,403,979,312,1026,141,1040,,926,,926xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2059" style='position:relative;left:245pt;
top:225.875pt;width:237.875pt;height:121.125pt' coordsize="3806,1937" path="m0,1372l100,1452,203,1526,313,1593,424,1655,539,1710,659,1762,906,1844,1159,1901,1422,1935,1952,1937,2479,1847,2734,1773,2977,1674,3095,1617,3209,1555,3319,1488,3426,1414,3528,1338,3625,1252,3719,1167,3806,1074,3663,937,3528,804,3405,669,3285,536,3171,401,3064,268,2962,133,2863,,2918,139,2979,277,3044,412,3114,545,3188,678,3270,808,3355,935,3449,1060,3369,1131,3285,1195,3201,1258,3114,1313,3025,1368,2931,1416,2741,1503,2543,1574,2334,1627,1901,1690,1446,1693,975,1642,490,1534,247,1460,,1372,,1372xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2060" style='position:relative;left:314.375pt;
top:134.125pt;width:109.75pt;height:111.625pt' coordsize="1757,1787" path="m220,1624l283,1667,357,1705,528,1762,941,1787,1376,1666,1578,1544,1757,1375,1722,1069,1677,799,1620,567,1553,371,1513,289,1473,217,1430,154,1384,103,1337,61,1285,29,1177,,932,76,797,183,652,339,578,434,502,542,422,662,342,795,258,941,175,1099,87,1272,,1458,80,1316,156,1183,234,1057,308,939,378,829,451,728,521,635,587,552,654,476,717,409,781,352,840,303,956,232,1065,198,1255,248,1413,455,1534,833,1620,1384,1451,1460,1279,1525,1110,1576,935,1612,582,1647,220,1624,220,1624xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2061" style='position:relative;left:367pt;
top:184.125pt;width:22.125pt;height:26pt' coordsize="354,416" path="m179,0l302,60,354,207,341,289,302,355,247,399,179,416,53,355,,207,13,127,53,60,109,17,179,,179,0xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2062" style='position:relative;left:357.25pt;
top:206.125pt;width:38.25pt;height:35.125pt' coordsize="612,563" path="m0,563l55,346,128,175,169,111,211,59,301,,390,2,476,71,612,432,460,502,308,542,,563,,563xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2063" style='position:relative;left:363.25pt;
top:171.125pt;width:12.125pt;height:24.125pt' coordsize="194,386" path="m0,0l124,386,194,291,,,,,,0xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2064" style='position:relative;left:379.5pt;
top:175.5pt;width:14.875pt;height:19pt' coordsize="237,304" path="m237,0l72,304,,207,237,,237,,237,0xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2065" style='position:relative;left:359.75pt;
top:167.75pt;width:6.5pt;height:6.5pt' coordsize="105,105" path="m55,0l105,55,90,90,55,105,,55,17,17,55,,55,0xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2066" style='position:relative;left:390.875pt;
top:172.125pt;width:6.5pt;height:6.5pt' coordsize="105,104" path="m55,0l105,55,90,89,55,104,,55,17,17,55,,55,0xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2067" style='position:relative;left:274.25pt;
top:329.875pt;width:29.125pt;height:65.875pt' coordsize="468,1053" path="m261,0l0,1053,468,84,261,,261,,261,0xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2068" style='position:relative;left:425.5pt;
top:318.25pt;width:22.5pt;height:66.5pt' coordsize="361,1064" path="m0,137l361,1064,249,,,137,,137,,137xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2069" style='position:relative;left:265pt;
top:385.875pt;width:18.75pt;height:18.25pt' coordsize="298,293" path="m150,0l257,44,298,149,287,207,257,255,207,287,150,293,44,255,,149,11,90,44,44,91,10,150,,150,0xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2070" style='position:relative;left:439pt;
top:374.875pt;width:17.375pt;height:17.375pt' coordsize="278,278" path="m141,0l236,40,278,141,267,194,236,238,141,278,40,238,,141,12,84,40,40,141,,141,0xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2071" style='position:relative;left:362.375pt;
top:338.875pt;width:13.75pt;height:40.625pt' coordsize="221,651" path="m0,0l53,651,221,16,,,,,,0xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2072" style='position:relative;left:359pt;
top:374.125pt;width:13pt;height:12.875pt' coordsize="207,207" path="m102,0l177,30,207,103,177,177,102,207,30,177,,103,30,30,102,,102,0xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2073" style='position:relative;left:264.25pt;
top:244.25pt;width:30.625pt;height:32.875pt' coordsize="490,527" path="m490,37l347,,228,,62,92,,278,9,398,45,527,100,470,133,419,125,229,150,160,190,111,245,73,315,50,490,37,490,37xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2074" style='position:relative;left:296.5pt;
top:270.625pt;width:32.625pt;height:31.625pt' coordsize="521,508" path="m230,94l87,101,2,175,,329,26,409,70,468,186,508,325,495,445,434,509,333,521,202,488,101,454,63,407,33,268,,327,84,384,198,399,308,376,354,331,384,211,388,158,322,165,211,190,151,230,94,230,94xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2075" style='position:relative;left:353pt;
top:278.875pt;width:34.125pt;height:32.875pt' coordsize="546,524" path="m104,96l38,174,,269,19,363,83,441,179,499,285,524,391,509,485,444,546,321,534,176,496,115,447,64,382,24,314,,175,5,296,85,367,169,388,313,353,364,304,391,188,355,123,235,104,96,104,96xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2076" style='position:relative;left:404.875pt;
top:266.25pt;width:31.25pt;height:30.875pt' coordsize="500,494" path="m237,93l59,141,,300,28,428,61,468,102,494,310,483,408,420,477,333,500,224,458,108,414,65,355,23,213,,367,158,397,259,384,308,346,354,270,395,209,395,131,308,135,179,173,124,237,93,237,93xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2077" style='position:relative;left:436.25pt;
top:242.5pt;width:30.125pt;height:38pt' coordsize="481,606" path="m296,479l384,222,367,142,319,91,169,44,,38,159,,357,32,435,99,481,211,475,376,450,483,408,606,296,479,296,479xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape> </v:group>
</div>
</td>
<td valign="top">
<button onclick="zoom(1)">放大 1倍</button><br>
<button onclick="zoom(2)">放大 2倍</button><br>
<button onclick="zoom(3)">放大 3倍</button><br>
<button onclick="zoom(4)">放大 4倍</button><br>
<button onclick="zoom(5)">放大 5倍</button><br>
<button onclick="zoom(6)">放大 6倍</button><br>
<button onclick="zoom(7)">放大 7倍</button><br>
<button onclick="zoom(8)">放大 8倍</button><br>
<button onclick="zoom(9)">放大 9倍</button><br>
<button onclick="zoom(10)">放大10倍</button><br>
</td>
</tr>
</table>
<br><br>
是否感觉出来了，放大缩小对 VML 的画质没有改变？因为 VML 是矢量的。动态改变它的 coordsize 值就可以了，注意，减小值等于放大，增大值就等于缩小。可以参考下面的脚本：<br><br>
<div class="memo">
var xx=6000;<br>
var yy=6000;<br>
function zoom(h)<br>
{<br>
group1.coordsize=<font color=red>xx/h+","+yy/h;</font><br>
}<br>
</div>
<br>
上面的 xx,yy 是指默认状态下的 coordsize 值。调用这个函数的时候使用 zoom(n) 其中 n 是要放大的倍数。<br>
当VML中包含 文字的时候，图形放大了，但文字不会自动放大。这样一来就很不对称了，有个技巧，就是文字都用一种标记包着，放大函数就需要改进一下了：<br>
<div class="memo">
var xx=6000;<br>
var yy=6000;<br>
var fs=9;<br>
function zoom(h)<br>
{<br>
group1.coordsize=<font color=red>xx/h+","+yy/h;</font><br>
for(var i=0;i<document.all.tags("DIV").length;i++)<br>
document.all.tags("DIV").item(i).style.fontSize=<font color=red>fs*h+"pt"</font>;<br>
}<br>
</div><br>
fs是默认状态下的文字大小。document.all.tags("DIV") 将返回页面上所有DIV元素，然后把他们的文字大小都变大。实践证明，放大后和VML的比例是不变的。
</div>
</td>
</tr>
<tr>
<td class="title">
<p align="right"><a href="javascript:self.scrollTo(0,0)">Top</a></p>
<a href="index.html">返回目录</a><br>
上一节:<a href="step21.html">脚本动态生成VML</a><br>
下一节:<a href="step23.html">给VML增加事件</a>
</td>
</tr>
</table>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -