COCOS CREATOR(TS)之节点鼠标事件

一 : 前景

以官方的Demo为例子(HelloWorld)
①-> UI层级结构
COCOS CREATOR(TS)之节点鼠标事件
②-> Canvas的属性
COCOS CREATOR(TS)之节点鼠标事件

二 : 编码(Helloworld.ts)

const {ccclass, property} = cc._decorator;

@ccclass
export default class Helloworld extends cc.Component {

    @property(cc.Label)
    label: cc.Label = null;

    @property
    text: string = 'hello';

    start () {
        // init logic
        this.label.string = this.text;
        this.listener2Handler(true);
    }

    private listener2Handler( $isAdd : boolean ) : void{
        if( $isAdd ){
            !this.node.hasEventListener(cc.Node.EventType.TOUCH_END) && this.node.on( cc.Node.EventType.TOUCH_END , this.onClick , this );
        }else{
            this.node.hasEventListener(cc.Node.EventType.TOUCH_END) && this.node.off( cc.Node.EventType.TOUCH_END , this.onClick , this );
        }
    }

    private onClick( $e : cc.Event.EventTouch ) : void{
        switch ($e.currentTarget) {
            case this.node:
                console.log("okok");
                break;
        }
    }

    onDestroy() : void{
        this.listener2Handler(false);
    }
}

三 : 结果

COCOS CREATOR(TS)之节点鼠标事件

转载于:https://blog.51cto.com/aonaufly/2352091

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用 TypeScript 编写的 Cocos Creator 代码示例: ```typescript // 引入 Cocos Creator 引擎模块 import { Component, Node, Vec2 } from 'cc'; // 自定义组件类 export default class MyComponent extends Component { // 节点引用 private _node: Node | null = null; // 生命周期:组件被添加到节点上时调用 public onEnable() { // 获取节点引用 this._node = this.node.getChildByName('MyNode'); // 注册触摸事件 this.node.on(Node.EventType.TOUCH_START, this.onTouchStart, this); } // 生命周期:组件被移除时调用 public onDisable() { // 取消注册触摸事件 this.node.off(Node.EventType.TOUCH_START, this.onTouchStart, this); // 释放节点引用 this._node = null; } // 触摸事件处理函数 private onTouchStart(event: any, touch: any) { // 获取触摸点在全局坐标系下的位置 const touchPos: Vec2 = touch.getLocation(); // 将触摸点位置转换为相对于 MyNode 节点的本地坐标系下的位置 const localPos: Vec2 = this._node!.convertToNodeSpaceAR(touchPos); // 输出本地坐标系下的位置 console.log(`Local position: (${localPos.x}, ${localPos.y})`); } } ``` 该代码示例是一个自定义组件类,包含了组件的生命周期函数和触摸事件处理函数。在 `onEnable` 生命周期函数中获取了节点引用,并注册了触摸事件。在 `onDisable` 生命周期函数中取消了触摸事件的注册,并释放了节点引用。在触摸事件处理函数中,通过 `convertToNodeSpaceAR` 方法将触摸点位置转换为相对于 MyNode 节点的本地坐标系下的位置,并输出该位置信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值