《Cocos 游戏开发入门》5.1 输入事件模型与坐标换算

// src/input/input-system.ts
export type PointerPhase = "down" | "move" | "up" | "cancel";

export interface RawPointer {
  id: number;
  phase: PointerPhase;
  clientX: number;
  clientY: number;
  time: number;
}

const PHASE_BY_TYPE: Record<string, PointerPhase> = {
  pointerdown: "down",
  pointermove: "move",
  pointerup: "up",
  pointercancel: "cancel",
};

export class InputSystem {
  private readonly canvas: HTMLCanvasElement;
  private readonly listeners = new Set<(p: RawPointer) => void>();

  constructor(canvas: HTMLCanvasElement) {
    this.canvas = canvas;
    for (const type of Object.keys(PHASE_BY_TYPE)) {
      canvas.addEventListener(type, this.handle, { passive: false });
    }
  }

  private handle = (ev: PointerEvent): void => {
    const phase = PHASE_BY_TYPE[ev.type];
    if (!phase) return;
    const raw: RawPointer = {
      id: ev.pointerId,
      phase,
      clientX: ev.clientX,
      clientY: ev.clientY,
      time: ev.timeStamp,
    };
    for (const fn of this.listeners) fn(raw);
  };

  onPointer(fn: (p: RawPointer) => void): () => void {
    this.listeners.add(fn);
    return () => {
      this.listeners.delete(fn);
    };
  }

  dispose(): void {
    for (const type of Object.keys(PHASE_BY_TYPE)) {
      this.canvas.removeEventListener(type, this.handle);
    }
    this.listeners.clear();
  }
}

// src/input/viewport.ts
export interface ViewportMetrics {
  left: number; top: number;
  cssWidth: number; cssHeight: number;
  dpr: number;
}

export interface CanvasPoint {
  cssX: number; cssY: number;
  deviceX: number; deviceY: number;
}

export function measure(canvas: HTMLCanvasElement): ViewportMetrics {
  const rect = canvas.getBoundingClientRect();
  return {
    left: rect.left, top: rect.top,
    cssWidth: rect.width, cssHeight: rect.height,
    dpr: window.devicePixelRatio || 1,
  };
}

export function clientToCanvas(
  clientX: number, clientY: number, m: ViewportMetrics,
): CanvasPoint {
  const cssX = clientX - m.left;
  const cssY = clientY - m.top;
  return { cssX, cssY, deviceX: cssX * m.dpr, deviceY: cssY * m.dpr };
}

// src/math/mat3.ts
export type Mat3 = readonly [
  number, number, number, number, number, number, number, number, number,
];

export function apply(m: Mat3, x: number, y: number): { x: number; y: number } {
  return { x: m[0] * x + m[1] * y + m[2], y: m[3] * x + m[4] * y + m[5] };
}

export function invert(m: Mat3): Mat3 {
  const a = m[0], b = m[1], c = m[2];
  const d = m[3], e = m[4], f = m[5];
  const g = m[6], h = m[7], i = m[8];
  const A = e * i - f * h;
  const B = f * g - d * i;
  const C = d * h - e * g;
  const det = a * A + b * B + c * C;
  if (det === 0) throw new Error("mat3 不可逆：相机缩放是不是 0？");
  const s = 1 / det;
  return [
    A * s, (c * h - b * i) * s, (b * f - c * e) * s,
    B * s, (a * i - c * g) * s, (c * d - a * f) * s,
    C * s, (b * g - a * h) * s, (a * e - b * d) * s,
  ];
}

// src/camera/camera2d.ts
import { Mat3, apply, invert } from "../math/mat3";

export function worldToScreenMatrix(
  camX: number, camY: number, zoom: number, viewW: number, viewH: number,
): Mat3 {
  return [
    zoom, 0, viewW / 2 - camX * zoom,
    0, -zoom, viewH / 2 + camY * zoom,
    0, 0, 1,
  ];
}

export function screenToWorld(
  m: Mat3, screenX: number, screenY: number,
): { x: number; y: number } {
  return apply(invert(m), screenX, screenY);
}

// src/input/pointer-router.ts
import { Camera2D, screenToWorld } from "../camera/camera2d";
import { ViewportMetrics, measure, clientToCanvas } from "./viewport";
import { InputSystem, RawPointer } from "./input-system";

export class PointerRouter {
  private readonly system: InputSystem;
  private readonly camera: Camera2D;
  private metrics: ViewportMetrics;

  constructor(canvas: HTMLCanvasElement, camera: Camera2D) {
    this.camera = camera;
    this.metrics = measure(canvas);
    this.system = new InputSystem(canvas);
    this.system.onPointer((p) => this.route(p));
  }

  /** 页面滚动、缩放或窗口尺寸变化后必须重新测量 */
  remeasure(canvas: HTMLCanvasElement): void {
    this.metrics = measure(canvas);
  }

  private route(p: RawPointer): void {
    const c = clientToCanvas(p.clientX, p.clientY, this.metrics);
    const w = screenToWorld(this.camera.matrix(), c.deviceX, c.deviceY);
    this.camera.onWorldPointer({ id: p.id, phase: p.phase, worldX: w.x, worldY: w.y, time: p.time });
  }

  dispose(): void {
    this.system.dispose();
  }
}

// test/input-coords.test.ts
import { describe, it, expect } from "vitest";
import { clientToCanvas } from "../src/input/viewport";
import { apply } from "../src/math/mat3";
import { worldToScreenMatrix, screenToWorld } from "../src/camera/camera2d";

describe("坐标换算", () => {
  it("把 client 坐标搬进画布并乘上 DPR", () => {
    const m = { left: 100, top: 50, cssWidth: 800, cssHeight: 600, dpr: 2 };
    const p = clientToCanvas(300, 250, m);
    expect([p.cssX, p.cssY, p.deviceX, p.deviceY]).toEqual([200, 200, 400, 400]);
  });

  it("world -> screen -> world 往返一致", () => {
    const m = worldToScreenMatrix(120, -30, 1.5, 1280, 720);
    const forward = apply(m, 33, 77);
    const back = screenToWorld(m, forward.x, forward.y);
    expect(back.x).toBeCloseTo(33, 6);
    expect(back.y).toBeCloseTo(77, 6);
  });
});

import {
  _decorator, Component, Node, input, Input, EventTouch,
  Vec2, Vec3, Camera, UITransform,
} from 'cc';

const { ccclass, property } = _decorator;

@ccclass('BlockTapController')
export class BlockTapController extends Component {
  @property(Camera)
  camera: Camera | null = null;

  private readonly _uiPos = new Vec2();

  onEnable(): void {
    input.on(Input.EventType.TOUCH_START, this.onTouchStart, this);
  }
  onDisable(): void {
    input.off(Input.EventType.TOUCH_START, this.onTouchStart, this);
  }
  private onTouchStart(event: EventTouch): void {
    event.getUILocation(this._uiPos);          // 屏幕 / UI 坐标
    const world = new Vec3(this._uiPos.x, this._uiPos.y, 0);
    if (this.camera) this.camera.screenToWorld(world, world);
    const ui = this.node.getComponent(UITransform);
    if (ui) console.log('命中局部坐标', ui.convertToNodeSpaceAR(world).x);
  }
}