深入SVG路径~~~在DEGRAFA中使用PATH

在W3SCHOOL的SVG教程中可以看出，SVG除了内建了一些基本图形矩形圆形椭圆线条多边形折线外，还支持使用<path>标签来自定义路径从而创建复杂的矢量图形(Paths represent the outline of a shape which can be filled or stroked.)。本文将以附图及实例的方式来详细介绍SVG Path的语法结构，并在文末简要说明如何在DEGRAFA中使用支持SVG的PATH类。

 

PATH十种指令：

括号内为相应参数，详细解释见后文。

M = moveto(M X,Y)
L = lineto(L X,Y)
H = horizontal lineto(H X)
V = vertical lineto(V Y)
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)
S = smooth curveto(S X2,Y2,ENDX,ENDY)
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)
T = smooth quadratic Belzier curveto(T ENDX,ENDY)
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)
Z = closepath()
注释：
　　坐标轴为以(0,0)为中心，X轴水平向右，Y轴水平向下。
　　所有指令大小写均可。大写绝对定位，参照全局坐标系；小写相对定位，参照父容器坐标系
　　对于S,T指令，其X1,Y1为前一条曲线的X2,Y2的反射
　　指令和数据间的空格可以省略
　　同一指令出现多次可以只用一个

L H V指令
　M起点X，起点YL（直线）终点X，终点YH（水平线）终点XV（垂直线）终点Y
　如M10,20,L80,50,M10,20,V50,M10,20,H90

C指令——三次贝塞曲线
　C第一控制点X，第一控制点Y 第二控制点X，第二控制点Y曲线结束点X，曲线结束点Y

S指令
　S第二控制点X，第二控制点Y 结束点X，结束点Y

Q指令——二次贝塞曲线
　Q控制点X，控制点Y 曲线结束点X，曲线结束点Y
如M0,25,Q12.5,37.5,25,25,M25,25,Q37.5,12.5,50,25

T指令——映射
　T映射前面路径后的终点X，映射前面路径后的终点Y

A指令
　Elliptical Arc，允许不闭合。可以想像成是椭圆的某一段，共七个参数。
　RX,RY指所在椭圆的半轴大小
　XROTATION指椭圆的X轴与水平方向顺时针方向夹角，可以想像成一个水平的椭圆绕中心点顺时针旋转XROTATION的角度。
　FLAG1只有两个值，1表示大角度弧线，0为小角度弧线。
　FLAG2只有两个值，确定从起点至终点的方向，1为顺时针，0为逆时针
　X,Y为终点坐标
　如M0,25,A12.5,12.5,0,1,1,0,25.01Z表示一个圆心在(12.5,25)，半径为12.5的圆。其中起点和终点几乎重合，用Z指令将它们闭合，注意终点不能填(0,25)，那样A指令是无法被解析的。

 

由以上介绍可以看出，手工绘制SVG路径是相当复杂的。对于简单的SVG图形，一般只使用M,L,Q,A,Z五种指令完成。更复杂的图形则必须要靠软件来帮助完成，比如ADOBE ILLUSTRATOR。

 

两个完整的例子：

把代码拷入记事本，保存为"**.svg"即可。如果无法运行，可能需要SVGVIEWER，详情参照SVG中国相关内容或者GOOGLE下载一个

三角形：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<path d="M250 150 L150 350 L350 350 Z" />

</svg>

螺旋：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>

</svg>

 参考链接：http://www.w3.org/TR/SVG/paths.html

FLEX中使用DEGRAFA的PATH类指定DATA
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" xmlns:degrafa="http://www.degrafa.com/2007">
<degrafa:Surface>
 <degrafa:GeometryGroup scaleX="2" scaleY="2">
     <degrafa:Path data="M0,25,Q12.5,37.5,25,25,M25,25,Q37.5,12.5,50,25" stroke="{blackstroke}"/>
    </degrafa:GeometryGroup>
 <degrafa:strokes>
  <degrafa:SolidStroke id="blackstroke" color="#000000" weight="1">
     </degrafa:SolidStroke>
 </degrafa:strokes>
</degrafa:Surface> 
</mx:Application>
如上，将手工绘制或者软件帮助完成的PATH字符串填入Path data="***"即可查看效果。

一个比较著名的效果图就是SVG TIGER：

 

FLEX中使用BitmapFill的source属性指定SVG类文件

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
                backgroundGradientColors="[#333333, #222222]"
                xmlns:degrafa="com.degrafa.*"
                xmlns:paint="com.degrafa.paint.*"
                xmlns:geometry="com.degrafa.geometry.*">              
    <degrafa:Surface verticalCenter="0" horizontalCenter="0">
        <degrafa:fills>
            <paint:BitmapFill id="bitmapFill" source="{svgTest}" smooth="true"/>
        </degrafa:fills>
        <degrafa:GeometryGroup scaleX="1" scaleY="1">
            <geometry:Circle fill="{bitmapFill}" radius="450"/>
        </degrafa:GeometryGroup>
    </degrafa:Surface>
 <mx:Script>
  <![CDATA[
   [Embed(source="circle.svg")]
   [Bindable]
   public var svgTest:Class;
  ]]>
 </mx:Script>
</mx:Application>

circle.svg:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <desc>All SVG documents should have a description</desc>
    <defs>
      <!-- Items can be defined for later use -->
  </defs>
   <g>
      <circle cx="15" cy="15" r="15" fill="red"/>
  </g>
</svg>