×

关注微信公众号

免备案网站空间虚拟主机双线空间域名查询PS数码后期
photoshop互助课堂数百G视频教程下载英语培训机构初中英语如何学随时随地聆听大师开讲/课堂
酷素材!视频教程打包下手绘教程抠图教程路径专辑photoshop cs3视频教程
查看: 6958|回复: 9

[AS] 学习AS3菜鸟起飞吧之—显示类(二)

[复制链接]
发表于 2009-9-9 10:27:41 | 显示全部楼层 |阅读模式
学习AS3菜鸟起飞吧之—显示类(二)

Graphics类

  Flash中的绘图是通过Graphics来实现的,Graphics类直接继承Object类,它有很多的绘图方法,这些方法大致可分为两类;一是定义绘图样式的方法,二是用于绘制和清除图形的方法。

     Graphics类的绘图样式方法

  方法名       说明
lineStyle              定义线条样式
lineGradientStrle         定义渐变线条样式
beginFill                        定义固体填充样式
beginGradientFill         定义渐变填充样式
beginBitmapFill           定义位图填充
endFill                           结束填充方法

                      Graphics类的绘制图形方法

  方法名       说明
moveTo                         定义绘制线条的起点
lineTo                            定义绘制线条的终点
curveTo                         绘制曲线
drawCircle                    绘制圆形
drawEllipse                  绘制椭圆
drawRect                     绘制矩形
drawRoundRect         绘制圆角矩形
clear                             清除绘图

 要使用类的属性、方法和事件,首先要创建类的实例,但Graphics类不允许用户自己来创建实例,那怎样才能使用Graphics类的方法呢?
 在显示类Shape类和Sprite类中,有一个graphics属性,这个属性其实就是Graphics类的实例。就是说要使用Graphics类的方法,还是直接创建Graphics类的实例,而是创建Shape类或Sprite类的实例,通过graphics属性就可以调用绘图的方法。
使用示例:
显示实例名.graphics.lineStyle();

 由于MovieClip类继承了Sprite类,所以也可以在MovieClip类的实例中绘图。在实际应用中,一般使用Shape类来绘图,因为Shape类没有Sprite类和MovieClip类那么多的属性、方法和事件,Shape类只有graphics属性和构造方法,绘制图形的效率更高。只有当需要图形的交互功能时,再使用Sprite类和MovieClip类。

编写绘图代码

使用Graphics类的方法首先要创建实例,由于主时间轴是MovieClip类的实例,在编写绘图代码时,可要主时间轴直接进行。

在主时间轴绘制直线:
//定义线条样式
this.graphics.lineStyle(1,0xff0000, .75);
//定义起点
this.graphics.moveTo(0,0);
//定义终点
this.graphics.lineTo(100,100);

逐句讲解一下脚本:
第一句:在舞台上绘制1像素、红色、透明度为.75的线条。
第二句:起点在0,0处,就是x,y的坐标都为0,也就是舞台的左上角。
第三句:终点在100,100, 就是x,y的坐标都为100。
代码中的this引用主时间轴,所以this具有graphics属性,通过点语法就能访问graphics属性。同时graphics属性又引用Graphics类的实例,通过点语法就能调用方法。

 如果上面的类似代码很多,需要重复编写this.graphics这样的代码,而且点语法的运算速度也不是很快。因此需要进行优化。
下面代码使用with()函数来简化:
with(this.graphics) {
      lineStyle(1,0xff0000, .75);
      moveTo(0,0);
      lineTo(100,100);
}

  利用with()函数,只需访问一次this.graphics属性,就可以多次调用绘图方法。

 也可以使用自定义函数来简化:

drawLine(this.graphics);
function drawLine(g:Graphics):void
{
     g.lineStyle(1,0xff0000, .75);
     g.moveTo(0,0);
     g.lineTo(100,100);
}
代码中定义了drawLine()函数,它带有数据类型为Graphics的参数,表示此参数是Graphics类的实例,通过实例和点语法就可以调用相应的绘图方法。在调用函数时,只需要把引用Graphics类的实例的属性传递进去。

 上面的代码都是直接在主时间轴上编写的,如果把代码放在自己创建的显示实例中,不要忘记把显示实例添加到舞台中,否则显示实例将不会显示。

 看下面的代码:
  1. var sp:Shape = new Shape();
  2. drawLine(sp.graphics);
  3. function drawLine(g:Graphics):void
  4. {
  5.      with (g)
  6.      {
  7.           lineStyle(1,0xff0000,.75);
  8.           moveTo(0,0);
  9.           lineTo(100,100);
  10.      }
  11. }
复制代码
测试一下代码,舞台中什么也没有,原因很简单,显示实例没有添加到舞台中,所以还需加入下面代码中的this.addChild(sp); 这句。
  1. var sp:Shape = new Shape();
  2. this.addChild(sp);
  3. drawLine(sp.graphics);
  4. function drawLine(g:Graphics):void {
  5.         with (g) {
  6.                 lineStyle(1,0xff0000,.75);
  7.                 moveTo(0,0);
  8.                 lineTo(100,100);
  9.         }
  10. }
复制代码
创建显示类的实例与创建一般类的实例相同,如果要显示实例在舞台中显示出来,需要把显示实例添加到舞台中。那为什么主时间轴上绘制图形不需要添加呢?原因很简单,主时间轴已经放在舞台上了。
 所以在使用实例时,如果显示实例需要显示在舞台中,一定还要忘记把它添加到舞台中。

绘制曲线

 绘制曲线使用curveTo()方法。curveTo()方法有4个参数,controlx,controly,anchorx,anchory。其中controlx和controly是控制点的坐标,anchorx和anchory是终点坐标,起点坐标由moveTo()方法指定。用curveTo最关键的是控制点的确定,控制点相当于所绘曲线起始点和终点切线的交点。

绘制1/4圆弧线:
  1. var sp:Shape = new Shape();
  2. this.addChild(sp);
  3. drawLine(sp.graphics);
  4. function drawLine(g:Graphics):void
  5. {
  6.     with (g)
  7.     {
  8.          lineStyle(1);
  9.          moveTo(0,0);
  10.          curveTo(100,0,100,100);
  11.     }
  12. }
复制代码
corveTo的参数:
   controlX:Number — 一个数字,指定控制点相对于父显示对象注册点的水平位置。  
   controlY:Number — 一个数字,指定控制点相对于父显示对象注册点的垂直位置。  
   anchorX:Number — 一个数字,指定下一个锚点相对于父显示对象注册点的水平位置。  
   anchorY:Number — 一个数字,指定下一个锚点相对于父显示对象注册点的垂直位置。

可看出,绘制的曲线并不准确,如果用 curveTo()绘制1/8圆弧就比较准确。
可看出,两个控制点的分布是有规律的,它们的弧度分别为-p/8和-3p/8,用它们的弧度和三角函数可计算出它们的坐标,终点弧度分别为-2p/8 t和-4p/8,计算坐标也使用三角函数。

代码如下:
  1. var p:Number = Math.PI;
  2. //圆的半径
  3. var radius:Number = 100;
  4. //圆的中心坐标
  5. var cenCoordx:Number = 0;
  6. var cenCoordy:Number = 100;
  7. //控制点到圆心的距离
  8. var controlDis = radius/Math.cos(-p/8);
  9. //画线的起点坐标,从弧度为0处开始绘制
  10. var startx:Number = Math.cos(0)*radius + cenCoordx;
  11. var starty:Number = Math.sin(0)*radius + cenCoordy;
  12. var sp:Shape = new Shape();
  13. this.addChild(sp);
  14. drawLine(sp.graphics);
  15. function drawLine(g:Graphics):void {
  16.         var controlx:Number;
  17.         var controly:Number;
  18.         var endx:Number;
  19.         var endy:Number;
  20.         with (g) {
  21.                 lineStyle(1);
  22.                 moveTo(startx,starty);
  23.                 //通过循环计算控制点坐标
  24.                 for (var r = -p/8; r > -p/2; r -= 2*p/8) {
  25.                         //计算控制点坐标
  26.                         controlx = Math.cos(r) * controlDis + cenCoordx;
  27.                         controly = Math.sin(r) * controlDis + cenCoordy;
  28.                         //计算终点坐标
  29.                         endx = Math.cos(r-p/8) * radius + cenCoordx;
  30.                         endy = Math.sin(r-p/8) * radius + cenCoordy;
  31.                         curveTo(controlx,controly,endx,endy);
  32.                 }
  33.         }
  34. }
复制代码
三角函数见附件:三角学应用

绘制填充图形

 绘制图形比较简单,只要了解绘图方法的参数就可以绘制各种图形。
 下面的代码绘制一个填充矩形:
  1. var sp:Shape = new Shape();
  2. this.addChild(sp);
  3. drawLine(sp.graphics);
  4. function drawLine(g:Graphics):void {
  5.         with (g) {
  6.                 //定义填充样式
  7.                 beginFill(0xff0000,1);
  8.                 //绘制矩形
  9.                 drawRect(0,0,50,100);
  10.                 //结束填充
  11.                 endFill();
  12.         }
  13. }
复制代码
与绘制线条不同,在填充绘图时,填充结束时需调用endFill()方法表示结束填充。除纯色填充外,还可以用渐变填充和位图填充。

位图填充:
  1. var sp:Shape = new Shape();
  2. this.addChild(sp);
  3. drawLine(sp.graphics);
  4. function drawLine(g:Graphics):void {
  5.         with (g) {
  6.                 beginBitmapFill(new Photo(0,0));
  7.                 drawRect(0,0,400,400);


  8.         }
  9. }
复制代码
代码中的Photo是库中位图的链接名。

关于各种参数及渐变填充、各种图形的绘制语句请参看帮助文档。
本帖的地址:http://bbs.jcwcn.com/forum.php?mod=viewthread&tid=269400
跟着教程做一遍,做完的图要到这里评论交作业,教程有看不懂的地方,可以在贴子下面评论

评分

参与人数 1金币 +8 热心度 +2 收起 理由
zctmh0336 + 8 + 2 支持好教程

查看全部评分

发表于 2012-4-11 17:52:40 | 显示全部楼层
酷素材
菜鸟首选 我喜欢
回复 支持 反对

使用道具 举报

发表于 2012-4-24 13:04:28 | 显示全部楼层
不错!!
回复 支持 反对

使用道具 举报

发表于 2012-6-28 12:26:15 | 显示全部楼层
非常实用
回复 支持 反对

使用道具 举报

发表于 2013-9-27 13:50:31 | 显示全部楼层
酷素材
难得一见的给力帖子哈。。。
回复 支持 反对

使用道具 举报

发表于 2018-7-10 11:44:54 | 显示全部楼层
酷素材
很不错。。。
回复 支持 反对

使用道具 举报

发表于 2018-7-10 12:08:23 | 显示全部楼层
楼主是超人
回复 支持 反对

使用道具 举报

发表于 2018-7-10 11:35:30 | 显示全部楼层
好帖就是要顶
回复 支持 反对

使用道具 举报

发表于 2018-7-10 11:25:06 | 显示全部楼层
真心顶。。。。
回复 支持 反对

使用道具 举报

发表于 2018-7-10 11:44:08 | 显示全部楼层
说的非常好
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | [立即注册]

本版积分规则

2345