Class ElementComponent_EX

Hierarchy

  • ElementComponent
    • ElementComponent_EX

Constructors

Properties

Accessors

Events

Methods

Constructors

  • Create a new ElementComponent instance.

    Parameters

    • system: ElementComponentSystem

      The ComponentSystem that created this Component.

    • entity: Entity

      The Entity that this Component is attached to.

    Returns ElementComponent_EX

Properties

_addedModels: any[]
_anchor: Vec4
_anchorDirty: boolean
_anchorTransform: Mat4
_batchGroup: any
_batchGroupId: number
_beingInitialized: boolean
_calculatedCorners: [Vec3, Vec3, Vec3, Vec3]
_calculatedHeight: number
_calculatedWidth: number
_canvasCorners: Vec2[]
_canvasCornersDirty: boolean
_cornersDirty: boolean
_dirtyLocal: boolean
_dirtyWorld: boolean
_drawOrder: number
_fitMode: string
_group: any
_height: number
_image: ImageElement
_layers: number[]
_localAnchor: Vec4
_margin: Vec4
_maskOffset: number
_maskedBy: any
_modelTransform: Mat4
_offsetReadAt: number
_parentWorldTransform: Mat4
_pivot: Vec2
_screenCorners: Vec3[]
_screenToWorld: Mat4
_screenTransform: Mat4
_sizeDirty: boolean
_text: TextElement
_type: string
_useInput: boolean
_width: number
_worldCorners: Vec3[]
_worldCornersDirty: boolean
screen: Entity

The Entity with a ScreenComponent that this component belongs to. This is automatically set when the component is a child of a ScreenComponent.

Accessors

  • get _absBottom(): number
  • Returns number

  • get _absRight(): number
  • Returns number

  • get _absTop(): number
  • Returns number

  • get _hasSplitAnchorsX(): boolean
  • Returns boolean

  • get _hasSplitAnchorsY(): boolean
  • Returns boolean

  • get aabb(): any
  • Returns any

  • get alignment(): Vec2
  • Returns Vec2

  • set alignment(arg: Vec2): void
  • Parameters

    • arg: Vec2

    Returns void

  • get anchor(): Vec4
  • Returns Vec4

  • set anchor(arg: Vec4): void
  • Specifies where the left, bottom, right and top edges of the component are anchored relative to its parent. Each value ranges from 0 to 1. e.g. a value of [0, 0, 0, 0] means that the element will be anchored to the bottom left of its parent. A value of [1, 1, 1, 1] means it will be anchored to the top right. A split anchor is when the left-right or top-bottom pairs of the anchor are not equal. In that case the component will be resized to cover that entire area. e.g. a value of [0, 0, 1, 1] will make the component resize exactly as its parent.

    Parameters

    • arg: Vec4

    Returns void

  • get autoFitHeight(): boolean
  • Returns boolean

  • set autoFitHeight(arg: boolean): void
  • Parameters

    • arg: boolean

    Returns void

  • get autoFitWidth(): boolean
  • Returns boolean

  • set autoFitWidth(arg: boolean): void
  • Parameters

    • arg: boolean

    Returns void

  • get autoHeight(): boolean
  • Returns boolean

  • set autoHeight(arg: boolean): void
  • Parameters

    • arg: boolean

    Returns void

  • get autoWidth(): boolean
  • Returns boolean

  • set autoWidth(arg: boolean): void
  • Parameters

    • arg: boolean

    Returns void

  • get batchGroupId(): number
  • Returns number

  • set batchGroupId(arg: number): void
  • Assign element to a specific batch group (see BatchGroup). Default is -1 (no group).

    Parameters

    • arg: number

    Returns void

  • get bottom(): number
  • Returns number

  • set bottom(arg: number): void
  • The distance from the bottom edge of the anchor. Can be used in combination with a split anchor to make the component's top edge always be 'top' units away from the top.

    Parameters

    • arg: number

    Returns void

  • get calculatedHeight(): number
  • Returns number

  • set calculatedHeight(arg: number): void
  • The height at which the element will be rendered. In most cases this will be the same as height. However, in some cases the engine may calculate a different height for the element, such as when the element is under the control of a LayoutGroupComponent. In these scenarios, calculatedHeight may be smaller or larger than the height that was set in the editor.

    Parameters

    • arg: number

    Returns void

  • get calculatedWidth(): number
  • Returns number

  • set calculatedWidth(arg: number): void
  • The width at which the element will be rendered. In most cases this will be the same as width. However, in some cases the engine may calculate a different width for the element, such as when the element is under the control of a LayoutGroupComponent. In these scenarios, calculatedWidth may be smaller or larger than the width that was set in the editor.

    Parameters

    • arg: number

    Returns void

  • get canvasCorners(): Vec2[]
  • An array of 4 Vec2s that represent the bottom left, bottom right, top right and top left corners of the component in canvas pixels. Only works for screen space element components.

    Returns Vec2[]

  • get color(): Color
  • Returns Color

  • set color(arg: Color): void
  • Parameters

    • arg: Color

    Returns void

  • get drawOrder(): number
  • Returns number

  • set drawOrder(arg: number): void
  • The draw order of the component. A higher value means that the component will be rendered on top of other components.

    Parameters

    • arg: number

    Returns void

  • get enableMarkup(): boolean
  • Returns boolean

  • set enableMarkup(arg: boolean): void
  • Parameters

    • arg: boolean

    Returns void

  • get enabled(): boolean
  • Returns boolean

  • set enabled(arg: boolean): void
  • Parameters

    • arg: boolean

    Returns void

  • get fitMode(): string
  • Returns string

  • set fitMode(arg: string): void
  • Set how the content should be fitted and preserve the aspect ratio of the source texture or sprite. Only works for ELEMENTTYPE_IMAGE types. Can be:

    • FITMODE_STRETCH: Fit the content exactly to Element's bounding box.
    • FITMODE_CONTAIN: Fit the content within the Element's bounding box while preserving its Aspect Ratio.
    • FITMODE_COVER: Fit the content to cover the entire Element's bounding box while preserving its Aspect Ratio.

    Parameters

    • arg: string

    Returns void

  • get font(): Font | CanvasFont
  • Returns Font | CanvasFont

  • set font(arg: Font | CanvasFont): void
  • Parameters

    • arg: Font | CanvasFont

    Returns void

  • get fontAsset(): number
  • Returns number

  • set fontAsset(arg: number): void
  • Parameters

    • arg: number

    Returns void

  • get fontSize(): number
  • Returns number

  • set fontSize(arg: number): void
  • Parameters

    • arg: number

    Returns void

  • get height(): number
  • Returns number

  • set height(arg: number): void
  • The height of the element as set in the editor. Note that in some cases this may not reflect the true height at which the element is rendered, such as when the element is under the control of a LayoutGroupComponent. See calculatedHeight in order to ensure you are reading the true height at which the element will be rendered.

    Parameters

    • arg: number

    Returns void

  • get key(): string
  • Returns string

  • set key(arg: string): void
  • Parameters

    • arg: string

    Returns void

  • get layers(): number[]
  • Returns number[]

  • set layers(arg: number[]): void
  • An array of layer IDs (Layer#id) to which this element should belong. Don't push, pop, splice or modify this array, if you want to change it - set a new one instead.

    Parameters

    • arg: number[]

    Returns void

  • get left(): number
  • Returns number

  • set left(arg: number): void
  • The distance from the left edge of the anchor. Can be used in combination with a split anchor to make the component's left edge always be 'left' units away from the left.

    Parameters

    • arg: number

    Returns void

  • get lineHeight(): number
  • Returns number

  • set lineHeight(arg: number): void
  • Parameters

    • arg: number

    Returns void

  • get margin(): Vec4
  • Returns Vec4

  • set margin(arg: Vec4): void
  • The distance from the left, bottom, right and top edges of the anchor. For example if we are using a split anchor like [0,0,1,1] and the margin is [0,0,0,0] then the component will be the same width and height as its parent.

    Parameters

    • arg: Vec4

    Returns void

  • get mask(): boolean
  • Returns boolean

  • set mask(arg: boolean): void
  • Parameters

    • arg: boolean

    Returns void

  • get maskedBy(): any
  • Private

    Get the entity that is currently masking this element.

    Returns any

  • get material(): Material
  • Returns Material

  • set material(arg: Material): void
  • Parameters

    • arg: Material

    Returns void

  • get materialAsset(): number
  • Returns number

  • set materialAsset(arg: number): void
  • Parameters

    • arg: number

    Returns void

  • get maxFontSize(): number
  • Returns number

  • set maxFontSize(arg: number): void
  • Parameters

    • arg: number

    Returns void

  • get maxLines(): number
  • Returns number

  • set maxLines(arg: number): void
  • Parameters

    • arg: number

    Returns void

  • get minFontSize(): number
  • Returns number

  • set minFontSize(arg: number): void
  • Parameters

    • arg: number

    Returns void

  • get opacity(): number
  • Returns number

  • set opacity(arg: number): void
  • Parameters

    • arg: number

    Returns void

  • get outlineColor(): Color
  • Returns Color

  • set outlineColor(arg: Color): void
  • Parameters

    • arg: Color

    Returns void

  • get outlineThickness(): number
  • Returns number

  • set outlineThickness(arg: number): void
  • Parameters

    • arg: number

    Returns void

  • get pivot(): Vec2
  • Returns Vec2

  • set pivot(arg: Vec2): void
  • The position of the pivot of the component relative to its anchor. Each value ranges from 0 to 1 where [0,0] is the bottom left and [1,1] is the top right.

    Parameters

    • arg: Vec2

    Returns void

  • get pixelsPerUnit(): number
  • Returns number

  • set pixelsPerUnit(arg: number): void
  • Parameters

    • arg: number

    Returns void

  • get rangeEnd(): number
  • Returns number

  • set rangeEnd(arg: number): void
  • Parameters

    • arg: number

    Returns void

  • get rangeStart(): number
  • Returns number

  • set rangeStart(arg: number): void
  • Parameters

    • arg: number

    Returns void

  • get rect(): Vec4
  • Returns Vec4

  • set rect(arg: Vec4): void
  • Parameters

    • arg: Vec4

    Returns void

  • get right(): number
  • Returns number

  • set right(arg: number): void
  • The distance from the right edge of the anchor. Can be used in combination with a split anchor to make the component's right edge always be 'right' units away from the right.

    Parameters

    • arg: number

    Returns void

  • get rtlReorder(): boolean
  • Returns boolean

  • set rtlReorder(arg: boolean): void
  • Parameters

    • arg: boolean

    Returns void

  • get screenCorners(): Vec3[]
  • An array of 4 Vec3s that represent the bottom left, bottom right, top right and top left corners of the component relative to its parent ScreenComponent.

    Returns Vec3[]

  • get shadowColor(): Color
  • Returns Color

  • set shadowColor(arg: Color): void
  • Parameters

    • arg: Color

    Returns void

  • get shadowOffset(): number
  • Returns number

  • set shadowOffset(arg: number): void
  • Parameters

    • arg: number

    Returns void

  • get spacing(): number
  • Returns number

  • set spacing(arg: number): void
  • Parameters

    • arg: number

    Returns void

  • get sprite(): Sprite
  • Returns Sprite

  • set sprite(arg: Sprite): void
  • Parameters

    • arg: Sprite

    Returns void

  • get spriteAsset(): number
  • Returns number

  • set spriteAsset(arg: number): void
  • Parameters

    • arg: number

    Returns void

  • get spriteFrame(): number
  • Returns number

  • set spriteFrame(arg: number): void
  • Parameters

    • arg: number

    Returns void

  • get text(): string
  • Returns string

  • set text(arg: string): void
  • Parameters

    • arg: string

    Returns void

  • get textHeight(): number
  • The height of the text rendered by the component. Only works for ELEMENTTYPE_TEXT types.

    Returns number

  • get textWidth(): number
  • The width of the text rendered by the component. Only works for ELEMENTTYPE_TEXT types.

    Returns number

  • get texture(): Texture
  • Returns Texture

  • set texture(arg: Texture): void
  • Parameters

    • arg: Texture

    Returns void

  • get textureAsset(): number
  • Returns number

  • set textureAsset(arg: number): void
  • Parameters

    • arg: number

    Returns void

  • get top(): number
  • Returns number

  • set top(arg: number): void
  • The distance from the top edge of the anchor. Can be used in combination with a split anchor to make the component's bottom edge always be 'bottom' units away from the bottom.

    Parameters

    • arg: number

    Returns void

  • get type(): string
  • Returns string

  • set type(arg: string): void
  • The type of the ElementComponent. Can be:

    • ELEMENTTYPE_GROUP: The component can be used as a layout mechanism to create groups of ElementComponents e.g. panels.
    • ELEMENTTYPE_IMAGE: The component will render an image
    • ELEMENTTYPE_TEXT: The component will render text

    Parameters

    • arg: string

    Returns void

  • get unicodeConverter(): boolean
  • Returns boolean

  • set unicodeConverter(arg: boolean): void
  • Parameters

    • arg: boolean

    Returns void

  • get useInput(): boolean
  • Returns boolean

  • set useInput(arg: boolean): void
  • If true then the component will receive Mouse or Touch input events.

    Parameters

    • arg: boolean

    Returns void

  • get width(): number
  • Returns number

  • set width(arg: number): void
  • The width of the element as set in the editor. Note that in some cases this may not reflect the true width at which the element is rendered, such as when the element is under the control of a LayoutGroupComponent. See calculatedWidth in order to ensure you are reading the true width at which the element will be rendered.

    Parameters

    • arg: number

    Returns void

  • get worldCorners(): Vec3[]
  • An array of 4 Vec3s that represent the bottom left, bottom right, top right and top left corners of the component in world space. Only works for 3D element components.

    Returns Vec3[]

  • get wrapLines(): boolean
  • Returns boolean

  • set wrapLines(arg: boolean): void
  • Parameters

    • arg: boolean

    Returns void

Events

  • get _absLeft(): number
  • Fired when a touch is canceled on the component. Only fired when useInput is true.

    ElementComponent#touchcancel

    Returns number

Methods

  • Parameters

    • screen: any

    Returns void

  • Returns void

  • Parameters

    • propagateCalculatedWidth: any
    • propagateCalculatedHeight: any

    Returns void

  • Returns void

  • Returns void

  • Returns void

  • Returns boolean

  • Returns boolean

  • Parameters

    • parent: any

    Returns void

  • Returns void

  • Returns void

  • Parameters

    • res: any

    Returns void

  • Returns void

  • Returns { mask: any; screen: any }

    • mask: any
    • screen: any
  • Returns void

  • Parameters

    • value: any
    • updateMargins: any

    Returns void

  • Parameters

    • value: any
    • updateMargins: any

    Returns void

  • Parameters

    • h: any

    Returns void

  • Parameters

    • x: any
    • y: any
    • z: any

    Returns void

  • Parameters

    • mask: any

    Returns void

  • Parameters

    • x: any
    • y: any
    • z: any

    Returns any

  • Parameters

    • w: any

    Returns void

  • Returns any

  • Parameters

    • screen: any

    Returns void

  • Returns void

  • Parameters

    • currentMask: any
    • depth: any

    Returns void

  • Parameters

    • screen: any

    Returns void

  • Parameters

    • model: any

    Returns void

  • Parameters

    • schema: any

    Returns void

  • Fire an event, all additional arguments are passed on to the event listener.

    Returns

    Self for chaining.

    Example

    obj.fire('test', 'This is the message');
    

    Parameters

    • name: string

      Name of event to fire.

    • Optional arg1: any

      First argument that is passed to the event handler.

    • Optional arg2: any

      Second argument that is passed to the event handler.

    • Optional arg3: any

      Third argument that is passed to the event handler.

    • Optional arg4: any

      Fourth argument that is passed to the event handler.

    • Optional arg5: any

      Fifth argument that is passed to the event handler.

    • Optional arg6: any

      Sixth argument that is passed to the event handler.

    • Optional arg7: any

      Seventh argument that is passed to the event handler.

    • Optional arg8: any

      Eighth argument that is passed to the event handler.

    Returns EventHandler

  • Returns number

  • Parameters

    • x: any
    • y: any

    Returns Vec3

  • 根据屏幕位置获得element的像素值

    Returns

    element在此屏幕坐标的像素值

    Parameters

    • screenPoint: { x: number; y: number }

      屏幕坐标

      • x: number
      • y: number
    • Optional camera: CameraComponent
    • Optional color: Color

      颜色值(不传则创建新的颜色)

    Returns Color

  • Test if there are any handlers bound to an event name.

    Returns

    True if the object has handlers bound to the specified event name.

    Example

    obj.on('test', function () { }); // bind an event to 'test'
    obj.hasEvent('test'); // returns true
    obj.hasEvent('hello'); // returns false

    Parameters

    • name: string

      The name of the event to test.

    Returns boolean

  • Parameters

    • camera: any

    Returns boolean

  • Detach an event handler from an event. If callback is not provided then all callbacks are unbound from the event, if scope is not provided then all events with the callback will be unbound.

    Returns

    Self for chaining.

    Example

    var handler = function () {
    };
    obj.on('test', handler);

    obj.off(); // Removes all events
    obj.off('test'); // Removes all events called 'test'
    obj.off('test', handler); // Removes all handler functions, called 'test'
    obj.off('test', handler, this); // Removes all handler functions, called 'test' with scope this

    Parameters

    • Optional name: string

      Name of the event to unbind.

    • Optional callback: HandleEventCallback

      Function to be unbound.

    • Optional scope: object

      Scope that was used as the this when the event is fired.

    Returns EventHandler

  • Attach an event handler to an event.

    Returns

    Self for chaining.

    Example

    obj.on('test', function (a, b) {
    console.log(a + b);
    });
    obj.fire('test', 1, 2); // prints 3 to the console

    Parameters

    • name: string

      Name of the event to bind the callback to.

    • callback: HandleEventCallback

      Function that is called when event is fired. Note the callback is limited to 8 arguments.

    • Optional scope: object

      Object to use as 'this' when the event is fired, defaults to current this.

    Returns EventHandler

  • Returns void

  • Returns void

  • Parameters

    • layer: any

    Returns void

  • Parameters

    • layer: any

    Returns void

  • Parameters

    • oldComp: any
    • newComp: any

    Returns void

  • Returns void

  • Returns void

  • Parameters

    • name: any
    • oldValue: any
    • newValue: any

    Returns void

  • Attach an event handler to an event. This handler will be removed after being fired once.

    Returns

    Self for chaining.

    Example

    obj.once('test', function (a, b) {
    console.log(a + b);
    });
    obj.fire('test', 1, 2); // prints 3 to the console
    obj.fire('test', 1, 2); // not going to get handled

    Parameters

    • name: string

      Name of the event to bind the callback to.

    • callback: HandleEventCallback

      Function that is called when event is fired. Note the callback is limited to 8 arguments.

    • Optional scope: object

      Object to use as 'this' when the event is fired, defaults to current this.

    Returns EventHandler

  • Parameters

    • model: any

    Returns void

  • 根据世界坐标设置element的屏幕坐标(element的anchor必需为[0,0,0,0]才能保证位置正确)

    Parameters

    • pos: Vec3

      世界坐标

    • Optional camera: CameraComponent

      当前相机,默认为第一个场景相机

    Returns void

  • Parameters

    • depth: any

    Returns void

  • Parameters

    • obj: any
    • schema: any

    Returns void