Phaser场景中带顶栏的矩形无法拖拽，需如何修改？

1. 用容器统一管理矩形和顶栏，简化拖拽逻辑 #

现有代码分别维护mainRect和topBar的位置，容易出现同步错误。将两者放入同一个容器，拖拽容器即可同步移动两个元素：

修改createActivityObjectInternal函数中的元素创建逻辑：

// 替换原有的mainRect和topBar创建代码
const container = scene.add.container(rectX, rectY);

// 主矩形（容器内相对坐标，原点保持0）
const mainRect = scene.add.rectangle(0, topBarHeight, rectWidth, rectHeight - topBarHeight, 0xffffff).setOrigin(0);
mainRect.setStrokeStyle(2 * scale, 0x000000);

// 顶栏（容器内相对坐标0,0）
const topBar = scene.add.rectangle(0, 0, rectWidth, topBarHeight, 0xffa500).setOrigin(0);
topBar.setStrokeStyle(2 * scale, 0xffa500);

// 将元素添加到容器
container.add(mainRect);
container.add(topBar);
container.setDepth(1); // 统一设置容器层级即可

2. 修正拖拽坐标：转换为世界坐标（解决相机滚动后偏移） #

相机滚动时，dragX/dragY是视口坐标，需转换为世界坐标才能匹配元素的实际位置：

修改拖拽事件处理逻辑：

scene.input.on("drag", (pointer, gameObject, dragX, dragY) => {
  if (gameObject !== topBar) return;
  // 将视口坐标转为世界坐标
  const worldPoint = scene.cameras.main.getWorldPoint(dragX, dragY);
  // 结合拖拽偏移计算新位置（偏移逻辑见下一点）
  container.x = worldPoint.x - dragOffset.x;
  container.y = worldPoint.y - dragOffset.y;
});

3. 添加拖拽起始偏移，避免元素跳转到鼠标位置 #

拖拽开始时记录鼠标相对于容器的偏移量，拖拽时基于该偏移计算位置，防止元素突然跳动：

在dragstart事件中添加偏移记录：

let dragOffset; // 函数内局部变量，避免全局污染

scene.input.on("dragstart", (pointer, gameObject) => {
  if (gameObject !== topBar) return;
  isDragging = true;
  // 计算鼠标相对于容器的偏移
  const worldPoint = scene.cameras.main.getWorldPoint(pointer.x, pointer.y);
  dragOffset = {
    x: worldPoint.x - container.x,
    y: worldPoint.y - container.y
  };
});

4. 解决全局pointerdown事件与拖拽的冲突 #

全局的pointerdown事件会优先触发，导致点击顶栏时可能误触发相机拖拽。可通过阻止顶栏点击事件传播，或在全局事件中判断点击对象：

方法一：给顶栏添加事件阻止传播

topBar.on('pointerdown', (pointer) => {
  pointer.stopPropagation();
});

方法二：修改全局pointerdown事件逻辑

this.input.on('pointerdown', (pointer) => {
  // 仅当未点击交互元素时，执行相机拖拽逻辑
  if (pointer.isDown && !isDragging && !pointer.gameObject) {
    this.input.dragStartX = pointer.x;
    this.input.dragStartY = pointer.y;
    this.input.cameraStartX = this.cameras.main.scrollX;
    this.input.cameraStartY = this.cameras.main.scrollY;
  }
});

5. 移除全局变量污染，改用局部变量管理实例 #

原代码的mainRect、topBar是全局变量，多次创建会覆盖旧实例。将这些变量改为函数内局部变量，或用数组存储所有活动对象：

// 全局定义数组存储所有活动对象（可选）
const activityObjects = [];

function createActivityObjectInternal(scene) {
  // ... 其他代码 ...
  const container = scene.add.container(rectX, rectY);
  // ... 创建mainRect、topBar并添加到容器 ...
  activityObjects.push(container); // 存储实例，方便后续管理
}

完整修改后的createActivityObjectInternal函数示例 #

function createActivityObjectInternal(scene) {
  console.log("Creating activity object");
  if (!scene) {
    console.error("Scene is not defined");
    return;
  }

  const scale = 0.15;
  const rectWidth = 400 * scale * 1.5;
  const rectHeight = 100 * scale;
  const topBarHeight = 12 * scale;
  const rectX = 100;
  const rectY = 100;

  // 创建容器统一管理元素
  const container = scene.add.container(rectX, rectY);
  container.setDepth(1);

  // 主矩形（容器内相对坐标）
  const mainRect = scene.add.rectangle(0, topBarHeight, rectWidth, rectHeight - topBarHeight, 0xffffff).setOrigin(0);
  mainRect.setStrokeStyle(2 * scale, 0x000000);

  // 顶栏（容器内相对坐标）
  const topBar = scene.add.rectangle(0, 0, rectWidth, topBarHeight, 0xffa500).setOrigin(0);
  topBar.setStrokeStyle(2 * scale, 0xffa500);
  topBar.setInteractive();
  scene.input.setDraggable(topBar);

  // 添加到容器
  container.add(mainRect);
  container.add(topBar);

  // 阻止顶栏点击事件传播，避免触发相机拖拽
  topBar.on('pointerdown', (pointer) => pointer.stopPropagation());

  let dragOffset;
  // 拖拽事件
  scene.input.on("dragstart", (pointer, gameObject) => {
    if (gameObject !== topBar) return;
    isDragging = true;
    const worldPoint = scene.cameras.main.getWorldPoint(pointer.x, pointer.y);
    dragOffset = {
      x: worldPoint.x - container.x,
      y: worldPoint.y - container.y
    };
  });

  scene.input.on("drag", (pointer, gameObject, dragX, dragY) => {
    if (gameObject !== topBar) return;
    const worldPoint = scene.cameras.main.getWorldPoint(dragX, dragY);
    container.x = worldPoint.x - dragOffset.x;
    container.y = worldPoint.y - dragOffset.y;
  });

  scene.input.on("dragend", (pointer, gameObject) => {
    if (gameObject !== topBar) return;
    isDragging = false;
  });
}

内容的提问来源于stack exchange，提问作者psimonson