VML编程之shape多边型.shapetype模版.shape与curve曲线《VML极道教程》原著:沐缘华

《VML极道教程》原著:沐缘华
1章12节:shape多边型

1:shape多边型 - 专用属性

    
            属性名
            默认值
            值类型/范围
            Dhtml访问
            用途
        
        
            path
            m0,0 l e
            command
            path.value
            描述多边形的形状
        
        
            type
            null
            #ShapeTypeName
            
            暗示引用的shapetype模版名称
        
    
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动画时是有一定帮助的。
2:shape多边型 - 通用属性coordsize使用讲解
<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">

<v:shape style="Z-INDEX:1;LEFT:71;WIDTH:100;POSITION:absolute;TOP:225;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="white" path="m0,0 l30,-30 e"/>

<v:shape style="Z-INDEX:1;LEFT:171;WIDTH:100;POSITION:absolute;TOP:225;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="white" path="m0,0 l30,-30,60,0 e"/>

<v:shape style="Z-INDEX:1;LEFT:271;WIDTH:100;POSITION:absolute;TOP:225;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="white" path="m0,0 l30,-30,60,0,0,0 e"/>

<v:shape style="Z-INDEX:1;LEFT:371;WIDTH:100;POSITION:absolute;TOP:225;HEIGHT:100" coordsize="100,100" filled="f" strokecolor="blue" path="m0,0 l30,30,60,0,0,0 e"/>

 

<v:shape style="Z-INDEX:1;LEFT:471;WIDTH:50;POSITION:absolute;TOP:225;HEIGHT:100" coordsize="100,100" filled="f" strokecolor="blue" path="m0,0 l30,30,60,0,0,0 e"/>

<v:shape style="Z-INDEX:1;LEFT:571;WIDTH:2000;POSITION:absolute;TOP:225;HEIGHT:2000" coordsize="1000,1000" filled="t" strokecolor="blue" path="m0,0 l30,30,60,0,0,0 e"/>

<v:shape style="Z-INDEX:1;LEFT:571;WIDTH:5000;POSITION:absolute;TOP:300;HEIGHT:5000" coordsize="1000,1000" filled="t" strokecolor="blue" path="m0,0 l30,30,60,0,0,0 e"/>



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

<v:shape style="Z-INDEX:1;LEFT:71;WIDTH:100;POSITION:absolute;TOP:225;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="white" path="m0,0 l30,-30 e"/>

<v:shape style="Z-INDEX:1;LEFT:171;WIDTH:100;POSITION:absolute;TOP:225;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="white" path="m0,0 l30,-30,60,0 e"/>

<v:shape style="Z-INDEX:1;LEFT:271;WIDTH:100;POSITION:absolute;TOP:225;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="white" path="m0,0 l30,-30,60,0,0,0 e"/>

<v:shape style="Z-INDEX:1;LEFT:371;WIDTH:100;POSITION:absolute;TOP:225;HEIGHT:100" coordsize="100,100" filled="f" strokecolor="blue" path="m0,0 l30,30,60,0,0,0 e"/>



其实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，所以就向下伸展成了倒三角
4:shape多边型 - 应用实例
shape多边型跟polyline多边型大同小异，都能够绘制任意形状的多边型，如果各线直间的距离很短，就会形成连续且流畅的铅笔书写、划画工具。但这往往是手写代码难于实现的，但可以借助FlashVml的强大绘图功能得以实现
<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>

<v:shape style="Z-INDEX:3180;LEFT:300px;WIDTH:100px;POSITION:absolute;TOP:179px;HEIGHT:100px" coordsize="100,100" filled="f" fillcolor="white" strokecolor="black" strokeweight=".75pt" path=" m0,0 l0,0,-5,16,-6,18,-7,20,-7,21,-8,21,-9,23,-10,24,-11,25,-12,26,-13,27,-15,28,-18,29,-21,31,-23,32,-25,33,-26,34,-25,31,-22,28,-19,24 -16,20,-12,15,-9,11,-6,7,-3,4,0,2,3,0,4,-2,6,-3,14,-9,15,-11,16,-12,17,-13,18,-11,18,-9,18,-5,18,-1,18,4,18,9,20,15 21,19,24,26,26,28,27,29,28,30,30,31,31,31,33,31,35,32,35,33,36,31,34,29,30,24,22,19,15,14,2,8,-2,6,-3,5,-4,5,-5,4 -5,3,-5,4,-3,6,3,10,9,14,13,18,18,23,22,27,27,31,28,33,30,34,31,33,31,31,31,27,29,23,27,19,24,16,22,14,20,11,18,9 17,9,15,10,13,12,10,15,7,18,5,21,2,24,-1,25,-2,27,-3,29 e"/>

<v:shape style="Z-INDEX:3185;LEFT:360px;WIDTH:100px;POSITION:absolute;TOP:173px;HEIGHT:100px" coordsize="100,100" filled="f" fillcolor="white" strokecolor="blue" strokeweight=".75pt" path=" m0,0 l0,0,34,-8,33,-7,31,-4,29,-2,27,1,25,3,23,4,21,6,19,7,19,8,18,8,17,9,16,9,14,10,12,10,9,11,6,12,4,12,8,12 13,12,19,9,23,8,27,7,29,7,31,7,29,9,25,13,20,16,16,20,11,24,7,26,6,27,8,27,12,27,17,26,23,25,27,23,30,21,31,20 32,20,33,19,33,18,34,18,36,20,38,23,39,25,41,28,42,30,43,32 e"/>

<v:shape style="Z-INDEX:3186;LEFT:452px;WIDTH:100px;POSITION:absolute;TOP:160px;HEIGHT:100px" coordsize="100,100" filled="f" fillcolor="white" strokecolor="red" strokeweight=".75pt" path=" m0,0 l0,0,-12,17,-13,18,-11,16,-7,14,-2,12,3,9,9,6,15,5,20,4,22,3,24,2,22,5,20,7,15,10,14,11,11,14,7,17,4,19,1,20 1,21,0,21,-2,22,-2,23,-4,24,-1,23,3,21,11,19,18,17,23,15,29,14,30,14,31,14,28,14,24,14,21,14,17,14,14,13,13,13,11,12 10,15,10,17,10,21,10,24,10,25,10,26,11,24,13,22,15,18,15,15,15,12,16,11,16,10,17,10,18,11,18,13,18,15,18,16,18,18,18,19 18,20,19,18,20,17,22,15,23,12,24,11,24,13,24,14,24,17,24,20,22,22,19,24,15,27,9,30,2,31,-3,33,-7,34,-11,36,-13,37,-10,34 -3,31,5,26,12,23,20,19,25,17,29,15,26,16,21,19,15,23,9,28,3,33,-2,36,-7,40,-8,41,-4,38,0,36,6,34,10,32,11,30,13,29 14,31,14,34,11,38,4,43,-5,49,-16,55,-28,60,-37,64,-43,65,-42,65,-39,63,-33,58,-27,56,-20,51,-12,49,-7,45,1,43,6,39,9,38,10,37 11,36,11,35,12,35,14,34,15,33,16,33,13,34,10,35,5,38,3,40,2,41,2,42,3,43,4,43,6,43,8,43,12,43,16,42,22,40,27,37 33,34,36,33,39,31,39,29,39,28,39,26,38,25,36,24,35,24,34,24,33,25,33,26,32,27,32,29,32,32,32,35,32,39,32,42,32,44,32,47 33,50,35,54,37,58,39,62,41,66,42,69 e"/>

<v:shape style="Z-INDEX:3187;LEFT:327px;WIDTH:100px;POSITION:absolute;TOP:277px;HEIGHT:100px" coordsize="100,100" filled="t" fillcolor="yellow" strokecolor="black" strokeweight=".75pt" path=" m0,0 l0,0,9,0,20,-9,19,20,10,10,0,10,0,0 e"/>








《VML极道教程》原著:沐缘华

1章13节:shapetype模版 

1:shapetype模版 - 实例讲解
<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>

<v:ShapeType id="m1" coordsize="1000 1000" fillcolor="yellow">

<v:Path v="m0,0 l30,-30,60,0,0,0 e"/>

</v:ShapeType>

<v:Shape style="Z-INDEX:1;LEFT:271;WIDTH:1000;POSITION:absolute;TOP:225;HEIGHT:1000" type="#m1"/>

<v:Shape style="Z-INDEX:1;LEFT:371;WIDTH:2600;POSITION:absolute;TOP:225;HEIGHT:4600" type="#m1"/>

<v:Shape style="Z-INDEX:1;LEFT:271;WIDTH:1000;POSITION:absolute;TOP:300;HEIGHT:1000" type="#m1" fillcolor="red"/>



综合上一章节所学的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"的意思，请参考上一章节。
《VML极道教程》原著:沐缘华

1章14节:shape与curve曲线 

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

<v:shape style="Z-INDEX:1;LEFT:100;WIDTH:100;POSITION:absolute;TOP:225;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="white" path="m0,0 c130,-90,30,90,150,180 e"/>

<v:shape style="Z-INDEX:1;LEFT:271;WIDTH:100;POSITION:absolute;TOP:225;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="white" path="m0,0 c130,-90,30,90,160,0 e"/>

<v:shape style="Z-INDEX:1;LEFT:500;WIDTH:100;POSITION:absolute;TOP:225;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="white" path="m0,0 c130,-90,30,90,160,0,-80,50,30,190,220,-50 x e"/>

<v:shape style="Z-INDEX:1;LEFT:350;WIDTH:100;POSITION:absolute;TOP:400;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="white" path="m0,0 l50,-60,100,0,50,60,0,0 c-130,-90,-30,90,130,180 e"/>



结合你以前学的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高级开发人员）


    
            字母
            名称
            参数序列 *代表支持延伸
            说明
        
        
            m
            moveto
            2
            Start a new sub-path at the given (x,y) coordinate
        
        
            l
            lineto
            2*
            Draw a line from the current point to the given (x,y) coordinate which becomes the new current point. A number of coordinate pairs may be specified to form a polyline.
        
        
            c
            curveto
            6*
            Draw a cubic bézier curve from the current point to the coordinate given by the final two parameters, the control points given by the first four parameters. The current point becomes the end point of the bézier.
        
        
            x
            close
            0
            Close the current sub-path by drawing a straight line from the current point to the original moveto point.
        
        
            e
            end
            0
            End the current set of sub-paths. A given set of sub-paths (as delimited by end) is filled using eofill. Subsequent sets of sub-paths are filled independently and superimposed on existing ones.
        
        
            t
            rmoveto
            2*
            Start a new sub-path at the coordinate (cpx+x, cpy+y).
        
        
            r
            rlineto
            2*
            Draw a line from the current point to the given relative coordinate (cpx+x, cpy+y).
        
        
            v
            rcurveto
            6*
            Cubic bézier curve using the given coordinate relative to the current point.
        
        
            nf
            nofill
            0
            The current set of sub-paths (delimited by end - e) will not be filled.
        
        
            ns
            nostroke
            0
            The current set of sub-paths (delimited by end - e) will not be filled.
        
        
            ae
            angleellipseto
            6*
            center (x,y) size(w,h) start-angle, end-angle. Draw a segment of an ellipse as describes using these parameters. A straight line is drawn from the current point to the start point of the segment.
        
        
            al
            angleellipse
            6*
            Same as angleellipseto except that there is an implied moveto the starting point of the segment.
        
        
            at
            arcto
            8*
            left, top, right, bottom start(x,y) end(x,y). The first four values define the bounding box of an ellipse. The last four define two radial vectors. A segment of the ellipse is drawn which starts at the angle defined by the start radius vector and ends at the angle defined by the end vector. A straight line is drawn from the current point to the start of the arc. The arc is always drawn in a counterclockwise direction.
        
        
            ar
            arc
            8*
            left, top, right, bottom start(x,y) end(x,y). Same as arcto however a new sub-path is started by an implied moveto the start point of the arc.
        
        
            wa
            clockwisearcto
            8*
            left, top, right, bottom start(x,y) end(x,y). Same as arcto but the arc is drawn in a clockwise direction.
        
        
            wr
            clockwisearc
            8*
            left, top, right, bottom start(x,y) end(x,y). Same as arc but the arc is drawn in a clockwise direction
        
        
            qx
            ellipticalqaudrantx
            2*
            end(x,y). A quarter ellipse is drawn from the current point to the given end point. The elliptical segment is initially tangential to a line parallel to the x-axis. (i.e. the segment starts out horizontal) 
        
        
            qy
            ellipticalquadranty
            2*
            end(x,y). Same as ellipticalquadrantx except that the elliptical segment is initially tangential to a line parallel to the y-axis. (i.e. the segment starts out vertical) 
        
        
            qb
            quadraticbezier
            2+2*
            (controlpoint(x,y))*, end(x,y) Defines one or more quadratic bézier curves by means of control points and an end point. Intermediate (on-curve) points are obtained by interpolation between successive control points as in the OpenType font specification. The sub-path need not be started in which case the sub-path will be closed. In this case the last point of the sub-path defines the start point of the quadratic bézier. 
        
    

2:curve曲线 - 专用属性

    
            属性名
            默认值
            值类型/范围
            用途
        
        
            from
            null
            Vector2D
            描述曲线起点偏移XY交接点位置
        
        
            control1
            null
            Vector2D
            描述曲线的第一个曲度
        
        
            control2
            null
            Vector2D
            描述曲线的第二个曲度
        
        
            to
            null
            Vector2D
            描述曲线偏移from的X2Y2终点
        
    
3:curve曲线 - 介绍
curve标记是专门用于创建流畅且线条优美的贝塞尔曲线的，这在现代电脑绘图工作中是不可或缺的绘图算法技术，女性的脸袋、优美的身体曲线、头发、瀑布等等。。但也许你一看到curve的专用属性就会感觉头晕，不过没关系（彼此彼此、正常人的正常反映）。你也许记的初学VML标记时讲的line线，link线也有from、to属性。这里我要告诉你，绘制贝塞尔曲线的第一步就是创建一条线，如下！
<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>

<v:curve style="Z-INDEX:1;LEFT:300;POSITION:absolute;TOP:200" from="0,0" to="150px,0px" strokecolor="green"/>



这看起来跟line的写法差不多，而且输出效果也基本一致（from="0,0"可以省略，因为默认就是0,0，我们调整它的意义不大）。不同的就在于control1和control2这两个线条曲度调整属性，请看下面的例子
<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>

<v:curve style="Z-INDEX:1;LEFT:100;POSITION:absolute;TOP:100" to="150px,0px" strokecolor="green" control1="100,50"/>

<v:curve style="Z-INDEX:1;LEFT:100;POSITION:absolute;TOP:200" to="150px,0px" strokecolor="green" control1="150px,50px"/>

<v:curve style="Z-INDEX:1;LEFT:100;POSITION:absolute;TOP:300" to="150px,0px" strokecolor="green" control1="0,50"/>

<v:curve style="Z-INDEX:1;LEFT:100;POSITION:absolute;TOP:400" to="150px,0px" strokecolor="green" control1="-50,50"/>



请仔细仔细的分析上边的代码，这是单曲度的例子，不难看出control1="100,50"其中的100即表示第一个曲度的X差值为100px、y即表示第一个曲度的Y差值为50px
<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>

<v:curve style="Z-INDEX:1;LEFT:100;POSITION:absolute;TOP:100" to="150px,0px" strokecolor="green" control2="100,50"/>

<v:curve style="Z-INDEX:1;LEFT:100;POSITION:absolute;TOP:200" to="150px,0px" strokecolor="green" control2="150px,50px"/>

<v:curve style="Z-INDEX:1;LEFT:100;POSITION:absolute;TOP:300" to="150px,0px" strokecolor="green" control2="0,50"/>

<v:curve style="Z-INDEX:1;LEFT:100;POSITION:absolute;TOP:400" to="150px,0px" strokecolor="green" control2="-50,50"/>



请仔细仔细的分析上边的代码，这是单曲度的例子，不难看出control2="100,50"其中的100即表示第二个曲度的X差值为100px、y即表示第二个曲度的Y差值为50px
<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">

<v:curve style="Z-INDEX:1;LEFT:100;POSITION:absolute;TOP:100" to="150px,0px" fillcolor="yellow" control1="75,50" control2="75,-50"/>

<v:curve style="Z-INDEX:1;LEFT:350;POSITION:absolute;TOP:100" to="0,150px" control1="50,75" control2="-50,75"/>

 

<v:curve style="Z-INDEX:1;LEFT:100;POSITION:absolute;TOP:300" to="150px,0px" filled='f' control1="75,150" control2="75,-150"/>

<v:curve style="Z-INDEX:1;LEFT:300;POSITION:absolute;TOP:300" to="150px,0px" fillcolor="green" control1="110,150" control2="110,-150"/>

 

<v:curve style="Z-INDEX:1;LEFT:100;POSITION:absolute;TOP:500" to="150px,0px" strokeweight=2 control1="300,150" control2="300,0"/>

<v:curve style="Z-INDEX:1;LEFT:500;POSITION:absolute;TOP:500" to="150px,0px" fillcolor="blue" stroked=f control1="-110,-150" control2="-110,-150"/>



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

相关阅读:
webpack进阶（二）
webpack的loader和plugin的区别
 接口和面向接口编程
 设计原则与编程技巧汇总
 W3C的盒子模型和IE的盒子模型
 React的组件
 React的路由react-router
三种编程命名规则：驼峰命名法，帕斯卡命名法，匈牙利命名法
 gulp 构建 demo
antd 表单的两种校验方式
原文地址：https://www.cnblogs.com/GeneralXU/p/763234.html

属性名	默认值	值类型/范围	Dhtml访问	用途
path	m0,0 l e	command	path.value	描述多边形的形状
type	null	#ShapeTypeName		暗示引用的shapetype模版名称

字母	名称	参数序列 *代表支持延伸	说明
m	moveto	2	Start a new sub-path at the given (x,y) coordinate
l	lineto	2*	Draw a line from the current point to the given (x,y) coordinate which becomes the new current point. A number of coordinate pairs may be specified to form a polyline.
c	curveto	6*	Draw a cubic bézier curve from the current point to the coordinate given by the final two parameters, the control points given by the first four parameters. The current point becomes the end point of the bézier.
x	close	0	Close the current sub-path by drawing a straight line from the current point to the original moveto point.
e	end	0	End the current set of sub-paths. A given set of sub-paths (as delimited by end) is filled using eofill. Subsequent sets of sub-paths are filled independently and superimposed on existing ones.
t	rmoveto	2*	Start a new sub-path at the coordinate (cpx+x, cpy+y).
r	rlineto	2*	Draw a line from the current point to the given relative coordinate (cpx+x, cpy+y).
v	rcurveto	6*	Cubic bézier curve using the given coordinate relative to the current point.
nf	nofill	0	The current set of sub-paths (delimited by end - e) will not be filled.
ns	nostroke	0	The current set of sub-paths (delimited by end - e) will not be filled.
ae	angleellipseto	6*	center (x,y) size(w,h) start-angle, end-angle. Draw a segment of an ellipse as describes using these parameters. A straight line is drawn from the current point to the start point of the segment.
al	angleellipse	6*	Same as angleellipseto except that there is an implied moveto the starting point of the segment.
at	arcto	8*	left, top, right, bottom start(x,y) end(x,y). The first four values define the bounding box of an ellipse. The last four define two radial vectors. A segment of the ellipse is drawn which starts at the angle defined by the start radius vector and ends at the angle defined by the end vector. A straight line is drawn from the current point to the start of the arc. The arc is always drawn in a counterclockwise direction.
ar	arc	8*	left, top, right, bottom start(x,y) end(x,y). Same as arcto however a new sub-path is started by an implied moveto the start point of the arc.
wa	clockwisearcto	8*	left, top, right, bottom start(x,y) end(x,y). Same as arcto but the arc is drawn in a clockwise direction.
wr	clockwisearc	8*	left, top, right, bottom start(x,y) end(x,y). Same as arc but the arc is drawn in a clockwise direction
qx	ellipticalqaudrantx	2*	end(x,y). A quarter ellipse is drawn from the current point to the given end point. The elliptical segment is initially tangential to a line parallel to the x-axis. (i.e. the segment starts out horizontal)
qy	ellipticalquadranty	2*	end(x,y). Same as ellipticalquadrantx except that the elliptical segment is initially tangential to a line parallel to the y-axis. (i.e. the segment starts out vertical)
qb	quadraticbezier	2+2*	(controlpoint(x,y))*, end(x,y) Defines one or more quadratic bézier curves by means of control points and an end point. Intermediate (on-curve) points are obtained by interpolation between successive control points as in the OpenType font specification. The sub-path need not be started in which case the sub-path will be closed. In this case the last point of the sub-path defines the start point of the quadratic bézier.