1:shape多边型 - 专用属性

2:shape多边型 - 与polyline多边型的优劣比较
polyline多边型特点1：增加CSS的rotation平面旋转、以及VML3D角度旋转处理时，旋转角度视图形中心为准
polyline多边型特点2：不支持CSS的width宽度、height高度定义，也不需要在CSS中定义width、height
shape多边型特点1 ：增加CSS的rotation平面旋转、以及VML3D角度旋转处理时，旋转角度视图形起点为准
shape多边型特点2 ：支持CSS的width宽度、height高度定义，不过需要配合coordsize属性。同时必须在CSS中定义width、height才能显示
虽然两者功能很类似，但我仍建议你至少应精通shape多边形的绘制原理，polyline也要理解的差不多。因为多边型是绘制复杂图形的重要工具，虽然FlashVml3.0有提供shape、polyline简单易用可视化绘图工具，但没有可视化的多边形修改工具。因此，了解他们的绘图原理，在今后你想修改他们的形状、开发DVML动画时是有一定帮助的。

3:shape多边型 - 通用属性coordsize使用讲解

        显然，我们用了跟polyline多边形同理的校例，都是绘制三角型，不同的是shape多边形支持CSS的width、height，在结合VML的coordsize属性自动调整shape大小的对比度，而这对polyline线是无法实现的。我在解释它的path路径参数规则之前，先详细的说明coordsize的作用
        我们先说倒数第三个图形，它width:50;height:100;、coordsize="100,100"，运行效果看出它的图形正好比其他属性是width:100;height:100;、coordsize="100,100"的图形宽度小了一半。
        在说倒数第二个图形，它width:2000;height:2000;、coordsize="1000,1000"，运行效果看出它的图形正好比其他属性是width:100;height:100;、coordsize="100,100"的图形宽度、高度均大了1倍。
        最后说最后一个图形，它width:5000;height:5000;、coordsize="1000,1000"，运行效果看出它的图形正好比其他属性是width:100;height:100;、coordsize="100,100"的图形宽度、高度均大了5倍。
        也许你已小有醒悟，图形如果使用了虚拟空间大小描述coordsize="widthnumber,heightnumber"，那么其CSS的width、height就会根据coordsize来做比例计算，而不是按照以前我们所说的屏幕像素计算了，所以width:100;height:100;、coordsize="100,100"跟width:1000;height:1000;、coordsize="1000,1000"或者跟width:5432;height:5432;、coordsize="5432,5432"效果相同。
        也就是为什么倒数第三个图形的width:50;height:100;、coordsize="100,100"它的宽度就正好小一半（2分之1）、倒数第二个width:2000;height:2000;、coordsize="1000,1000"正好大一倍、最后一个width:5000;height:5000;、coordsize="1000,1000"就大了五倍

4:shape多边型 - path参数讲解

        其实shape多边形的path路径参数原理跟polyline的points路径参数大同小异，下面就详细解释path的参数
第1步：首先用CSS的LEFT、TOP定义了该多边型位于XY网页交接点的绝对位置
第2步：m0,0 l30,-30,60,0,0,0 e，其中m l e是必需写的，m0,0的第一个0表示偏移X交接点多少值、第二个表示偏移Y交接点多少值。由于我们既然用CSS定义了准确的该形状的绝对位置，所以我们就用0,0表示不偏移（也就是说该值无必要，但必须写m0,0）
第3步：m0,0 l30,-30,60,0,0,0 e，其中的l30,-30的30表示第一条线向右伸展30px、-30表示第一条线向下伸展-30px，由于是负数，那么就等同于向上伸展30，所以我们看到的第一个多边型的值为m0,0 l30,-30 e，只描述了一条线。
第4步：m0,0 l30,-30,60,0,0,0 e，其中的60,0的60表示新增了第二条线它向右伸展了60px、0表示第二条线向下伸展0px，由于是0，那么就等同于原交接点的Y高度，所以我们看到的第二个多边型的值为m0,0 l30,-30,60,0 e，只描述了二条线。
第5步：m0,0 l30,-30,60,0,0,0 e，最后的0,0的第一个0表示新增了第三条线它向右伸展了0px、第二个0表示第三条线向下伸展0px，由于都是0，那么就等同于原交接点的XY，所以我们看到的第三个多边型的值为m0,0 l30,-30,60,0,0,0 e，描述了三条线、最后的0,0值使它回归原路径，就构成了三角型
最后一个倒三角由于值为m0,0 l30,30,60,0,0,0 e，正好将l30,-30写成了l30,30，所以就向下伸展成了倒三角

5:shape多边型 - 应用实例
        shape多边型跟polyline多边型大同小异，都能够绘制任意形状的多边型，如果各线直间的距离很短，就会形成连续且流畅的铅笔书写、划画工具。但这往往是手写代码难于实现的，但可以借助FlashVml的强大绘图功能得以实现

1:shapetype模版 - 实例讲解

        综合上一章节所学的shape多边形知识，相信在看这个例子不难分析出，shapetype是专门用来定义形状摸版的（不可见），而后在由shape标记引用、将模版实例化的按照path子属性值输出多边形（可见）。
        并在摸版里定义coordsize虚拟空间大小为1000 1000，而shape则由CSS定义width、height大小后负责输出，这样做的唯一好处就是节省代码、将长用的多边形路径存储模版方便以后以不同宽度、高度使用
        你当然可以定义多个模版，模版以id名称为标识，例如上例模版名称为m1，shape引用时只需将type值写成#m1即可引用。而且摸版也支持VML的通用标记设置默认的效果描述，shape引用时也支持VML的通用标记进一步修饰。
如果你不理解v:Path v="m0,0 l30,-30,60,0,0,0 e"的意思，请参考上一章节。

1:shape曲线 - 详解
        也许你会问我：“shape你不是说是多边形么？怎么又成了曲线？”，其实，shape翻译中文的意思即是“形状”，也就是说它能绘制圆形、矩形、圆角矩形、多边型、甚至于曲线！等等形状……，不过它的形状用标记参数描述起来很复杂，而且VML又有专门用于设计圆形oval、矩形rect、圆角矩形roundrect、曲线curve、多边形polyline的标记。
我是挑选了相对较复杂、有一定缺陷(像不支持CSS的width、height定义宽高度)的polyline(多边形)做写照，在前面章节内讲解shape绘制多边形的例子（你发现，跟polyline绘制出的效果差不多吧？）
        说到这里，你不会骂我错教了你吧？其实那，这也就是我取名《VML极道教程》所谓的“极道”特征之一。让你循序渐进、让你掌握知识、让你不知不觉间已有很大的长进。而你长进到此时，在突然告诉你其实XX标记还有更深层的知识，使你不至于一开始就接触这些难于理解、难于学习的“深层知识”。好了，现在就告诉你shape怎么绘制曲线

        结合你以前学的shape绘制多边型的知识，看看此次path的参数有何异同（别急着就去分析 0,0,50,60等等，先看看英文字母）？显然不同的是m l e换成了m c e！呵呵，聪明人、或者IT精英也许现在该看出来了…………，l其实就是line、而c其实就是curve的简写形式……。而相同的m表示偏移XY交点多少像素，我们姑且可以理解为开始绘制形状、最后e即表示结束绘制
        在注意看第三个标记，e结束语句前多了个x字母，而运行效果很明显的说明了这个x字母的作用，即是关闭当前正绘制的曲线，并自动创建最后一条线与其点相连。
        在看最后一个标记，是m l c e的混血结构，也就是说即有多边型又有曲线…………
        好了，path还有更多有用的字母，而且用途各异，参考表是（该参考表转载自WWW最高协会网站，只有E文的资料。我之前研究时费了很大力气、更不懂英文，只是参透像m l c x e t r v at ar nf nr等，有几个的实在没能在参透……，所谓 名师亦非神人也、诸葛也败祁山间，这就要看你自己的学习、理解了）。篇幅问题只提供参考表目，不一一提供演示（shape的path属性如果要一一详细解释起来？至少要撰写5个章节，况且shape在实际应用相当难于编写、而VML又有可以替代它的更好用的图形标记。以下表目主要针对提供给VML高级开发人员）

2:curve曲线 - 专用属性

3:curve曲线 - 介绍
curve标记是专门用于创建流畅且线条优美的贝塞尔曲线的，这在现代电脑绘图工作中是不可或缺的绘图算法技术，女性的脸袋、优美的身体曲线、头发、瀑布等等。。但也许你一看到curve的专用属性就会感觉头晕，不过没关系（彼此彼此、正常人的正常反映）。你也许记的初学VML标记时讲的line线，link线也有from、to属性。这里我要告诉你，绘制贝塞尔曲线的第一步就是创建一条线，如下！

        这看起来跟line的写法差不多，而且输出效果也基本一致（from="0,0"可以省略，因为默认就是0,0，我们调整它的意义不大）。不同的就在于control1和control2这两个线条曲度调整属性，请看下面的例子

请仔细仔细的分析上边的代码，这是单曲度的例子，不难看出control1="100,50"其中的100即表示第一个曲度的X差值为100px、y即表示第一个曲度的Y差值为50px

请仔细仔细的分析上边的代码，这是单曲度的例子，不难看出control2="100,50"其中的100即表示第二个曲度的X差值为100px、y即表示第二个曲度的Y差值为50px

        在请仔细揣摩上边的双曲度例子，这个很难说清楚，如果你不懂曲线学的话，我想我越说只会使你越糊涂……。
也许你会说，这太难掌握了，让我怎么去划画、去实际应用？回答是FlashVml有专门的curve贝塞尔曲线可视化设计工具，通过该工具，你可以“玩转”贝塞尔曲线了。同时也是最好的control1、control2“讲解”工具，你可以边设计曲线、边观察图型VML源码的变化，从而分析出自己的理解、结论，算是你的第二个、不像我一样爱罗嗦的“VML老师”了~。

博文来源：http://www.cnblogs.com/GeneralXU/archive/2007/05/29/763234.html