HTML5游戏引擎(八)-矢量绘图——绘制矩形-drawRect 绘制圆形-drawCircle 绘制直线-moveTo和 lineTo
HTML5游戏引擎(八)-矢量绘图——绘制矩形-drawRect & 绘制圆形-drawCircle & 绘制直线-moveTo和 lineTo
矢量绘图
Egret中封装了 Graphics
类实现矢量绘图功能,可以绘制矩形、圆形、直线、曲线、圆弧等。下面介绍了矢量绘图功能的基本用法和若干高级用法。
绘制矩形
Graphics
类中封装的绘图方法不能直接使用,而需要在显示对象中使用。一些显示对象(如 Shape
和 Sprite
)中已经包含了绘图方法,因此可以在显示对象中直接调用这些方法进行绘图。
下面代码以 Shape
对象为例,绘制矩形的:
class GraphicsTest extends egret.DisplayObjectContainer
{public constructor(){super();this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);}private onAddToStage(event:egret.Event){//绘制矩形var shp:egret.Shape = new egret.Shape();shp.graphics.beginFill( 0xff0000, 1);shp.graphics.drawRect( 0, 0, 100, 200 );shp.graphics.endFill();this.addChild( shp );}
}
调用 beginFill()
方法设置矩形的填充颜色,这里将填充颜色设置为红色(颜色值0xff0000),同时将alpha
设置为1,表示完全不透明。
调用 drawRect()
方法设置矩形的位置和大小,前两个参数分别为矩形左上角的X、Y轴坐标(相对于 shp
的锚点计算),后两个参数分别为矩形的宽和高,这里在 (0, 0) 点绘制了一个 100*200 的矩形。
调用 endFill()
方法结束当前绘制操作。
绘制圆形
绘制圆形的方法与绘制矩形类似,只需将 drawRect()
方法改为 drawCircle()
方法。
drawCircle( x:number, y:number, radius:number): void
drawCircle()
方法接受三个参数,第一个参数为圆心的X轴坐标,第二个参数为圆心的Y轴坐标,第三个参数为半径。
注意:圆心的X轴和Y轴位置是相对于
Shape
对象的锚点计算的.
下面代码示例绘制了一个半径为50像素的圆形:
class GraphicsTest extends egret.DisplayObjectContainer
{public constructor(){super();this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);}private onAddToStage(event:egret.Event){//绘制圆形var shp:egret.Shape = new egret.Shape();shp.x = 100;shp.y = 100;shp.graphics.lineStyle( 10, 0x00ff00 );shp.graphics.beginFill( 0xff0000, 1);shp.graphics.drawCircle( 0, 0, 50 );shp.graphics.endFill();this.addChild( shp );}
}
绘制直线
使用Graphics绘制直线需要使用两个方法: moveTo()
和 lineTo()
,它们输入参数是一对坐标值。moveTo()
负责绘制直线的起始点,lineTo()
负责绘制直线的终点。
moveTo( x:number, y:number): void
lineTo( x:number, y:number): void
在绘图直线前,需要先制定线条的样式,设置 lineStyle()
方法:
shp.graphics.lineStyle( 2, 0x00ff00 );
然后使用 moveTo()
来设定线条的起始点,使用 lineTo()
来设定线条的终点。完整代码如下:
class GraphicsTest extends egret.DisplayObjectContainer
{public constructor(){super();this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);}private onAddToStage(event:egret.Event){//绘制直线var shp:egret.Shape = new egret.Shape();shp.graphics.lineStyle( 2, 0x00ff00 );shp.graphics.moveTo( 10,10 );shp.graphics.lineTo( 100, 20 );shp.graphics.endFill();this.addChild( shp );}
}
也可以连续绘制多条首尾相接的直线,形成一条折线,代码如下:
var shp:egret.Shape = new egret.Shape();
shp.graphics.lineStyle( 2, 0x00ff00 );
shp.graphics.moveTo( 68, 84 );
shp.graphics.lineTo( 167, 76 );
shp.graphics.lineTo( 221, 118 );
shp.graphics.lineTo( 290, 162 );
shp.graphics.lineTo( 297, 228 );
shp.graphics.lineTo( 412, 250 );
shp.graphics.lineTo( 443, 174 );
shp.graphics.endFill();
this.addChild( shp );
绘制折线时,无需多次使用
moveTo()
方法,连续使用lineTo()
方法即可。
HTML5游戏引擎(八)-矢量绘图——绘制矩形-drawRect 绘制圆形-drawCircle 绘制直线-moveTo和 lineTo相关推荐
- HTML5游戏引擎(二)02-egret引擎之hello world——快速上手-清理项目 程序入口 绘制单色背景 调整屏幕的适配模式 添加文字 响应用户操作-让文字变色
HTML5游戏引擎(二)02-egret引擎之hello world--快速上手-清理项目 & 程序入口 & 绘制单色背景 & 调整屏幕的适配模式 & 添加文字 &am ...
- HTML5游戏引擎Egret发布2.0版 开发工具亦获更新
5月22日在北京国际会议中心举办的HTML5游戏生态大会上,白鹭时代旗下游戏引擎Egret Engine发布2.0版,同时还发布了Flash转换HTML5工具Egret Conversion.HTML ...
- HTML5游戏引擎lufylegend深入浅出 - 引擎介绍原理
又很久没有更新博客了,在这段时间里发生的事还蛮多的,回想起来才发现时间过得好快啊.至于博客嘛,天天都会关注,一来想看看大家是否写了一些评论,二来想看看大神们(如lufy,浅墨,雾央,Himi等)有没有 ...
- HTML5游戏引擎深度测评
https://zhuanlan.zhihu.com/p/20768495 最近看到网上一篇文章,标题叫做<2016年 最火的 15 款 HTML5 游戏引擎>.目前针对HTML5游戏的解 ...
- html5游戏引擎-Pharse.js学习笔记(一)
2019独角兽企业重金招聘Python工程师标准>>> 1.前言 前几天随着flappy bird这样的小游戏的火爆,使我这种也曾了解过html5技术的js业余爱好者也开始关注游戏开 ...
- HTML5游戏引擎Playcraft将于近日正式启动
HTML5游戏引擎Playcraft将于近日正式启动,该引擎5月时就已经发布了测试版,经过2个月的测试后,将于近日正式上线.创始人兼首席执行官马丁·韦尔斯介绍说,playcraft是一个为游戏设计者提 ...
- UC将发布高性能HTML5游戏引擎X-Canvas
近日,UC优视公司在北京举行了UC九游游戏平台战略发布会.在发布会上,UC九游宣布,即将发布HTML5游戏引擎X-Canvas,此引擎将致 力于提升手机HTML5游戏的用户体验,解决开发者在此前HTM ...
- QQ空间玩吧HTML5游戏引擎使用比例分析
GameLook报道/"Cocos 2015开发者大会(春季)"于4月2日在国家会议中心圆满落下帷幕.在会上全新的3D编辑器,Cocos Runtime等产品重磅公布,给业界带来了 ...
- 5款常用的html5游戏引擎以及优缺点分析
如果您是游戏开发人员,并且正在寻找JavaScript和html5无缝协作的游戏引擎. 虽然市场上有很多免费和付费的游戏引擎,但一款让专业游戏开发者满意的游戏引擎,必须包含独特的东西,所以游戏开发者对 ...
- HTML5游戏引擎(十五)-时间控制——Timer计时器 Ticker心跳-startTick-stopTick 帧事件-ENTER_FRAME
HTML5游戏引擎(十五)-时间控制--Timer计时器 & Ticker心跳-startTick-stopTick & 帧事件-ENTER_FRAME 时间控制 Timer计时器 假 ...
最新文章
- WEB SSH Ajaxterm客户端配置(1)
- 面试官:谈一下你对DDD的理解?我:马什么梅?
- Nginx教程--02.Nginx虚拟主机的配置
- java singleton 多线程_Java创建线程安全的单例singleton
- STM32之定时器中断控制LED闪烁
- Maven多个mudule只编译、打包指定module
- 一个拼凑sql,输出变量的 存储过程
- performSelector:withObject:afterDelay: 的用法
- 一个景点的给input域一个默认值,然后在聚焦的时候清空它 jquery方法
- katakana.php,片假名 平假名转换器 - Hi!Penpal!
- mac安装mysql8.0
- 操作系统课后答案第六章
- 如何使用视频剪辑软件将qsv格式视频转换为MP4格式
- POI设置导出的EXCEL锁定指定的单元格
- 公司邮箱怎么申请注册?如何登录公司邮箱?
- Django项目中常用的配置与官方文档
- xp系统远程桌面关闭计算机,系统是xp在本机开启远程桌面后,别人使用远程桌面连接我的电脑,我的电脑就会出现蓝屏停止代码是0x0000007f...
- 为何需要代码签名证书? 有了代码签名有什么不同?
- 官宣:教父级讲师李明加入尚硅谷
- php需要做临时表嘛,php中使用临时表查询数据的一个例子