杨应红的WEB技术文档
WEB相关技术
Group的使用很简单,但功能很强大。它能让一系列的VML对象使用共同的坐标系,它很常用的,基本上如果使用了超过一个VML对象的页面都使用Group。使用Group还有个好处,就是可以动态改变CoordSize值放大或缩小整个 Group 里面的VML。

<v:group ID="group1" style="position:relative;WIDTH:200px;HEIGHT:200px;" coordsize = "2000,2000">
<v:rect style="WIDTH:2000px;HEIGHT:2000px" fillcolor="#99cccc">
    <v:shadow on="t" type="single" color="silver" offset="5pt,5pt">
</v:rect>
<v:oval style="position:relative;top:100;left:100;width:1000;height:1000;z-index:7;" fillcolor="red" strokeColor="red"/>
<v:rect style="position:relative;top:500;left:300;width:1000;height:1000;z-index:8;" fillcolor="blue" strokeColor="blue"/>
<v:line from="200,200" to="1000,1700" style="z-index:9" fillcolor="yellow" strokeColor="yellow" strokeWeight=2pt/>
</v:group>
 



    相信如果你看懂了上面的代码,对 Group 一定理解了。上面使用了一个和Group一样大小的 Rect 作为 Group的边框,然后加上阴影渲染。用MSDN的一个很有意思的例子再看看 Group 的重要用法:(改变滚动条的值,右边的图片会相应的旋转)

<td valign="top">
<OBJECT title="改变滚动条的值,右边的图片会相应的旋转" classid=CLSID:DFD181E0-5E2F-11CE-A449-00AA004A803D
height = 15 width = 100 id=MyScroll>
<PARAM NAME="MousePointer" VALUE="16">
<PARAM NAME="Orientation" VALUE="2">
<PARAM NAME="Min" VALUE="0">
<PARAM NAME="Max" VALUE="36">
<PARAM NAME="Position" VALUE="0">
</OBJECT>
 
 </td>
 <td width="50"></td>
 <td height="90">
<v:group id="saucer" style='position:relative;width:50;height:50' 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>
 
 </td>
</tr>
</table>
 
    <SCRIPT LANGUAGE="VBScript">
<!--
Dim R
Set R = document.all("saucer")
Sub MyScroll_Change()
 R.Rotation = MyScroll.Value * 10
End Sub

-->
    </SCRIPT>

    该例子中,那张图片完全是用VML画出来的,动态改变 Group 的 Rotation 属性就可以实现整个 Group 里面的对象旋转。

posted on 2006-11-27 11:23  落尘  阅读(281)  评论(0编辑  收藏  举报