Rectangle Collision Detection
Collision detection, to determine whether the display object intersects with a point.
ar isHit:boolean = shp.hitTestPoint( x: number, y:number );shp is the display object to be detected, and (x, y) is the position of the point to be detected. The method returns true if there is a collision, and false if there is no collision.
Pixel Collision Detection
Pixel collision detection is to determine whether the pattern (non-transparent area) of the display object intersects with a point. Also use the hitTestPoint() method.
Compared with rectangle collision detection, a third parameter true is added, indicating that pixel collision detection is to be used.
var isHit:boolean = shp.hitTestPoint( x: number, y:number, true:boolean );Note: Extensive use of pixel collision detection will consume more performance.
Rectangle collision detection is to determine whether the bounding box of the display object intersects with a point; while pixel collision detection is to determine whether the pattern (non-transparent area) of the display object intersects with a point.
normal text
var label:egret.TextField = new egret.TextField();
label.text = "This is a text!";
this.addChild( label );enter text
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);Enter text to get focus
Input text object.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);Set the style of the input text
文本：textIput.inputType=egret.TextFieldInputType.TEXT
密码：textIput.inputType=egret.TextFieldInputType.PASSWORD
Phone number style: 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);bitmap text
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 );
}
}font
textIput.fontFamily="Impact";If the set font does not exist in the browser/app, the browser/app will automatically call the default font instead.
font size
textIput.size=50;//设置textIput文本的字体大小Set the global default text font size
egret.TextField.default_size=70;text color
label.textColor = 0xff0000;Set the global default text color
egret.TextField.default_textColor=0xff0000; text stroke
//文字描边颜色
textIput.strokeColor = 0x0000ff;
//文字描边的宽度
textIput.stroke =2;text alignment
//水平居中
textIput.textAlign = egret.HorizontalAlign.CENTER;//RIGHT,CENTER,LEFT
//垂直居中
textIput.verticalAlign = egret.VerticalAlign.MIDDLE;//BOTTOM,MIDDLE,TOPBold and italic text
The bolding and italics of the text are applicable to the overall egret.TextField object, and a certain text or a piece of text in egret.TextField cannot be set individually
Set the bold attribute to bold
Set the italic property to italic
textIput.bold = true;
textIput.italic = true;custom font
Font files need to be loaded through resources before they can be used.
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);Multiple style text mix
The first JSON way to set styles in sections
//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 );The second: set the style in HTML-like way
Egret also provides this method. The currently supported tags are b and i, and the supported font tag attributes are 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 );text hyperlink event
egret.TextField itself can respond to touch events. But this is for the whole egret.TextField.
Sometimes there is such a demand: in a large piece of text, there is a certain paragraph that needs to be used as a hot area to respond to touch events. It can be achieved by setting href to this paragraph of text, similar to href in html.
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 );Using this function requires setting the textFlow of the text instead of text.
The content of the href attribute starts with event: followed by a string, which is used to output the corresponding text or used to identify the text field containing the link. Then listen to the TextEvent.LINK event, and obtain the string set by the text through the text property of the event object in the event handler.
text open URL
tx.textFlow = new Array<egret.ITextElement>(
{ text:"这段文字有链接", style: { "href" : "http://www.egret.com/" } }
,{ text:"\n这段文字没链接", style: {} }
);
tx.touchEnabled = true;