devbox
程序质量控制师
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

白鹭引擎学习笔记（二）_白鹭graphics.linestyle

作者：程序质量控制师 | 2024-02-01 17:54:05

赞

踩

白鹭graphics.linestyle

  1. 显示对象

    1. 注：在 egret 中建立显示对象和渲染显示对象是两个过程，建立显示对象后，对象会处于内存中，
    2. 但不会参与渲染过程，只有把显示对象放到显示列表后，显示对象才会参与渲染过程，
    3. 如果想将某个显示对象从渲染过程中删除，只需要将其移除显示列表即可
    4.  
    5.  
    6. 1.egret 中所有显示对象均继承于 DisplayObjectContainer
    7.  
    8. 2.直接继承自 DisplayObject 的类都属于非容器
    9. 3.继承自 DisplayObjectContainer 的类都属于容器
    10.  
    11. //自定义显示对象
    12.  
    13. 自定义显示对象类需要继承自 DisplayObject 的具体字类
    14.

     

  2. 显示对象的深度值

    1. //插入元素深度值
    2. 容器.addChildAt(元素,深度值)
    3.  
    4. // 交换深度值
    5. 容器.swapChildrenAt(交换元素的深度值,交换元素的深度值)
    6.  
    7. // 设置子元素深度值并插入
    8.  
    9. 容器.setChildIndex(元素,深度值)

     

  3. 显示容器

    1. 1.DisplayObjectContainer 封装了一些显示列表中的常用功能。包括：
    2.     1.添加删除子对象
    3.     2.访问子对象
    4.     3.检测子对象
    5.     4.设置叠放次序
    6.  
    7. 2.最轻量级的容器 sprite

     

  4. 访问容器中的子对象

    1. 想要获取一个容器的子对象，我们有两种方式可以选择，第一种是通过子对象的深度值来获取子对象，
    2. 第二种是通过子对象的name属性来获取
    3.  
    4. 1.通过深度值获取子对象
    5.     //spr 父容器 , 0，子对象的深度值
    6.     var _spr:egret.DisplayObject = spr.getChildAt(0);
    7.  
    8. 2.通过name
    9.     //要获取 name ,子对象要先有name
    10.     spr1.name = 'coco'
    11.     var _spr:egret.DisplayObject = spr.getChildByName('coco')

     

  5. 遮罩 ：mask

  6. 碰撞检测

    1. //在 egret 中，提供了两种不同的碰撞检测方式
    2.  
    3.  1.根据容器是否重合判断碰撞 hisTestPoint()
    4.  2.根据图形是否相接触判断碰撞 hisTestPoint(, ,true)

     

  7. Egret的事件机制

    1. 事件机制包含4个步骤：注册侦听器，发送事件，侦听事件，移除侦听器。这四个步骤是按照顺序来执行的
    2.  
    3. 事件侦听器：事件侦听器也就是事件的处理者，负责接收事件携带的信息，并在接收到该事件后执行特定的代码
    4.  
    5. // 检测侦听器
    6. if(boy.hasEventListener(DateEvent.DATE)){
    7.     //已注册侦听器
    8. }
    9. // 事件优先级
    10. 事件是可以设置优先级的，这是一个非常方便而且灵活的功能。我们可以通过制定事件的优先级来确保那个事件侦听器会得到提前处理。
    11.  
    12. public addEventListener(type:string, listener:Function, thisObject:any, useCapture:boolean = false, priority:number = 0)
    13. 制定优先级需要设置 priority 属性。该属性为一个number类型，当数字越大，则优先级越大。在触发事件的时候优先级越高。
    14.

     

  8. Egret 矢量绘图

    1. 如果要进行绘图操作，我们需要使用 Graphics 这个类
    2.  
    3. var shp:egret.Shape = new egret.Shape()
    4. //此类用于使用绘图应用程序编程接口 (API) 创建简单形状。Shape 类含有 graphics 属性，通过该属性您可以访问各种矢量绘图方法。
    5. // 填充颜色,这个1是透明度，相当于 alpha 属性
    6. shp.graphics.beginFill(0xff0000,1);
    7. shp.graphics.lineStyle(10,0x00ff00);//边框
    8. shp.graphics.drawRect(0,0,100,100);//绘制矩形
    9. shp.graphics.endFill()//结束填充
    10. this.addChild(shp)
    11.  
    12. //绘制直线（线段）
    13.  
    14. shp.graphics.lineStyle(5,0xff0000)
    15. shp.graphics.moveTo(10,10)//起始点坐标
    16. shp.graphics.lineTo(100,100)//终点坐标，可以设置多个lineto
    17. shp.graphics.lineTo(130,140)//终点坐标，可以设置多个lineto
    18. shp.graphics.endFill()//结束填充
    19.  
    20. //绘制曲线
    21. shp.graphics.lineStyle(5,0xff0000)
    22. shp.graphics.moveTo(10,10)//起始点坐标
    23. shp.graphics.curveTo(100,100,200,50);// 参数介绍如图
    24. shp.graphics.endFill()//结束填充

  9. 文本

     

    在Egret中，我们有三种类型的文本可以选择，分别为“普通文本”，“输入文本”和“位图文本”。 这些不同类型的文本在不同的场景下使用。对于不同类型的文本，其操作方式可能会有所不同。三种类型的文本特点如下：

    普通文本：能够正常的显示各种文本，文本内容可以被程序设置，最为常见的文本类型。

    输入文本：可以被用户输入的文本，常用于登陆中的输入框或者游戏中的聊天窗口。

    位图文本：使用位图文字来渲染的文本，常用于游戏中需要加特殊字体效果的文本。

    1. 在Egret中，我们有三种类型的文本可以选择，分别为“普通文本”，“输入文本”和“位图文本”。 这些不同类型的文本在不同的场景下使用。对于不同类型的文本，其操作方式可能会有所不同。三种类型的文本特点如下：
    2.  
    3. 普通文本：能够正常的显示各种文本，文本内容可以被程序设置，最为常见的文本类型。
    4.  
    5. 输入文本：可以被用户输入的文本，常用于登陆中的输入框或者游戏中的聊天窗口。
    6.  
    7. 位图文本：使用位图文字来渲染的文本，常用于游戏中需要加特殊字体效果的文本。

     

  10. 动画

    1. 用 egret 中 Tween 缓动动画类
    2.  
    3. MovieClip 序列帧动画。简称 mc
    4.

     

  11. 计时器

    1. egret 的 Timer 计时器
    2.  
    3. new egret.Timer(500,2)
    4. 2个属性：delay 间隔时间，repeatCount 执行次数，填0不停执行
    5. 3个方法：start，reset，stop
    6. 2个事件：TimerEvent.TIMER 开始时触发 TimerEVent.TIMER_COMPLETE

     

  12. 位图，纹理

    1. 位图简单理解就是放图片的容器
    2.  
    3. egret.Bitmap()
    1. 控制拉伸方式 ：fillMode,具体参数看文档
    2.  
    3. //纹理集 Texture Merger
    4. 纹理集是将一些零碎的小图放到一张大图当中。游戏中经常使用到纹理集 。
    5. 使用纹理集，我们可以将大量图片拼合为一张图片从而减少网络的请求，原先加载数次的图片资源现在加载一次即可。 (类似于前端的精灵图)
    6.  
    7. 使用方式看文档吧，egret挺乱腾的
    8. http://developer.egret.com/cn/apidoc/index/name/egret.SpriteSheet

     

  13. 资源加载

    1. 资源加载模块 RES模块
    2.  
    3. 三种获取资源的方式：
    4. getRes()
    5.  
    6. getResAsync() <--异步获取
    7.  
    8. getResByUrl() <--网络形式获取资源，不推荐

     

  14. 九宫格的使用

    1. 通过 egret.Rectangle 类实现
    2.  
    3. var img:egret.Bitmap = new egret.Bitmap();
    4. img.texture = RES.getRes('资源')
    5. // 30,四个角的宽，30,四个角的高，40,中间拉伸部位的宽，40,拉伸部位的高
    6. var rect:egret.Rectangle = new egret.Rectangle(30,30,40,40); 
    7. img.scale9Grid = rect

     

  15. 音视频

    1. var video = RES.getRes('fileName')
    2. // 播放
    3. video.play()
    4. // 暂停播放
    5. video.pause()
    6. // 循环播放
    7. // 音视频的循环播放要自己用回调的方法来实现
    8.  
    9. this.video.addEventListener('ended',this.rePlay.bind(this)); <--写在监听对象加载完成函数里
    10.  
    11. private rePlay(){
    12.     this.video.load(); // 先给对象设置加载完成函数，然后就能实现回调了
    13.     this.video.play();
    14. }

     

  16. 网络通信及请求数据格式

    1. Egret 中封装了 XMLHttpRequest 进行异步的数据交互。
    2.  
    3. https://blog.csdn.net/qq_41009893/article/details/105012059?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160093598819724839835635%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=160093598819724839835635&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_v2~rank_v25-1-105012059.pc_search_result_cache&utm_term=egret%E8%AF%B7%E6%B1%82&spm=1018.2118.3001.4187

     

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/54441
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号