目录
1.获取屏幕宽高
let stageW = this.stage.stageWidth;
let stageH = this.stage.stageHeight;2.写字
//写字Hello Egret 匿名内部类点击
let colorLabel = new egret.TextField();
colorLabel.textColor = 0xffffff;
colorLabel.width = stageW - 172;
colorLabel.textAlign = "center";
colorLabel.text = "Hello Egret";
colorLabel.size = 24;
colorLabel.x = 172;
colorLabel.y = 80;
this.addChild(colorLabel);
colorLabel.touchEnabled = true;
colorLabel.addEventListener(egret.TouchEvent.TOUCH_TAP,
function( evt:egret.TouchEvent ):void{
colorLabel.textColor = 0x00ffaa;
},this);
colorLabel.addEventListener(egret.TouchEvent.TOUCH_TAP,this.onTxClick,this);3.按钮
let button = new eui.Button();//使用库中的控件
button.label = "Click!";//按钮显示的字
button.horizontalCenter = 0;
button.verticalCenter = 0;
this.addChild(button);
//外部方法的点击事件
button.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onButtonClick, this);4.自定义绘图
自定义显示对象类需要继承自 DisplayObject的具体子类
class MyGrid extends egret.Shape {
public constructor(){
super();
this.drawGrid();
}
private drawGrid(){
this.graphics.beginFill( 0x0000ff );
this.graphics.drawRect( 0, 0, 50,50 );
this.graphics.endFill();
this.graphics.beginFill( 0x0000ff );
this.graphics.drawRect( 50, 50, 50, 50);
this.graphics.endFill();
this.graphics.beginFill( 0xff0000 );
this.graphics.drawRect( 50, 0, 50,50 );
this.graphics.endFill();
this.graphics.beginFill( 0xff0000 );
this.graphics.drawRect( 0, 50, 50,50 );
this.graphics.endFill();
}
}显示：
var _myGrid:MyGrid = new MyGrid();
_myGrid.x=200;
_myGrid.rotation=30;
this.addChild( _myGrid);5.自定义场景
//egret.DisplayObjectContainer
class AnchorTest 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( 0x00ff00);
shp.graphics.drawRect( 0, 0, 100, 100 );
shp.graphics.endFill();
shp.x = 100;
shp.y = 100;
this.addChild( shp );
}
}显示：
//显示自定义场景2
var _anchorTest:AnchorTest = new AnchorTest();
_anchorTest.x=200;
_anchorTest.y=200;
this.addChild( _anchorTest);6.ui弹窗
private onButtonClick(e: egret.TouchEvent) {
let panel = new eui.Panel();
panel.title = "我是个弹窗";
panel.horizontalCenter = 0;
panel.verticalCenter = 0;
this.addChild(panel);
}7.拿到点击的target控件
private onTxClick(e: egret.TouchEvent ):void{
var tx=egret.TextField=e.currentTarget; //拿到
tx.textColor = 0x00ffaa;
}8.层级切换
private change():void{
//显示按钮的当前层级
//层级从0开始，一个物体一个层级
//某一容器内的显示列表的深度最大值是显示列表长度-1
console.log('按钮的当前层级:'+this.getChildIndex(物体));
//切换层级
this.setChildIndex(物体, this.getChildIndex(物体));
//交换层级
this.swapChildren(物体, 物体);
}9.播放音乐
private channel:egret.SoundChannel=null;
private playMusic(){
var sound:egret.Sound = RES.getRes( "bgm_mp3" );
//第一个参数表示播放的开始时间，第二个参数表示播放次数
//如果将第二个参数设置为负数将循环播放。该方法返回了一个 SoundChannel 对象。
//通过操作channnel对象可以控制声音(音量大小)(停止播放)
var channel:egret.SoundChannel = sound.play(0,1);
channel.volume=3;
return channel;
}//拿到播放器
this.channel=this.playMusic();
//停止
if(this.channel!=null){
this.channel.stop();
}10.网络交互
//测试接口:每个微信小程序需要事先设置一个通讯域名，小程序只可以跟指定的域名与进行网络通信
//https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html
private textApi(){
var urlreq:egret.HttpRequest = new egret.HttpRequest();
urlreq.open("https://httpbin.org/get",egret.HttpMethod.GET);
urlreq.send();
//完成的监听
urlreq.addEventListener(egret.Event.COMPLETE,(successResult=>{
var request = <egret.HttpRequest>successResult.currentTarget;
egret.log("get data : ",request.response);
}),this);
//失败的监听
urlreq.addEventListener(egret.IOErrorEvent.IO_ERROR,errorResult=>{
egret.log("get error : " + errorResult);
},this);
//进度监听
urlreq.addEventListener(egret.ProgressEvent.PROGRESS,progressResult=>{
egret.log("get progress : " + Math.floor(100*progressResult.bytesLoaded/progressResult.bytesTotal) + "%");
},this);
}11.Tween动画
private time:number=-1;
private textTween():void{
//设置锚点
// 物体.anchorOffsetX = 30;
// 物体.anchorOffsetY = 40;
// 物体.x += 30;
// 物体.y += 40;
//先创建2个物体，互相盖住-切换层级
let img1: egret.Bitmap = this.createBitmapByName("currentmoney_png");
this.addChild(img1);
img1.x = 30;
img1.y = 233;
let img2: egret.Bitmap = this.createBitmapByName("egret_icon_png");
this.addChild(img2);
img2.x = 40;
img2.y = 233;
//舞台的点击事件
this.stage.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
switch(++this.time%3){
case 0:
//互换img:直接设置目标X坐标为对方的当前X坐标
//to方法包含三个参数。 首先是动画目标属性组，这个参数可以对目标对象本身的各项
//属性进行设定，就是动画结束时的状态，可以设定一个或多个属性。
//第二个参数是动画时间，以毫秒计。
//第三个参数是补间方程，即对动画区间内每个时间点的属性值设定分布。
//在egret.Ease已经提供了丰富的补间方程，可以根据自己的喜好选择
egret.Tween.get( img1 ).to( { x:img2.x }, 300, egret.Ease.circIn );
egret.Tween.get( img2 ).to( { x:img1.x }, 300, egret.Ease.circIn );
break;
//连续渐变特效 alpha:->1 ->0.3 ->1
case 1:
egret.Tween.get( img1 ).to( { alpha:.3 }, 300, egret.Ease.circIn )
.to( { alpha:1 }, 300, egret.Ease.circIn );
break;
//scaleX And scaleY:->1 ->0.4 ->1
case 2:
egret.Tween.get( img2 )
.to( { scaleX:.4, scaleY:.4 }, 500, egret.Ease.circIn )
.to( { scaleX:1, scaleY:1 }, 500, egret.Ease.circIn );
break;
}
},this);
}12.在Sprite中创建圆
private ctratCircleInSprite(){
//创建一个空的 Sprite，把它的 x 和 y 坐标都改为
var mySprite: egret.Sprite = new egret.Sprite();
mySprite.x = 200;
mySprite.y = 200;
this.addChild(mySprite);
//画一个正方形，添加到 mySprite 中
var circle: egret.Shape = new egret.Shape();
circle.graphics.beginFill(0x00ffaa);
circle.graphics.drawRect(0,0,200,200);
circle.graphics.endFill();
mySprite.addChild(circle);
//画一个红色的圆，添加到 mySprite 中
var circle: egret.Shape = new egret.Shape();
circle.graphics.beginFill(0xff0000);
circle.graphics.drawCircle(25,25,25);
circle.graphics.endFill();
mySprite.addChild(circle);
//给圆增加点击事件
circle.touchEnabled = true;
circle.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
console.log('点击了圆形');
},this);
}
13.球随手动
//设定2个偏移量
private offsetX:number;
private offsetY:number;
private draggedObject:egret.Shape;
//球跟随手指移动
private circleMoveFollowHand(){
//画一个红色的圆
var circle: egret.Shape = new egret.Shape();
circle.graphics.beginFill(0xff0000);
circle.graphics.drawCircle(25,25,25);
circle.graphics.endFill();
this.addChild(circle);
//画一个红色的圆
var circle2: egret.Shape = new egret.Shape();
circle2.graphics.beginFill(0x00ffaa);
circle2.graphics.drawCircle(100,100,25);
circle2.graphics.endFill();
this.addChild(circle2);
//圆1手指按到屏幕 离开屏幕 触发
circle.touchEnabled = true;
circle.addEventListener(egret.TouchEvent.TOUCH_BEGIN,this.startMove,this);
circle.addEventListener(egret.TouchEvent.TOUCH_END,this.stopMove,this);
//圆2手指按到屏幕 离开屏幕 触发
circle2.touchEnabled = true;
circle2.addEventListener(egret.TouchEvent.TOUCH_BEGIN,this.startMove,this);
circle.addEventListener(egret.TouchEvent.TOUCH_END,this.stopMove,this);
}
//开始移动的监听 -> 将触碰对象作为顶层对象 实时拿到触碰对象 实时记录移动的偏移值
private startMove(e:egret.TouchEvent):void{
//拿到触碰对象
this.draggedObject = e.currentTarget;
//计算手指和要拖动的对象的距离 e.stage为触屏的X坐标
this.offsetX = e.stageX - this.draggedObject.x;
this.offsetY = e.stageY - this.draggedObject.y;
//把触摸的对象放在显示列表的顶层
this.addChild(this.draggedObject);
//手指在屏幕上移动，会触发 onMove 方法
this.stage.addEventListener(egret.TouchEvent.TOUCH_MOVE,this.onMove,this);
}
//手指离开屏幕，移除手指移动的监听
private stopMove(e:egret.TouchEvent) {
this.stage.removeEventListener(egret.TouchEvent.TOUCH_MOVE,this.onMove,this);
}
//手指移动的监听
private onMove(e:egret.TouchEvent):void{
//通过计算手指在屏幕上的位置，计算当前对象的坐标，达到跟随手指移动的效果
this.draggedObject.x = e.stageX - this.offsetX;
this.draggedObject.y = e.stageY - this.offsetY;
}14.展示局部控件内容
//局部显示 + 滚动查看
//scrollRect 属性定义显示对象的可查看区域
//更改 scrollRect 属性，可以使内容左右平移或上下滚动
//scrollRect 属性是 Rectangle 类的实例
private seeSomeLayout(){
//多文字：启用位图缓存后都可以提高程序运行的流畅性 而不是重绘文字
//创建一个文本框,设定一个scrollRect限制显示范围
//cacheAsBitmap将显示对象的内容缓存为位图-每次滚动显示对象时，
//就不必重绘显示对象的整个内容，而只需改用缓存的位图即可将所需部分直接呈示到屏幕上
var bigText: egret.TextField = new egret.TextField();
bigText.text = "平移和滚动显示对象,平移和滚动显示对象";
bigText.scrollRect = new egret.Rectangle(0, 0, 200, 50); //核心1:展示区域
bigText.cacheAsBitmap = true;
this.addChild(bigText);
//创建一个按钮,点击后控制文本内容向左移动
var btnLeft: egret.Shape = new egret.Shape();
btnLeft.graphics.beginFill(0xcccc01);
btnLeft.graphics.drawRect(0, 0, 50, 50);
btnLeft.graphics.endFill();
btnLeft.x = 50;
btnLeft.y = 100;
this.addChild(btnLeft);
btnLeft.touchEnabled = true;
btnLeft.addEventListener(egret.TouchEvent.TOUCH_TAP, onScroll, this);
//创建一个按钮,点击后控制文本内容向右移动
var btnRight: egret.Shape = new egret.Shape();
btnRight.graphics.beginFill(0x01cccc);
btnRight.graphics.drawRect(0,0,50,50);
btnRight.graphics.endFill();
btnRight.x = 150;
btnRight.y = 100;
this.addChild(btnRight);
btnRight.touchEnabled = true;
btnRight.addEventListener(egret.TouchEvent.TOUCH_TAP, onScroll, this);
//点击按钮后,控制文本向左右移动的方法
function onScroll(e: egret.TouchEvent): void {
var rect: egret.Rectangle = bigText.scrollRect;//核心2:展示区域位移
switch (e.currentTarget) {
case btnLeft:
rect.x += 20; //+是内容左移
break;
case btnRight:
rect.x -= 20;
break;
}
bigText.scrollRect = rect; //核心3:展示区域位移
}
}15.从default.res.json中取资源
private createBitmapByName(name: string): egret.Bitmap {
let result = new egret.Bitmap();
let texture: egret.Texture = RES.getRes(name);
//同步获取资源 这种方式只能获取已经缓存过的资源，例如之前调用过loadGroup()被预加载的资源。
result.texture = texture;
return result;
}16.遮罩效果---只显示遮罩形状的内容
private showUpShapeLayout(){
//画一个红色的正方形
var square:egret.Shape = new egret.Shape();
square.graphics.beginFill(0xff0000);
square.graphics.drawRect(0,0,100,100);
square.graphics.endFill();
this.addChild(square);
//画一个蓝色的圆形
var circle:egret.Shape = new egret.Shape();
circle.graphics.beginFill(0x0000ff);
circle.graphics.drawCircle(25,25,25);
circle.graphics.endFill();
this.addChild(circle);
//圆形不会显示，但是圆形的形状就是正方形所局部显示的形状
square.mask = circle;
}17.显示和删除层级
private showAndHideImg(){
var spr:egret.Sprite = new egret.Sprite();
spr.graphics.beginFill( 0x00ff00 );
spr.graphics.drawRect(0, 0, 100, 100);
spr.graphics.endFill();
//show
this.addChild(spr);
//hide -> 该对象并非在内存中被销毁。我们只是不让显示对象参与渲染而已
this.removeChild(spr);
}18.演示层级插队
private insertToPosition(){
//创建小容器
var sprcon:egret.Sprite = new egret.Sprite();
this.addChild( sprcon );
sprcon.x = 10;
//放入4个Rect
for(var i:number = 0; i<4; i++)
{
var spr:egret.Sprite = new egret.Sprite();
spr.graphics.beginFill( 0xffffff * Math.random() );
spr.graphics.drawRect( 0, 0, 100, 100);
spr.graphics.endFill();
spr.x = i*20;
sprcon.addChild( spr );
}
var sprNew:egret.Sprite = new egret.Sprite();
sprNew.graphics.beginFill( 0xff0000 );
sprNew.graphics.drawRect( 0, 0, 300, 150 );
sprNew.graphics.endFill();
sprNew.x = 10;
sprNew.y = 50;
//将新创建的物体放置到第二位
sprcon.addChildAt(sprNew, 1);
//删除所有 拿到个数-通过index删除 (牛逼:每次移除首个位置的物体)
// var numChild:number = sprcon.numChildren;
// for(var t:number = 0; t<numChild; t++){
// sprcon.removeChildAt(0);
// }
//一次性的删除
sprcon.removeChildren();
console.log('删除后的个数:'+sprcon.numChildren);
}19.测试冒泡点击事件监听
var _text:TouchEventTest=new TouchEventTest();
this.addChild(_text);
class TouchEventTest extends egret.DisplayObjectContainer{
//绘制文本
private txt:egret.TextField;
public constructor(){
super();
this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
}
private onAddToStage(event:egret.Event){
//添加显示文本
this.drawText();
//绘制一个透明度为1的绿色矩形，宽高为100*80
var spr1:egret.Sprite = new egret.Sprite();
spr1.graphics.beginFill(0x00ff00, 1);
spr1.graphics.drawRect(0, 0, 100, 80);
spr1.graphics.endFill();
spr1.width = 100;
spr1.height = 80;
this.addChild( spr1 );
//设置显示对象可以相应触摸事件
spr1.touchEnabled = true;
//注册事件
spr1.addEventListener( egret.TouchEvent.TOUCH_TAP, this.onTouch, this );
this.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onTouchTap, this);
this.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onTouchTaps, this, true);
}
//容器 ->物体 ->冒泡点击
private onTouch( evt:egret.TouchEvent ){
this.txt.text += "\n点击了spr1";
}
private onTouchTap( evt:egret.TouchEvent ){
this.txt.text += "\n容器冒泡侦听\n---------";
}
private onTouchTaps( evt:egret.TouchEvent ){
this.txt.text += "\n容器捕获侦听";
}
private drawText():void{
this.txt = new egret.TextField();
this.txt.size = 12;
this.txt.x = 250;
this.txt.width = 200;
this.txt.height = 200;
this.txt.text = "事件文字";
this.addChild( this.txt );
}
}20.容器-控件知识
DisplayObject 显示对象基类，所有显示对象均继承自此类 (顶级类)
DisplayObjectContainer 显示对象容器接口，所有显示对象容器均实现此接口
Sprite 轻量级显示容器（继承DisplayObjectContainer。
同时添加了一个Graphics绘制功能。）
Stage 舞台类
Bitmap 位图，用来显示图片
Shape 用来显示矢量图，可以使用其中的方法绘制矢量图形
TextField 文本类
TextInput 输入文本类21.基本概念
1.最左上角的点为物体的坐标x-y ------>锚点
2.scale缩放是想坐标x,y为起点运动的
3.旋转是从坐标往右延申为旋转起始边,顺时针转动22.对象常用可视属性
物体.x = 100;
物体.y = 20;
物体.scaleX = 0.5; 0-1值范围
物体.scaleY = 0.5;
物体.alpha = 0.4;
物体.rotation = 30;
width：宽度
height：高度
skewX：横向斜切
skewY：纵向斜切
visible：是否可见23.2方式控制物体的大小：改变x值或者scaleX
缩放：(这意味着对象内容将经过伸展或挤压以适合新区域的大小。如果显示对象仅包含矢量形状，
将
例如，缩放图形时，如果数码照片的宽度和高度增加后超出图像中像素信息的实际大小，
数码照片将被像素化，使数码照片显示带有锯齿。24.色彩混合模式：
参考:http://edn.egret.com/cn/docs/page/586
//1.用于指定混合图像的像素值覆盖基本图像的像素值 ->上层物体颜色覆盖下层物体颜色
mySprite.blendMode = egret.BlendMode.NORMAL;
mySprite.blendMode = "normal";
//2.通常用于创建两个图像之间的动画变亮模糊效果。 ->颜色变量
mySprite.blendMode = egret.BlendMode.ADD;
mySprite.blendMode = "add";
//3.根据显示对象的 Alpha 值擦除背景。 ->Alpha 值不为0的区域将被擦除。
mySprite.blendMode = egret.BlendMode.ERASE;
mySprite.blendMode = "erase";25.碰撞测试
class HitTest extends egret.DisplayObjectContainer
{
public constructor()
{
super();
this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
}
private infoText:egret.TextField;
private onAddToStage(event:egret.Event)
{
//先画文字
this.drawText();
//绘制矩形
var shp:egret.Shape = new egret.Shape();
shp.graphics.beginFill( 0xff0000 );
shp.graphics.drawRect( 0,0,100,100);
shp.graphics.endFill();
shp.width = 100;
shp.height = 100;
this.addChild(shp);
//画圆 drawCircle :圆心 x y 半径
shp.graphics.beginFill( 0xff0000 );
shp.graphics.drawCircle( 0, 0, 20);
shp.graphics.endFill();
shp.width = 100;
shp.height = 100;
this.addChild( shp );
//非精准:检测的对象是当前 shp 是否与坐标为（10, 10）的点发生了碰撞
var isHit:boolean = shp.hitTestPoint( 10, 10 );
//精确:检测图像是否与一个点发生了碰撞
// var isHit:boolean = shp.hitTestPoint( 10, 10, true );
this.infoText.text = "碰撞结果" + isHit;
}
private drawText()
{
this.infoText = new egret.TextField();
this.infoText.y = 200;
this.infoText.text = "碰撞结果";
this.addChild( this.infoText );
}
}
658
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
