Fles s:Path 用法与SVG

转载于:http://blog.163.com/jianchangxiang@126/blog/static/367822272012926113020920/

首先我想说的是，我以前认为flex很强大，flash会的它全会，flash不会的它也会，但是我一直纳闷flex为什么不能画图呢？怎么简单的功能，为什么没有呢，原来我错了，它有，就是path。

skinClass中绘制多边形使用Path标签，把绘制路径放在data属性里。
如：<s:Path data="M0 0L10 10Z"/>
在编写绘制路径时，会用到一些控制关链字，这是必须了解的。
M(x,y)：移动到点(x,y)。
Z：结束并关闭路径（路径最后的点会画一条直线到路径起启点）。
L(x,y)：画一条直线到点(x,y)（一般和M一起使用，见下面例子）。
C(x1,y1,x,y,x2,y2)：从(x1,y1)画一条弧线到(x2,y2)，(x,y)为弧度控制点（|x1-x|=弧y轴半径，|y-y2|=弧x轴半径，当弧y轴半径=弧x轴半径时，此弧为圆弧）。
以下是一个简单的例子，绘制的都是一些基础图形，复杂图形也都是由基础图形构成的：
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Metadata>
[HostComponent("spark.components.SkinnableContainer")]
</fx:Metadata>
<fx:Script>
<![CDATA[
import mx.graphics.SolidColorStroke;
[Bindable]
private var stroke:SolidColorStroke = new SolidColorStroke(0xfff000, 2);
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<s:HGroup gap="50">
<s:VGroup>
<!--横线-->
<s:Path data="M0 0L60 0Z" stroke="{stroke}"/>
<!--竖线-->
<s:Path data="M0 0L0 60Z" stroke="{stroke}"/>
<!--右45度斜线-->
<s:Path data="M0 0L60 60Z" stroke="{stroke}"/>
<!--左45度斜线-->
<s:Path data="M0 60L60 0Z" stroke="{stroke}"/>
<!--虚线-->
<s:Path data="M0 0L10 0Z M20 0L30 0Z M40 0L50 0Z M60 0L70 0Z" stroke="{stroke}"/>
<!--1/4圆弧-->
<s:Path data="C0 0 0 60 60 60" stroke="{stroke}"/>
</s:VGroup>
<s:VGroup>
<!--正方形-->
<s:Path data="M0 0 60 0 60 60 0 60Z" stroke="{stroke}"/>
<!--三角形-->
<s:Path data="M0 0 60 0 30 40Z" stroke="{stroke}"/>
<!--半圆形-->
<s:Path data="C0 0 0 30 30 30 30 30 60 30 60 0Z" stroke="{stroke}"/>
<!--叶形-->
<s:Path data="Q0 0 0 30 30 30 30 30 60 30 60 0 60 -30 30 -30 0 -30 0 0" stroke="{stroke}"/>
<!--五角星-->
<s:Path data="M31.0376 1.17676L40.3076 20.9272 61.0376 24.0947 46.0376 39.4683 49.5786 61.1768 31.0376 50.9272 12.4966 61.1768 16.0376 39.4683 1.0376 24.0947 21.7676 20.9272 31.0376 1.17676Z" stroke="{stroke}"/>
</s:VGroup>
</s:HGroup>
</s:Skin>
较果如下：

相信大家绝大多数都是找到得这个，但是这里面的东西太少了，而且C讲解的很不清楚，其实（x、y）是(x1,y1)、(x2,y2)两点的切线的交点。至于弧半径呢，我就不说了，就是半径。

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="***"即可查看效果。

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>