例子:
1. 一个很正规的线性渐变
var box:Matrix = new Matrix();
box.createGradientBox(100,30,0,100,100);
var line:Shape = new Shape();
line.graphics.lineStyle(30,0xFFFF00,1,false,LineScaleMode.NONE,CapsStyle.NONE);
line.graphics.lineGradientStyle(
GradientType.LINEAR,
[0x000000,0xFFFFFF],
[1,1],
[0,255],
box,
SpreadMethod.PAD,
InterpolationMethod.LINEAR_RGB);
line.graphics.moveTo(100,100);
line.graphics.lineTo(200,100);
this.addChild(line);
2. 一个斜线的线性渐变(45°与90°)
var box:Matrix = new Matrix();
//90°垂直渐变
//box.createGradientBox(30,100,Math.PI/2,100,100);
//45°渐变
box.createGradientBox(137,137,Math.PI/4,82,82);
var line:Shape = new Shape();
line.graphics.lineStyle(30,0xFFFF00,1,false,LineScaleMode.NONE,CapsStyle.NONE);
line.graphics.lineGradientStyle(
GradientType.LINEAR,
[0x000000,0xFFFFFF],
[1,1],
[0,255],
box,
SpreadMethod.PAD,
InterpolationMethod.LINEAR_RGB);
//90°垂直渐变
//line.graphics.moveTo(100,100);
//line.graphics.lineTo(100,200);
//45°垂直渐变
line.graphics.moveTo(100,100);
line.graphics.lineTo(200,200);
this.addChild(line);
3. 一个放射性渐变
var line:Shape = new Shape();
line.graphics.lineStyle(100,0x000000,1,false,LineScaleMode.NONE,CapsStyle.NONE);
var box:Matrix = new Matrix();
box.createGradientBox(30,30,0,130,85);
line.graphics.lineGradientStyle(
GradientType.RADIAL,
[0xFFFF00,0xFF0000],
[1,1],
[0,255],
box,
SpreadMethod.PAD,
InterpolationMethod.LINEAR_RGB,
-0.5
);
line.graphics.moveTo(100,100);
line.graphics.lineTo(200,100);
this.addChild(line);
3. 画虚线
解决方法:
ASCB Library下有一个Pen类,利用drawLine(nX0:Number, nY0:Number, nX1:Number, nY1:Number)方法画出一系列的直线,使其看起来像是虚线。其中nX0、nY0对应的是moveTo(x,y),nX1、nY1对应的是lineTo(x,y)。
Example:
package {
import ascb.drawing.Pen;
import flash.display.Sprite;
public class Sample0310 extends Sprite
{
public function Sample0310()
{
var sprite:Sprite = new Sprite();
var pen:Pen = new Pen(sprite.graphics);
pen.drawLine(0, 20, 10, 20);
pen.drawLine(15, 20, 25, 20);
pen.drawLine(30, 20, 40, 20);
pen.drawLine(45, 20, 55, 20);
this.addChild(sprite);
}
}
}
4. 画曲线
解决方法:
public function curveTo(controlX:Number, controlY:Number, anchorX:Number, anchorY:Number):void
先定义绘画点(moveTo),再定义目标点(anchorX, anchorY),最后定义控制点(controlX,controlY)。
可以用beginFill()方法定义曲线的填充。
绘制的曲线是二次贝塞尔曲线。二次贝塞尔曲线包含两个锚点和一个控制点。该曲线内插这两个锚点,并向控制点弯曲。
package {
import flash.display.Shape;
import flash.display.Sprite;
public class Sample0310 extends Sprite
{
public function Sample0310()
{
var moon:Shape = new Shape();
moon.graphics.lineStyle(1);
moon.graphics.beginFill(0xFFFF00,1);
moon.graphics.moveTo(100,100);
moon.graphics.curveTo(20,150,100,200);
moon.graphics.curveTo(60,150,100,100);
moon.graphics.endFill();
this.addChild(moon);
}
}
}
5. 画扇形
解决方法:
使用ascb的Pen.drawArc(x,y,radius,arc,startingAngle,radialLines)
参数说明:
x -- 扇形中心的x坐标(圆的中心)
y -- 扇形中心的y坐标
radius -- 扇形半径
arc -- 扇形度数,指定为角度
startingAngle -- 扇形开始角度,默认为0(以平行方向为基准,在3点钟的位置为0度)
radialLines -- 布尔值,指示是否画出扇形两端点到中心的直线,默认为false
Example:
package {
import ascb.drawing.Pen;
import flash.display.Sprite;
public class Sample0310 extends Sprite
{
public function Sample0310()
{
var sprite:Sprite = new Sprite();
sprite.graphics.beginFill(0xFFFF00);
var pen:Pen = new Pen(sprite.graphics);
pen.drawArc(100, 100, 50, 90, 10, true);
this.addChild(sprite);
}
}
}
6. 画矩形
解决方法:
有三种方式画矩形,分别是drawRect(),drawRoundRect(),drawRoundRectComplex()
drawRect(x,y,width,height)用于画标准的矩形
drawRoundRect(x,y,width,height,ellipseWidth,ellipseHeight)用于画圆角矩形,其中ellipseWidth和ellipseHeight代表绘制圆角的椭圆的宽度和高度。一般不指定
ellipseHeight,它默认与ellipseWidth的值相同
drawRoundRectComplex(x,y,width,height,topLeftRadius,topRightRadius,bottomLeftRadius,bottomRightRadius)用于画四个角各不相同的圆角矩形,其中
topLeftRadius,topRightRadius,bottomLeftRadius,bottomRightRadius分别代表左上角、右上角、左下角、右下脚的半径
Example:
package {
import flash.display.Sprite;
public class Sample0310 extends Sprite
{
public function Sample0310()
{
var sprite:Sprite = new Sprite();
sprite.graphics.lineStyle(2);
sprite.graphics.beginFill(0xFFFF00);
sprite.graphics.drawRect(50,50,100,100);
sprite.graphics.drawRoundRect(200,50,100,100,10,10);
sprite.graphics.drawRoundRectComplex(350,50,100,100,10,15,20,25);
this.addChild(sprite);
}
}
}
7. 画椭圆
解决方法:
使用drawEllipse(x,y,xRadius,yRadius)画出椭圆。
x -- 椭圆中心的x坐标
y -- 椭圆中心的y坐标
xRadius -- 椭圆x方向的半径
yRadius -- 椭圆y方向的半径
Example:
package {
import flash.display.Sprite;
public class Sample0310 extends Sprite
{
public function Sample0310()
{
var sprite:Sprite = new Sprite();
sprite.graphics.lineStyle(2);
sprite.graphics.beginFill(0xFFFF00);
sprite.graphics.drawEllipse(100,100,100,50);
this.addChild(sprite);
}
}
}
8. 画三角形
解决方法:
使用ascb的Pen.drawTriangle(x,y,ab,ac,angle,rotation)
参数说明:
x -- 夹角点的x坐标
y -- 夹角点的y坐标
ab -- 一条边的长度
ac -- 另一条边的长度
angle -- 两条边的夹角
rotation -- 三角形的旋转角度,默认为0(以平行方向为基准,在3点钟的位置为0度)
一般步骤:
1. 先确定一个点(x,y)
2. 从这个点开始定义两条边(ab,ac)
3. 确定这两条边的夹角
4. 调整三角形的整体旋转角度
Example:
package {
import ascb.drawing.Pen;
import flash.display.Sprite;
public class Sample0310 extends Sprite
{
public function Sample0310()
{
var sprite:Sprite = new Sprite();
var pen:Pen = new Pen(sprite.graphics);
pen.beginFill(0xFF0000);
pen.drawTriangle(100,100,70,70,60,-60);
pen.endFill( );
this.addChild(sprite);
}
}
}
9. 画等边多边形
解决方法:
使用ascb的Pen.drawRegularPolygon(x,y,sides,length,rotation)
参数说明:
x -- 多边形中心的x坐标
y -- 多边形中心的y坐标
sides -- 多边形边数
length -- 每条边的长度
rotation -- (整体)旋转角度
Example:
package {
import ascb.drawing.Pen;
import flash.display.Sprite;
public class Sample0310 extends Sprite
{
public function Sample0310()
{
var sprite:Sprite = new Sprite();
var pen:Pen = new Pen(sprite.graphics);
pen.beginFill(0xFFFF00);
pen.drawRegularPolygon(100,100,5,40,-18);
pen.endFill( );
this.addChild(sprite);
}
}
}
10. 画星形
解决方法:
使用ascb的Pen.drawStar(x,y,points,innerRadius,outerRadius,ratation)
参数说明:
x -- 星形中心的x坐标
y -- 星形中心的y坐标
points -- 多边形边数
innerRadius -- 内半径
outerRadius -- 外半径
ratation -- 旋转角度,默认为0
package {
import ascb.drawing.Pen;
import flash.display.Sprite;
public class Sample0310 extends Sprite
{
public function Sample0310()
{
var sprite:Sprite = new Sprite();
var pen:Pen = new Pen(sprite.graphics);
pen.beginFill(0xFFFF00);
pen.drawStar(100, 100, 5, 40, 100);
pen.endFill( );
this.addChild(sprite);
}
}
}