cocos3.8节点事件

this.node.on

this.node.on(eventType, callback, [target], [useCapture]);
在Cocos Creator 3.8中，this.node.on用于在节点上注册监听特定的事件。这个方法能让你在游戏过程中，根据用户的交互或者其他游戏事件，执行特定的逻辑操作。

参数说明：

• eventType：字符串类型，表示要监听的事件名称。
• callback：函数类型，当事件被触发时，这个函数会被调用。
• target：可选参数，指定回调函数的this对象。如果不指定，默认是当前节点。
• useCapture：可选参数，布尔值，决定了事件是在捕获阶段还是冒泡阶段执行。默认为false，即在冒泡阶段执行。

这个方法返回的是一个函数，可以用于后续的off操作来注销监听事件。

以下为this.node.on注册绑定事件实例

@ccclass("Test")
export class Test extends Component {
  start() {
    //添加事件监听this.node.on() , 取消事件监听this.node.off()
    //
    this.node.on(
      Node.EventType.TOUCH_START,
      (event: EventTouch) => {
        //怎么取到事件触点的位置
        const uiPos = event.getUILocation();
        console.log(uiPos);
        //回调函数这部分一般不会这么写，会在外面写一个方法当作参数传进来
      },
      this
    );
    this.node.on(Node.EventType.TOUCH_END, (event: EventTouch) => {}, this);
    this.node.on(Node.EventType.TOUCH_END, (event: EventTouch) => {}, this);
    this.node.on(Node.EventType.TOUCH_CANCEL, (event: EventTouch) => {}, this);
  }

  update(deltaTime: number) {}
}

---

正常的回调函数的写法

以下代码节点内松手是end，节点外松手是cancel。

@ccclass("Test")
export class Test extends Component {
  start() {
    //添加事件监听this.node.on() , 取消事件监听this.node.off()
    //
    this.node.on(Node.EventType.TOUCH_START, this.onTouchStart, this);
    this.node.on(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
    this.node.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
    this.node.on(Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
  }

  onTouchStart(event: EventTouch) {
    //怎么取到事件触点的位置
    // const uiPos = event.getUILocation();
    // console.log(uiPos);

    console.log(" onTouchStart");
  }

  onTouchMove(event: EventTouch) {
    console.log("onTouchMove");
  }

  onTouchEnd(event: EventTouch) {
    console.log("onTouchEnd");
  }

  onTouchCancel(event: EventTouch) {
    console.log("onTouchCancel");
  }

  update(deltaTime: number) {}
}

---

一个点击缩小,点击松开后变大的效果

import { _decorator, Component, EventTouch, Node } from "cc";
const { ccclass, property } = _decorator;

@ccclass("Test")
export class Test extends Component {
  start() {
    //添加事件监听this.node.on() , 取消事件监听this.node.off()
    //
    this.node.on(Node.EventType.TOUCH_START, this.onTouchStart, this);
    this.node.on(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
    this.node.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
    this.node.on(Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
  }

  onTouchStart(event: EventTouch) {
    //怎么取到事件触点的位置
    // const uiPos = event.getUILocation();
    // console.log(uiPos);

    //点击缩小的效果
    this.node.setScale(0.9, 0.9);

    console.log(" onTouchStart");
  }

  onTouchMove(event: EventTouch) {
    console.log("onTouchMove");
  }

  onTouchEnd(event: EventTouch) {
    console.log("onTouchEnd");
    
    //点击松开后变大的效果
    this.node.setScale(1,1)
  }

  onTouchCancel(event: EventTouch) {
    console.log("onTouchCancel");

    //在节点外点击松开后一样需要变大
    this.node.setScale(1, 1)
  }

  update(deltaTime: number) {}
}

---

实现物体跟随手指移动的效果

使用 getUI api 实现更好的手指跟随

@ccclass("Test")
export class Test extends Component {
  start() {
    //添加事件监听this.node.on() , 取消事件监听this.node.off()
    //
    this.node.on(Node.EventType.TOUCH_START, this.onTouchStart, this);
    this.node.on(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
    this.node.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
    this.node.on(Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
  }

  onTouchStart(event: EventTouch) {
    //怎么取到事件触点的位置
    // const uiPos = event.getUILocation();
    // console.log(uiPos);

    //点击缩小的效果
    this.node.setScale(0.9, 0.9);

    console.log(" onTouchStart");
  }

  onTouchMove(event: EventTouch) {
    console.log("onTouchMove");

    //获取touchmove的像素偏移量从而实现手指跟随的效果

    //第一种方法，没有考虑设备像素比，跟随效果不好。
    // const dx = event.getDeltaX();
    // const dy = event.getDeltaY();

    // const x = this.node.position.x;
    // const y = this.node.position.y;

    // this.node.setPosition(x + dx, y + dy);

    //第二种方法
    const delta = event.getUIDelta();
    const dx = delta.x;
    const dy = delta.y;

    const x = this.node.position.x;
    const y = this.node.position.y;

    this.node.setPosition(x + dx, y + dy);
  }

  onTouchEnd(event: EventTouch) {
    console.log("onTouchEnd");

    //点击松开后变大的效果
    this.node.setScale(1, 1);
  }

  onTouchCancel(event: EventTouch) {
    console.log("onTouchCancel");

    //在节点外点击松开后一样需要变大
    this.node.setScale(1, 1);
  }

  update(deltaTime: number) {}
}

---

世界坐标与节点坐标的转换

实现一个点击节点左侧让节点向左移动；点击节点右侧，让节点向右移动的效果。

世界坐标：当前UI坐标系下的位置； 节点坐标：当前节点坐标系下的位置

onTouchStart(event: EventTouch) {
    //怎么取到事件触点的位置
    // const uiPos = event.getUILocation();
    // console.log(uiPos);

    //点击缩小的效果
    this.node.setScale(0.9, 0.9);

    //世界坐标（当前UI坐标系下的位置）与节点坐标（当前节点坐标系下的位置）的转换
    const uiPos = event.getUILocation();

    const transform = this.node.getComponent(UITransform);

    const nodePos = transform.convertToNodeSpaceAR(v3(uiPos.x, uiPos.y, 0));

    console.log(nodePos);
    
    if (nodePos.x > 0) {
      this.node.setPosition(this.node.position.x + 50, this.node.position.y);
    } else {
      this.node.setPosition(this.node.position.x - 50, this.node.position.y);
    }
  }

---