Egret 2D(6)--碰撞检测和文本

矩形碰撞检测

碰撞检测，判断显示对象是否与一点相交。

ar isHit:boolean = shp.hitTestPoint( x: number, y:number );

shp 是待检测的显示对象，(x, y)是待检测的点的位置。如果发生碰撞，则方法返回 true,如果没有发生碰撞，则返回 false。

像素碰撞检测

像素碰撞检测，是判断显示对象的图案（非透明区域）是否与一点相交。同样使用 hitTestPoint() 方法。

相比于矩形碰撞检测，增加了第三个参数 true ，表示要使用像素碰撞检测。

var isHit:boolean = shp.hitTestPoint( x: number, y:number, true:boolean );

注意:大量使用像素碰撞检测，会消耗更多的性能.

矩形碰撞检测，是判断显示对象的包围盒是否与一点相交；而像素碰撞检测，是判断显示对象的图案（非透明区域）是否与一点相交。

普通文本

var label:egret.TextField = new egret.TextField(); 
label.text = "This is a text!"; 
this.addChild( label );

输入文本

var txInput:egret.TextField = new egret.TextField;
//设置文本类型为输入文本
txInput.type = egret.TextFieldType.INPUT;
txInput.width = 282;
txInput.height = 43;
txInput.text="hello world";
txInput.textColor = 0x000000;
this.addChild(txInput);

输入文本获得焦点

输入文本对象.setFocus();

var textIput:egret.TextField = new egret.TextField();
textIput.type = egret.TextFieldType.INPUT;
this.addChild(textIput);

var button:egret.Shape =  new egret.Shape();
button.graphics.beginFill(0x00cc00);
button.graphics.drawRect(0,0,100,40);
button.graphics.endFill();
button.y = 50;
this.addChild(button);
button.touchEnabled = true;
button.addEventListener(egret.TouchEvent.TOUCH_BEGIN,(e) => {
      textIput.setFocus();
}, this);

设置输入文本的样式

文本：textIput.inputType=egret.TextFieldInputType.TEXT

密码：textIput.inputType=egret.TextFieldInputType.PASSWORD

电话号样式：textIput.inputType=egret.TextFieldInputType.TEL

var textIput:egret.TextField = new egret.TextField();   
//设置为输入文本  
textIput.type = egret.TextFieldType.INPUT;
//设置输入文本的样式：TEXT,PASSWORD,TEL
textIput.inputType=egret.TextFieldInputType.TEL;
textIput.text="hello world";
textIput.width=300;
textIput.height=100;
textIput.textColor=0xffffff;
this.addChild(textIput);

位图文本

class Main extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.once( egret.Event.ADDED_TO_STAGE, this.onAddToStage, this );
    }
    private onAddToStage( evt:egret.Event ) {
        RES.getResByUrl( "resource/cartoon-font.fnt", this.onLoadComplete, this, RES.ResourceItem.TYPE_FONT );
    }
    private _bitmapText:egret.BitmapText;
    private onLoadComplete( font:egret.BitmapFont ):void {
        this._bitmapText = new egret.BitmapText();
        this._bitmapText.font = font;
        this._bitmapText.x = 50;
        this._bitmapText.y = 300;
        this.addChild( this._bitmapText );
    }
}

字体

textIput.fontFamily="Impact";

如果设置的字体在浏览器/app中不存在，浏览器/app会自动调用默认字体来代替。

扫描二维码关注公众号，回复： 19668 查看本文章

字号

textIput.size=50;//设置textIput文本的字体大小

设置全局的默认文本字号大小

egret.TextField.default_size=70;

文字颜色

label.textColor = 0xff0000;

设置全局默认文字颜色

egret.TextField.default_textColor=0xff0000;  

文字描边

//文字描边颜色
textIput.strokeColor = 0x0000ff;
//文字描边的宽度
textIput.stroke =2;

文字的对齐方式

//水平居中
textIput.textAlign = egret.HorizontalAlign.CENTER;//RIGHT,CENTER,LEFT
//垂直居中
textIput.verticalAlign = egret.VerticalAlign.MIDDLE;//BOTTOM,MIDDLE,TOP

文字加粗和斜体

文本的加粗和斜体适用与整体 egret.TextField 对象，不能单独设置 egret.TextField 中某一个文字或一段文字

设置加粗的属性为 bold

设置斜体的属性为 italic

textIput.bold = true;
textIput.italic = true;

自定义字体

字体文件需要通过资源加载后才可以使用。

egret.registerFontMapping("font1", "fonts/font1.ttf");
egret.registerFontMapping("font2", "fonts/font2.otf");
egret.registerFontMapping("font3", "fonts/font3.TTF");
let label1 = new egret.TextField();
label1.text = "默认字体";
this.addChild(label1);
let label2 = new egret.TextField();
label2.text = "font1";
label2.fontFamily = "font1";
label2.y = 100;
this.addChild(label2);
let label3 = new egret.TextField();
label3.text = "font2";
label3.fontFamily = "font2";
label3.y = 300;
this.addChild(label3);
let label4 = new egret.TextField();
label4.text = "font3";
label4.fontFamily = "font3";
label4.y = 400;
this.addChild(label4);

多种样式文本混合

第一种JSON方式分段设置样式

//JSON方式分段设置样式       
        var tx:egret.TextField = new egret.TextField;
        tx.width = 400;
        tx.x = 10;
        tx.y = 10;
        tx.textColor = 0;
        tx.size = 20;
        tx.fontFamily = "微软雅黑";
        tx.textAlign = egret.HorizontalAlign.CENTER;
        tx.textFlow = <Array<egret.ITextElement>>[
            {text: "Text in ", style: {"size": 20}}
            , {text: "Egret", style: {"textColor": 0x336699, "size": 60, "strokeColor": 0x6699cc, "stroke": 2}}
            , {text: " can ", style: {"fontFamily": "Impact"}}
            , {text: "be set ", style: {"fontFamily": "Times New Roman"}}
            , {text: "to a ", style: {"textColor": 0xff0000}}
            , {text: "\n"}//换行
            , {text: "variety ", style: {"textColor": 0x00ff00}}
            , {text: "of ", style: {"textColor": 0xf000f0}}
            , {text: "styles ", style: {"textColor": 0x00ffff}}
            , {text: "with", style: {"size": 56}}
            , {text: "different ", style: {"size": 16}}
            , {text: "colors, ", style: {"size": 26}}
            , {text: "\n"}
            , {text: "fonts ", style: {"italic": true, "textColor": 0x00ff00}}
            , {text: "and ", style: {"size": 26, "textColor": 0xf000f0,fontfamily:"Quaver"}}
            , {text: "sizes", style: {"italic": true, "textColor": 0xf06f00}}
        ];
        this.addChild( tx );

第二种:类HTML方式设置样式

Egret也提供了这种方式，目前支持的标签有b和i，支持的font标签属性有color、size、face

 var tx:egret.TextField = new egret.TextField;
        tx.textFlow = (new egret.HtmlTextParser).parser(
            '<font size=20>Text in </font>'
            + '<font color=0x336699 size=60 strokecolor=0x6699cc stroke=2>Egret</font>'
            + '<font fontfamily="Impact"> can </font>' 
            + '<font fontfamily="Times New Roman "><u>be set </u></font>' 
            + '<font color=0xff0000>to a </font>' 
            + '<font> \n </font>'
            + '<font color=0x00ff00>variety </font>' 
            + '<font color=0xf000f0>of </font>' 
            + '<font color=0x00ffff>styles </font>'  
            + '<font size=56>with </font>' 
            + '<font size=16>different </font>' 
            + '<font size=26>colors, </font>' 
            + '<font> \n </font>'
            + '<font color=0x00ff00><i>fonts </i></font>' 
            + '<font size=26 color=0xf000f0 fontfamily="Quaver">and </font>' 
            + '<font color=0xf06f00><i>sizes</i></font>'
        );
        tx.x = 10;
        tx.y = 90;
        this.addChild( tx );

文本超链接事件

egret.TextField 本身可以响应Touch事件。但这是针对整个egret.TextField的。

有时有这样的需求：在一大段文字中，有某一段需要作为热区，响应Touch事件。可以通过对该段文字设置 href 来实现，类似于html中的 href。

var tx:egret.TextField = new egret.TextField;
        tx.textFlow = new Array<egret.ITextElement>(
            { text:"This is a hyperlink", style: { "href" : "event:text event triggered" } }
            ,{ text:"\n This is just a text", style: {} }
        );
        tx.touchEnabled = true;
        tx.addEventListener( egret.TextEvent.LINK, function( evt:egret.TextEvent ){
            console.log( evt.text );
        }, this );
        tx.x = 10;
        tx.y = 90;
        this.addChild( tx );

使用该功能需要设置文本的 textFlow 而非 text。

其中 href 属性的内容以 event: 开头，后边跟随一个字符串，用于输出相应的文字或用于识别包含该链接的文字段。然后侦听 TextEvent.LINK 事件，在事件处理函数中通过事件对象的 text 属性来获取该段文字所设置的字符串。

文本打开URL

tx.textFlow = new Array<egret.ITextElement>(
    { text:"这段文字有链接", style: { "href" : "http://www.egret.com/" } }
    ,{ text:"\n这段文字没链接", style: {} }
);
tx.touchEnabled = true;