DaFuWeng/assets/GlobalScript/CommonComponent/BaseButton.ts

import { _decorator, CCInteger, CCString, Component, Node, Sprite, SpriteFrame, input, Input, __private, NodeEventType, EventTouch, EventMouse, UITransform, v2 } from 'cc';
import { BaseSpriteFrame } from './BaseSpriteFrame';
const { ccclass, property } = _decorator;


export enum BaseButtonState{
    // 普通
    Normal = 0,
    // 悬停
    Hover = 1,
    // 按下
    Press = 2,
    //失效
    Disable = 8
}

@ccclass('BaseButton')
export class BaseButton extends Component {

    @property({ type: CCString, displayName: 'img路径', tooltip: "img路径" })
    ImgPath: string;

    @property({ type: [CCInteger], displayName: '普通img编号', tooltip: "普通img编号" })
    NormalImgIndex: number;

    @property({ type: [CCInteger], displayName: '悬停img编号', tooltip: "悬停img编号" })
    HoverImgIndex: number;

    @property({ type: [CCInteger], displayName: '按下img编号', tooltip: "按下img编号" })
    PressImgIndex: number;

    @property({ type: [CCInteger], displayName: '失效img编号', tooltip: "失效img编号" })
    DisableImgIndex: number;

    //普通精灵帧
    NormalImgSpriteFrame: SpriteFrame;

    //悬停精灵帧
    HoverImgSpriteFrame: SpriteFrame;

    //按下精灵帧
    PressImgSpriteFrame: SpriteFrame;

    //失效精灵帧
    DisableImgSpriteFrame: SpriteFrame;

    //精灵对象
    SpriteObj: Sprite;

    //初始化状态
    InitState = false;

    //按钮状态
    ButtonState = BaseButtonState.Normal; // 0 普通 1悬停 2按下 8失效

    /**
     * @description: BaseButton初始化设置
     * @param {string} ImgPath: npk中的路径
     * @param {number} NormalIndex: 普通 在npk.img 中的idnex 其他状态自动+1
     */
    init(ImgPath:string,NormalIndex:number): void;
    init(ImgPath:string,NormalIndex:number,HoverIndex:number,PressIndex:number,DisableIndex:number,auto:boolean): void;

    /**
     * @description: BaseButton初始化设置
     * @param {string} ImgPath: npk中的路径
     * @param {number} NormalIndex: 普通 在npk.img 中的idnex
     * @param {number} HoverIndex: 悬停
     * @param {number} PressIndex 按下
     * @param {number} DisableIndex 失效
     * @param {number} Disable 是否启用失效状态
     * @return {*}
     */
    init(ImgPath:string,NormalIndex:number,HoverIndex?:number,PressIndex?:number,DisableIndex?:number,Disable:boolean = true): void{
        this.ImgPath = ImgPath;
        this.NormalImgIndex = NormalIndex;
        this.HoverImgIndex = HoverIndex ? HoverIndex : NormalIndex + 1;
        this.PressImgIndex = PressIndex ? PressIndex : NormalIndex + 2;
        if (Disable){ this.DisableImgIndex = DisableIndex ? DisableIndex : NormalIndex + 3; }
    }
    
    start() {

        //判断是否有精灵 如果没有 就给他搞一个
        if (this.node.getComponent(Sprite))
            this.SpriteObj = this.node.getComponent(Sprite);
        else
            this.SpriteObj = this.node.addComponent(Sprite);

        //设置节点锚点为左上角
        this.node.getComponent(UITransform).anchorPoint = v2(0, 1);
        //设置类型
        this.SpriteObj.sizeMode = Sprite.SizeMode.RAW;
        //设置
        this.SpriteObj.trim = false;

        new BaseSpriteFrame(this.ImgPath, this.NormalImgIndex, _SpriteFrame => { this.NormalImgSpriteFrame = _SpriteFrame });
        new BaseSpriteFrame(this.ImgPath, this.HoverImgIndex, _SpriteFrame => { this.HoverImgSpriteFrame = _SpriteFrame });
        new BaseSpriteFrame(this.ImgPath, this.PressImgIndex, _SpriteFrame => { this.PressImgSpriteFrame = _SpriteFrame });
        new BaseSpriteFrame(this.ImgPath, this.DisableImgIndex, _SpriteFrame => { this.DisableImgSpriteFrame = _SpriteFrame });

    }

    UploadSpriteFrame(_SpriteFrame) {
        if (this.SpriteObj.spriteFrame != _SpriteFrame) {
            this.SpriteObj.spriteFrame = _SpriteFrame;
        }
    }

    update(deltaTime: number) {
        if (!this.InitState) {
            if (this.NormalImgSpriteFrame && this.HoverImgSpriteFrame && this.PressImgSpriteFrame) {
                this.InitState = true;
                this.UploadSpriteFrame(this.NormalImgSpriteFrame);

                // this.node.on(Input.EventType.TOUCH_START, this.OnPress, this);
                // this.node.on(Input.EventType.TOUCH_END, this.OnEnd, this);
                this.node.on(Node.EventType.MOUSE_ENTER, this.OnHever, this);
                this.node.on(Node.EventType.MOUSE_LEAVE, this.OffHever, this);
                this.node.on(Node.EventType.MOUSE_DOWN, this.OnPress, this);
                this.node.on(Node.EventType.MOUSE_UP, this.OnEnd, this);
            }
        } else {
            switch (this.ButtonState) {
                case BaseButtonState.Normal:
                    this.UploadSpriteFrame(this.NormalImgSpriteFrame);
                    break;
                case BaseButtonState.Hover:
                    this.UploadSpriteFrame(this.HoverImgSpriteFrame);
                    break;
                case BaseButtonState.Press:
                    this.UploadSpriteFrame(this.PressImgSpriteFrame);
                    break;
                case BaseButtonState.Disable:
                    this.UploadSpriteFrame(this.DisableImgSpriteFrame);
                    break;
                default:
                    break;
            }
        }
    }

    OffHever(event) {
        if (this.ButtonState == BaseButtonState.Disable) return;
        this.ButtonState = BaseButtonState.Normal;
    }
    OnHever(event) {
        if (this.ButtonState == BaseButtonState.Disable) return;
        this.ButtonState = BaseButtonState.Hover;
    }
    OnEnd(event: EventMouse) {
        if (this.ButtonState == BaseButtonState.Disable) return;
        if (event.getButton() != EventMouse.BUTTON_LEFT) return;
        this.ButtonState = BaseButtonState.Normal;
    }

    OnPress(event: EventMouse) {
        if (this.ButtonState == BaseButtonState.Disable) return;
        //必须是鼠标左键
        if (event.getButton() != EventMouse.BUTTON_LEFT) return;

        this.ButtonState = BaseButtonState.Press;
    }
}