HarmonyOS鸿蒙Next中关于shape下的Polygon或Path的ontouch事件的探讨

HarmonyOS鸿蒙Next中关于shape下的Polygon或Path的ontouch事件的探讨

无论是Polygon 还是Path的ontouch 事件，响应的坐标范围，都是0,0,width,height 这样的长方形定义的范围，理想的响应坐标范围应该为Path 或者PolyGon 形成的封闭空间的坐标

当使用Path 或者polygon 来实现 地图，并且单击显示行政区域的信息时，常常造成，touch到的你获取到的对象，根本不是你想象的对象

比如有个用Polygon 构建的对象，

Polygon({
  width: 100, 
  height: 100
})
  .points([[0, 0], [50, 100], [100, 0]])
  .fill(Color.Green)
  .onTouch((e: TouchEvent)=>{
    e.stopPropagation();
    console.log("aaa");
  }

这是一个倒三角形，按道理，应该是(0,100)这样的触控坐标，不应该被这个ontouch 事件捕捉到，实际上就捕捉到了，他捕捉到的坐标跟 rect（0,0，100，100）一样的

PATH 也一样的。


更多关于HarmonyOS鸿蒙Next中关于shape下的Polygon或Path的ontouch事件的探讨的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

要不试试手动判断触摸点是否在图形内？

Polygon({ width: 100, height: 100 })
  .points([[0, 0], [50, 100], [100, 0]])
  .fill(Color.Green)
  .onTouch((e: TouchEvent) => {
    // 获取触摸点相对于Polygon的坐标
    const x = e.touches.x;
    const y = e.touches.y;
    // 使用射线法判断点是否在三角形内
    if (isPointInTriangle(x, y, [[0, 0], [50, 100], [100, 0]])) {
      e.stopPropagation();
      console.log("有效点击");
    }
  })

更多关于HarmonyOS鸿蒙Next中关于shape下的Polygon或Path的ontouch事件的探讨的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


我也正在研究这种功能，目前的思路是，先找找文档上有没有关于点击区域识别的接口看看，没找到再去提一个工单。我记得有一个官方示例有这种实现，但是找不到在哪了。好像是某个第三方组件？

在HarmonyOS Next中，Polygon和Path的onTouch事件通过组件手势系统处理。使用ArkUI的Gesture组件或通用事件onTouch实现交互，支持触摸位置判断。Path需结合Canvas组件，通过getBoundingClientRect()获取坐标范围进行触摸区域检测。Polygon可直接使用通用手势或自定义区域碰撞检测。事件回调参数包含触摸点坐标（localX/localY），需自行处理坐标转换和区域判断逻辑。注意Next版本中手势系统与API可能有调整，需参考最新官方文档确认具体实现方式。

在HarmonyOS Next中，Polygon和Path的触摸事件确实存在边界框检测的问题。这是当前框架的实现方式决定的，触摸检测是基于组件整体边界矩形而非实际图形路径。

对于地图类应用，建议采用以下解决方案：

  1. 在onTouch回调中手动添加点击区域检测逻辑：
.onTouch((e: TouchEvent) => {
  const x = e.touches[0].x;
  const y = e.touches[0].y;
  if (isPointInPolygon([x, y], polygonPoints)) {
    // 处理有效点击
    e.stopPropagation();
  }
})

  1. 实现isPointInPolygon函数，使用射线法或winding number算法判断点是否在多边形内。

  2. 对于复杂图形，可以考虑：

  • 将图形数据预处理为空间索引结构
  • 使用第三方几何计算库
  • 在服务端预先计算好区域关系

这种实现方式虽然需要额外计算，但能确保点击检测的准确性，特别适合行政区划等复杂图形场景。

回到顶部