Graphics 类画图方法.docx
《Graphics 类画图方法.docx》由会员分享，可在线阅读，更多相关《Graphics 类画图方法.docx（16页珍藏版）》请在冰豆网上搜索。
Graphics类画图方法
1.lineStyle（）方法详解
说明：
该方法用来定义线条的样式，详细调用如下：
publicfunctionlineStyle（
thickness:
Number=NaN,
color:
uint=0,
alpha:
Number=1.0,
pixelHinting:
Boolean=false,
scaleMode:
String=“normal”,
caps:
String=null,
joints:
String=null,
miterLimit:
Number=3
）:
void
thickness（线条宽度）
定义线条的宽度，以px为单位。
color（线条颜色）
定义线条的颜色，默认为黑色。
alpha（透明度）
定义线条的透明度，默认为1，0.5为半透明。
pixelHinting（用于指定是否提示笔触采用完整像素的布尔值）
默认为false，一般情况下为默认值就OK。
scaleMode（缩放模式）
值为flash.display.LineScaleMode的一个枚举值，该枚举包含NORMAL（总是缩放粗细）、NONE（从不缩放粗细）、VERTICAL（如果仅垂直缩放对象，则不缩放线条粗细）、HORIZONTAL（如果仅水平缩放对象，则不缩放线条粗细）。
默认值为NORMAL。
LineScaleMode.VERTICAL图示：
LineScaleMode.HORIZONTAL图示：
caps（用于指定线条末端类型）
值为flash.display.LineScaleMode的一个枚举值，包含CapsStyle.NONE、CapsStyle.ROUND和CapsStyle.SQUARE。
默认为CapsStyle.ROUND（圆头端点）。
joints（用于指定线条拐角类型）
JointStyle类的值，指定用于拐角的连接外观的类型。
有效值为：
JointStyle.BEVEL、JointStyle.MITER和JointStyle.ROUND（默认值）
miterLimit（指定斜接限制）
值越大，越接近锐利的尖角，默认值为3。
只有当joints的值为MITER才有效，可以通过设置该值实现BEVEL的效果。
2.lineGradientStyle（）方法详解
说明：
该方法用来定义线条渐变的样式
publicfunctionlineGradientStyle（
type:
String,
colors:
Array,
alphas:
Array,
ratios:
Array,
matrix:
Matrix=null,
spreadMethod:
String=“pad”,
interpolationMethod:
String=“rgb”,
focalPointRatio:
Number=0
）:
void
type（渐变类型）
用于指定要使用哪种渐变类型的GradientType类的值：
GradientType.LINEAR（线性）或GradientType.RADIAL（放射）
colors（渐变颜色数组）
要在渐变中使用的RGB十六进制颜色值数组。
（如[0x000000,0xFFFFFF]）
alphas（alpha值数组）
colors数组中对应颜色的alpha值数组；有效值为0到1。
如果值小于0，则默认值为0。
如果值大于1，则默认值为1
matrix（转换矩阵）
一个由flash.geom.Matrix类定义的转换矩阵。
flash.geom.Matrix类包括createGradientBox（）方法，通过该方法可以方便地设置矩阵，以便与lineGradientStyle（）方法一起使用
spreadMethod（散布方式）
用于指定要使用哪种散布方式的SpreadMethod类的值：
SpreadMethod.PAD,SpreadMethod.REFLECT，SpreadMethod.REPEAT。
貌似只在Radial渐变下有效
interpolationMethod（插值方法）
用于指定要使用哪种插值方法的InterpolationMethod类的值：
InterpolationMethod.LINEAR_RGB，InterpolationMethod.RGB。
感觉LINEAR_RGB效果比较平滑
focalPointRatio（渐变焦点位置）
一个控制渐变的焦点位置的数字。
值0表示焦点位于中心。
值1表示焦点位于渐变圆的一条边界上。
值-1表示焦点位于渐变圆的另一条边界上。
小于-1或大于1的值将舍入为-1或1
一些重要的概念：
*如果设置lineGradientStyle，那么lineStyle（）里的颜色设置将不再生效。
*对于数组值，如果数量不匹配，就是某些值多了或少了，那么就会引起会静默失败——没有渐变，没有填充，没有错误信息。
*使用Math.PI/2旋转90度形成一个垂直填充。
-Math.PI/2形成向上填充，而Math.PI则是从右向左填充，默认为从左向右填充。
*ratios（分布比率数组）主要代表了渐变的快慢程度，假如有3个颜色，[0,20,255]，则第一个到第二个很快，第二个到第三个会很漫长。
*如果是一个非水平线的线条要实现渐变，则必须先定义一个外切于该线条的转换矩阵，然后依据线条的角度来设置矩阵的渐变角度，例如box.createGradientBox（100,30,Math.PI/4,100,100）;
设置渐变的一般步骤：
1.定义lineStyle来设置线条的粗细
2.定义一个转换矩阵，并设置矩阵与将要应用渐变的线条一样大小。
例如：
varbox:
Matrix=newMatrix（）;box.createGradientBox（200,30,0,100,100）;
3.定义lineGradientStyle，将设置好的Matrix（转换矩阵）作为参数传递。
4.绘制线条。
例子：
1.一个很正规的线性渐变
viewplaincopytoclipboardprint?
varbox:
Matrix=newMatrix（）;
box.createGradientBox（100,30,0,100,100）;
varline:
Shape=newShape（）;
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）;
varbox:
Matrix=newMatrix（）;
box.createGradientBox（100,30,0,100,100）;
varline:
Shape=newShape（）;
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°）
viewplaincopytoclipboardprint?
varbox:
Matrix=newMatrix（）;
//90°垂直渐变
//box.createGradientBox（30,100,Math.PI/2,100,100）;
//45°渐变
box.createGradientBox（137,137,Math.PI/4,82,82）;
varline:
Shape=newShape（）;
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）;
varbox:
Matrix=newMatrix（）;
//90°垂直渐变
//box.createGradientBox（30,100,Math.PI/2,100,100）;
//45°渐变
box.createGradientBox（137,137,Math.PI/4,82,82）;
varline:
Shape=newShape（）;
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.一个放射性渐变
viewplaincopytoclipboardprint?
varline:
Shape=newShape（）;
line.graphics.lineStyle（100,0×000000,1,false,LineScaleMode.NONE,CapsStyle.NONE）;
varbox:
Matrix=newMatrix（）;
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）;
varline:
Shape=newShape（）;
line.graphics.lineStyle（100,0×000000,1,false,LineScaleMode.NONE,CapsStyle.NONE）;
varbox:
Matrix=newMatrix（）;
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.画虚线
解决方法：
ASCBLibrary下有一个Pen类,利用drawLine（nX0:
Number,nY0:
Number,nX1:
Number,nY1:
Number）方法画出一系列的直线，使其看起来像是虚线。
其中nX0、nY0对应的是moveTo（x,y），nX1、nY1对应的是lineTo（x,y）。
Example:
viewplaincopytoclipboardprint?
package{
importascb.drawing.Pen;
importflash.display.Sprite;
publicclassSample0310extendsSprite
{
publicfunctionSample0310（）
{
varsprite:
Sprite=newSprite（）;
varpen:
Pen=newPen（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）;
}
}
}
package{
importascb.drawing.Pen;
importflash.display.Sprite;
publicclassSample0310extendsSprite
{
publicfunctionSample0310（）
{
varsprite:
Sprite=newSprite（）;
varpen:
Pen=newPen（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.画曲线
解决方法：
publicfunctioncurveTo（controlX:
Number,controlY:
Number,anchorX:
Number,anchorY:
Number）:
void
先定义绘画点（moveTo）,再定义目标点（anchorX,anchorY）,最后定义控制点（controlX,controlY）。
可以用beginFill（）方法定义曲线的填充。
绘制的曲线是二次贝塞尔曲线。
二次贝塞尔曲线包含两个锚点和一个控制点。
该曲线内插这两个锚点，并向控制点弯曲。
Example:
viewplaincopytoclipboardprint?
package{
importflash.display.Shape;
importflash.display.Sprite;
publicclassSample0310extendsSprite
{
publicfunctionSample0310（）
{
varmoon:
Shape=newShape（）;
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）;
}
}
}
package{
importflash.display.Shape;
importflash.display.Sprite;
publicclassSample0310extendsSprite
{
publicfunctionSample0310（）
{
varmoon:
Shape=newShape（）;
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:
viewplaincopytoclipboardprint?
package{
importascb.drawing.Pen;
importflash.display.Sprite;
publicclassSample0310extendsSprite
{
publicfunctionSample0310（）
{
varsprite:
Sprite=newSprite（）;
sprite.graphics.beginFill（0xFFFF00）;
varpen:
Pen=newPen（sprite.graphics）;
pen.drawArc（100,100,50,90,10,true）;
this.addChild（sprite）;
}
}
}
package{
importascb.drawing.Pen;
importflash.display.Sprite;
publicclassSample0310extendsSprite
{
publicfunctionSample0310（）
{
varsprite:
Sprite=newSprite（）;
sprite.graphics.beginFill（0xFFFF00）;
varpen:
Pen=newPen（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:
viewplaincopytoclipboardprint?
package{
importflash.display.Sprite;
publicclassSample0310extendsSprite
{
publicfunctionSample0310（）
{
varsprite:
Sprite=newSprite（）;
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）;
}
}
}
package{
importflash.display.Sprite;
publicclassSample0310extendsSprite
{
publicfunctionSample0310（）
{
varsprite:
Sprite=newSprite（）;
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
升级会员 