转自小黑写日记
在W3SCHOOL的SVG教程中可以看出,SVG除了内建了一些基本图形矩形圆形椭圆线条多边形折线外,还支持使用标签来自定义路径从而创建复杂的矢量图形(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下载一个
三角形:
/p>
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
xmlns="http://www.w3.org/2000/svg">
螺旋:
/p>
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
xmlns="http://www.w3.org/2000/svg">
style="fill:white;stroke:red;stroke-width:2"/>
FLEX中使用DEGRAFA的PATH类指定DATA<?xml version="1.0" encoding="utf-8"?>
如上,将手工绘制或者软件帮助完成的PATH字符串填入Path data="***"即可查看效果。
一个比较著名的效果图就是SVG TIGER:
FLEX中使用BitmapFill的source属性指定SVG类文件
backgroundGradientColors="[#333333, #222222]"
xmlns:degrafa="com.degrafa.*"
xmlns:paint="com.degrafa.paint.*"
xmlns:geometry="com.degrafa.geometry.*">
[Embed(source="circle.svg")]
[Bindable]
public var svgTest:Class;
]]>
circle.svg:
/p>
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
All SVG documents should have a description