Options
All
  • Public
  • Public/Protected
  • All
Menu

Class ButtonComponent

按钮组件。可以被按下,或者点击。

按钮可以通过修改 Transition 来设置按钮状态过渡的方式:
-Button.Transition.NONE // 不做任何过渡
-Button.Transition.COLOR // 进行颜色之间过渡
-Button.Transition.SPRITE // 进行精灵之间过渡
-Button.Transition.SCALE // 进行缩放过渡

按钮可以绑定事件(但是必须要在按钮的 Node 上才能绑定事件):
// 以下事件可以在全平台上都触发
-cc.Node.EventType.TOUCH_START // 按下时事件
-cc.Node.EventType.TOUCH_Move // 按住移动后事件
-cc.Node.EventType.TOUCH_END // 按下后松开后事件
-cc.Node.EventType.TOUCH_CANCEL // 按下取消事件
// 以下事件只在 PC 平台上触发
-cc.Node.EventType.MOUSE_DOWN // 鼠标按下时事件
-cc.Node.EventType.MOUSE_MOVE // 鼠标按住移动后事件
-cc.Node.EventType.MOUSE_ENTER // 鼠标进入目标事件
-cc.Node.EventType.MOUSE_LEAVE // 鼠标离开目标事件
-cc.Node.EventType.MOUSE_UP // 鼠标松开事件
-cc.Node.EventType.MOUSE_WHEEL // 鼠标滚轮事件

example
// Add an event to the button.
button.node.on(cc.Node.EventType.TOUCH_START, (event) => {
    cc.log("This is a callback after the trigger event");
});
// You could also add a click event
//Note: In this way, you can't get the touch event info, so use it wisely.
button.node.on('click', (button) => {
   //The event is a custom event, you could get the Button component via first argument
})

Hierarchy

Index

Constructors

constructor

Properties

Protected _disabledColor

_disabledColor: Color = new Color(124, 124, 124, 255)

Protected _disabledSprite

_disabledSprite: SpriteFrame | null = null

Protected _duration

_duration: number = 0.1

Private _enabled

_enabled: boolean = true
property

_enabled

Private _fromColor

_fromColor: Color = new Color()

Private _fromScale

_fromScale: Vec3 = new Vec3()

Protected _hoverColor

_hoverColor: Color = new Color(211, 211, 211, 255)

Protected _hoverSprite

_hoverSprite: SpriteFrame | null = null

Private _hovered

_hovered: boolean = false

_id

_id: string = idGenerator.getNewId()

For internal usage.

Protected _interactable

_interactable: boolean = true

Protected _name

_name: string

Protected _normalColor

_normalColor: Color = new Color(214, 214, 214, 255)

Protected _normalSprite

_normalSprite: SpriteFrame | null = null

_objFlags

_objFlags: number

Private _originalScale

_originalScale: Vec3 = new Vec3()

Protected _pressColor

_pressColor: Color = Color.WHITE.clone()

Private _pressed

_pressed: boolean = false

Protected _pressedSprite

_pressedSprite: SpriteFrame | null = null

sceneGetter

sceneGetter: null | (() => RenderScene) = null

Private _sprite

_sprite: SpriteComponent | null = null

Protected _target

_target: Node | null = null

Private _targetScale

_targetScale: Vec3 = new Vec3()

Private _time

_time: number = 0

Private _toColor

_toColor: Color = new Color()

Private _toScale

_toScale: Vec3 = new Vec3()

Protected _transition

_transition: Transition = Transition.NONE

Private _transitionFinished

_transitionFinished: boolean = true

Protected _zoomScale

_zoomScale: number = 1.2

clickEvents

clickEvents: ComponentEventHandler[] = []

按钮的点击事件列表。

node

node: Node = NullNode

该组件被附加到的节点。组件总会附加到一个节点。

property

node

example
cc.log(comp.node);

Static EventType

EventType: EventType = EventType

Static Transition

Transition: Transition = Transition

Static system

system: null = null

Accessors

scriptAsset

  • get scriptAsset(): null

isOnLoadCalled

  • get isOnLoadCalled(): number

resizeToTarget

  • set resizeToTarget(value: boolean): void

disabledColor

  • get disabledColor(): Readonly<Color>
  • set disabledColor(value: {}): void

disabledSprite

duration

  • get duration(): number
  • set duration(value: number): void

enabled

  • get enabled(): boolean
  • set enabled(value: boolean): void

enabledInHierarchy

  • get enabledInHierarchy(): boolean

hoverColor

  • get hoverColor(): Readonly<Color>
  • set hoverColor(value: {}): void

hoverSprite

interactable

  • get interactable(): boolean
  • set interactable(value: boolean): void

isValid

  • get isValid(): boolean
  • 表示该对象是否可用(被 destroy 后将不可用)。
    当一个对象的 destroy 调用以后,会在这一帧结束后才真正销毁。
    因此从下一帧开始 isValid 就会返回 false,而当前帧内 isValid 仍然会是 true。
    如果希望判断当前帧是否调用过 destroy,请使用 cc.isValid(obj, true),不过这往往是特殊的业务需求引起的,通常情况下不需要这样。

    default

    true

    readonly
    example
    import * as cc from 'cc';
    var node = new cc.Node();
    cc.log(node.isValid);    // true
    node.destroy();
    cc.log(node.isValid);    // true, still valid in this frame
    // after a frame...
    cc.log(node.isValid);    // false, destroyed in the end of last frame

    Returns boolean

name

  • get name(): string
  • set name(value: string): void

normalColor

  • get normalColor(): Readonly<Color>
  • set normalColor(value: {}): void

normalSprite

pressedColor

  • get pressedColor(): Readonly<Color>
  • set pressedColor(value: {}): void

pressedSprite

target

  • get target(): null | Node
  • set target(value: null | Node): void
  • 需要过渡的目标。
    当前按钮状态改变规则:

    • 如果 Transition type 选择 Button.Transition.NONE,按钮不做任何过渡。
    • 如果 Transition type 选择 Button.Transition.COLOR,按钮会对目标颜色进行颜色之间的过渡。
    • 如果 Transition type 选择 Button.Transition.Sprite,按钮会对目标 Sprite 进行 Sprite 之间的过渡。

    Returns null | Node

  • 需要过渡的目标。
    当前按钮状态改变规则:

    • 如果 Transition type 选择 Button.Transition.NONE,按钮不做任何过渡。
    • 如果 Transition type 选择 Button.Transition.COLOR,按钮会对目标颜色进行颜色之间的过渡。
    • 如果 Transition type 选择 Button.Transition.Sprite,按钮会对目标 Sprite 进行 Sprite 之间的过渡。

    Parameters

    • value: null | Node

    Returns void

transition

uuid

  • get uuid(): string

zoomScale

  • get zoomScale(): number
  • set zoomScale(value: number): void

Methods

preload

  • __preload(): void

Protected applyTarget

  • _applyTarget(): void

Protected applyTransition

  • applyTransition(state: string): void

destroyImmediate

  • _destroyImmediate(): void

destruct

  • _destruct(): void
  • Clear all references in the instance.

    NOTE: this method will not clear the getter or setter functions which defined in the instance of CCObject. You can override the _destruct method if you need, for example: _destruct: function () { for (var key in this) { if (this.hasOwnProperty(key)) { switch (typeof this[key]) { case 'string': this[key] = ''; break; case 'object': case 'function': this[key] = null; break; } } }

    Returns void

Protected getButtonState

  • _getButtonState(): string

Protected Optional getLocalBounds

  • getLocalBounds(out_rect: Rect): void
  • 如果组件的包围盒与节点不同,您可以实现该方法以提供自定义的轴向对齐的包围盒(AABB), 以便编辑器的场景视图可以正确地执行点选测试。

    Parameters

    • out_rect: Rect

      提供包围盒的 Rect

    Returns void

getRenderScene

  • _getRenderScene(): RenderScene

Protected getTargetSprite

instantiate

  • instantiate(cloned: any): any

Protected onMouseMoveIn

Protected onMouseMoveOut

onPreDestroy

  • _onPreDestroy(): void

Protected onTouchBegan

Protected onTouchCancel

Protected onTouchEnded

Protected onTouchMove

  • onTouchMove(event?: EventTouch): undefined | false

Protected registerEvent

  • _registerEvent(): void

Protected resetState

  • _resetState(): void

Protected resizeNodeToTargetNode

  • _resizeNodeToTargetNode(): void

Protected updateColorTransition

  • updateColorTransition(state: string): void

Protected updateScaleTransition

  • updateScaleTransition(state: string): void

Protected updateSpriteTransition

  • updateSpriteTransition(state: string): void

Protected updateState

  • _updateState(): void

Protected zoomBack

  • _zoomBack(): void

Protected zoomUp

  • _zoomUp(): void

addComponent

  • addComponent<T>(classConstructor: Constructor<T>): T | null
  • addComponent(className: string): Component | null

destroy

  • destroy(): any

getComponent

  • getComponent<T>(classConstructor: Constructor<T>): T | null
  • getComponent(className: string): Component | null
  • 获取节点上指定类型的组件,如果节点有附加指定类型的组件,则返回,如果没有则为空。
    传入参数也可以是脚本的名称。

    example
    // get custom test calss.
    var test = node.getComponent("Test");

    Type parameters

    Parameters

    Returns T | null

  • 获取节点上指定类型的组件,如果节点有附加指定类型的组件,则返回,如果没有则为空。
    传入参数也可以是脚本的名称。

    example
    // get custom test calss.
    var test = node.getComponent("Test");

    Parameters

    • className: string

    Returns Component | null

getComponentInChildren

  • getComponentInChildren<T>(classConstructor: Constructor<T>): T | null
  • getComponentInChildren(className: string): Component | null

getComponents

  • getComponents<T>(classConstructor: Constructor<T>): T[]
  • getComponents(className: string): Component[]

getComponentsInChildren

  • getComponentsInChildren<T>(classConstructor: Constructor<T>): T[]
  • getComponentsInChildren(className: string): Component[]

Protected Optional lateUpdate

  • lateUpdate(dt: number): void
  • 如果该组件启用,则每帧调用 LateUpdate。
    该方法为生命周期方法,父类未必会有实现。并且你只能在该方法内部调用父类的实现,不可在其它地方直接调用该方法。

    Parameters

    • dt: number

      the delta time in seconds it took to complete the last frame

    Returns void

Protected Optional onDestroy

  • onDestroy(): void

onDisable

  • onDisable(): void

onEnable

  • onEnable(): void

Optional onFocusInEditor

  • onFocusInEditor(): void

Protected Optional onLoad

  • onLoad(): void
  • 当附加到一个激活的节点上或者其节点第一次激活时候调用。onLoad 总是会在任何 start 方法调用前执行,这能用于安排脚本的初始化顺序。
    该方法为生命周期方法,父类未必会有实现。并且你只能在该方法内部调用父类的实现,不可在其它地方直接调用该方法。

    Returns void

Optional onLostFocusInEditor

  • onLostFocusInEditor(): void

Protected Optional onRestore

  • onRestore(): void
  • onRestore 是用户在检查器菜单点击 Reset 时,对此组件执行撤消操作后调用的。

    如果组件包含了“内部状态”(不在 CCClass 属性中定义的临时成员变量),那么你可能需要实现该方法。

    编辑器执行撤销/重做操作时,将调用组件的 get set 来录制和还原组件的状态。 然而,在极端的情况下,它可能无法良好运作。
    那么你就应该实现这个方法,手动根据组件的属性同步“内部状态”。 一旦你实现这个方法,当用户撤销或重做时,组件的所有 get set 都不会再被调用。 这意味着仅仅指定了默认值的属性将被编辑器记录和还原。

    同样的,编辑可能无法在极端情况下正确地重置您的组件。
    于是如果你需要支持组件重置菜单,你需要在该方法中手工同步组件属性到“内部状态”。
    一旦你实现这个方法,组件的所有 get set 都不会在重置操作时被调用。 这意味着仅仅指定了默认值的属性将被编辑器重置。
    此方法仅在编辑器下会被调用。

    Returns void

Optional resetInEditor

  • resetInEditor(): void

schedule

  • schedule(callback: any, interval?: number, repeat?: number, delay?: number): void
  • 调度一个自定义的回调函数。
    如果回调函数已调度,那么将不会重复调度它,只会更新时间间隔参数。

    method

    schedule

    example
    var timeCallback = function (dt) {
      cc.log("time: " + dt);
    }
    this.schedule(timeCallback, 1);

    Parameters

    • callback: any

      回调函数。

    • Default value interval: number = 0

      时间间隔,0 表示每帧都重复。

    • Default value repeat: number = cc.macro.REPEAT_FOREVER

      将被重复执行(repeat+ 1)次,您可以使用 cc.macro.REPEAT_FOREVER 进行无限次循环。

    • Default value delay: number = 0

      第一次执行前等待的时间(延时执行)。

    Returns void

scheduleOnce

  • scheduleOnce(callback: any, delay?: number): void
  • 调度一个只运行一次的回调函数,可以指定 0 让回调函数在下一帧立即执行或者在一定的延时之后执行。

    method

    scheduleOnce

    see

    schedule

    example
    var timeCallback = function (dt) {
      cc.log("time: " + dt);
    }
    this.scheduleOnce(timeCallback, 2);

    Parameters

    • callback: any

      回调函数。

    • Default value delay: number = 0

      第一次执行前等待的时间(延时执行)。

    Returns void

Protected Optional start

  • start(): void
  • 如果该组件第一次启用,则在所有组件的 update 之前调用。通常用于需要在所有组件的 onLoad 初始化完毕后执行的逻辑。
    该方法为生命周期方法,父类未必会有实现。并且你只能在该方法内部调用父类的实现,不可在其它地方直接调用该方法。

    Returns void

unschedule

  • unschedule(callback_fn: any): void

unscheduleAllCallbacks

  • unscheduleAllCallbacks(): void

update

  • update(dt: number): void

Static deferredDestroy

  • _deferredDestroy(): void

Generated using TypeDoc