Dojo.gfx包分析

3.2. 与渲染器无关的类

与渲染器无关的类包括Fill,Stroke和Matrix，分别对应图形类中的填充，笔画和坐标属性。

填充对象

填充对象描述了图形的不同填充方式。根据填充类型的不同，填充对象的属性数量和种类也不同。Fill 对象现在支持三种填充方式，包括线性渐变填充linearGradientFill，圆形渐变填充radialGradientFill和图案填充PatternFill，其中图案填充不一定被所有浏览器支持（例如目前版本的FireFox）。

l 线性渐变

var lg = {

type: "linear",

x1: 0,y1: 0,x2: 75,y2: 50,

colors: [

{ offset: 0,color: "#F60" },

{ offset: 0.5,color: "#FAF" },

{ offset: 1,color: "#FF6" }

]

};

var ref = surface.createRect(rect)

.setFill(lg)

;

l 圆形渐变

var rg = {

type: "radial",

cx: 100,cy: 100,r: 100,color: "red" },color: "green" },color: "blue" }

]

};

var circle = {cx: 100,r: 100 };

var ref = surface.createCircle(circle)

.setStroke({color: "blue",width: 1 })

.setFill(rg)

.setTransform({dx: 40,dy: 30})

;

l 图案填充

var pattern = {

type: "pattern",

x: 0,y: 0,width: 120,height: 96,

src: "http://dojotoolkit.org/img/viewcvs.png"

};

var ellipse = {cx: 150,rx: 150,ry: 100};

var ref = surface.createEllipse(ellipse)

.setStroke({color: "blue",width: 1 })

.setFill(pattern)

;

笔画对象

笔画对象描述了不同笔画风格，包括颜色，宽度和连接方式。

dojo.gfx.createStroke(color,width,cap,join)

返回一个笔画对象，其中Cap可以为"butt","round",或 "square". Join 可以为"round","bevel",或者一个倾斜数值. Cap 和 join为可选属性。

var points = [ {x:70,y:15},{x:40,y:70},{x:100,y:80},{x:130,y:-20}];

var ref = surface.createPolyline(points)

.setStroke({color:[255,0.7],width:1});

矩阵对象

矩阵对象描述了图形的坐标对象，通过改变图形的坐标矩阵可以完成对图形的平移，旋转，缩放和歪斜等变换。矩阵对象的属性包括 xx,xy,yx,yy,dx,dy，熟悉SVG变换矩阵的都知道其坐标变换公式：

（图）