Ionic2/Ionic3中如何通过Pan事件获取拖动时的坐标位置？

嘿，我对Ionic2的触摸事件这块还算熟，来给你捋捋怎么获取Pan事件里的触点x、y坐标～

你已经知道用(pan)='panEvent($event)'来捕获Pan事件，没错，触点的坐标信息就藏在传入的$event对象里，具体可以通过这两个属性直接获取：

• $event.center.x：触点的x轴坐标（相对于整个视口）
• $event.center.y：触点的y轴坐标（相对于整个视口）

给你贴个实际可复用的代码示例，一看就懂：

模板文件（比如page.html） #

<ion-content (pan)="handlePan($event)">
  <!-- 这里放你的页面内容 -->
</ion-content>

组件逻辑文件（比如page.ts） #

handlePan(event: any) {
  // 提取当前触点的坐标
  const touchX = event.center.x;
  const touchY = event.center.y;

  // 这里可以写你需要的业务逻辑，比如打印坐标调试
  console.log(`当前触点位置：X=${touchX}, Y=${touchY}`);
}

如果你需要的是触点相对于当前触发元素的坐标（而不是整个视口），可以结合元素的位置信息计算：

handlePan(event: any) {
  // 获取触发元素的位置信息
  const elementBounds = event.target.getBoundingClientRect();
  // 计算相对于元素的坐标
  const relativeX = event.center.x - elementBounds.left;
  const relativeY = event.center.y - elementBounds.top;

  console.log(`相对于元素的坐标：X=${relativeX}, Y=${relativeY}`);
}

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