如何用路径剪辑 GestureDetector（或 InkWell）输入区域？答案

【问题标题】：How do you clip GestureDetector (or InkWell) input Area with a path?如何用路径剪辑 GestureDetector（或 InkWell）输入区域？
【发布时间】：2019-11-11 17:52:00
【问题描述】：

我使用 CustomPaint 创建了一个自定义绘制的小部件，它有一个路径作为轮廓。但是将小部件包装在 GestureDetector 中会使单击区域成为整个画布周围的矩形，有没有办法剪辑 GestureDetector 以便单击仅在路径内有效？

【问题讨论】：

如果您使用自定义 Shape3Border 类，则无需执行 任何操作，例如：class SB extends ShapeBorder { ... - 示例代码 here
????包touchablegithub.com/nateshmbhat/touchable，是这个的完美选择。您可以为您在画布上绘制的各个形状提供各种手势回调

标签： flutter

【解决方案1】：

您可以从CustomPainter 实现hitTest 方法，在那里添加您的Path 并使用条件path.contains(position) 确保触摸仅覆盖路径部分。

class MyCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // TODO: implement paint
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return null;
  }

  @override
  bool hitTest(Offset position) {
    Path path = Path();
    //add your lines/curves here
    path.close();
    return path.contains(position);
  }
}

更多关于bool hitTest(Offset position)的信息：

每当对一个对象执行命中测试时调用使用此自定义绘制委托。

给定点与上一个点相对于同一坐标空间 [paint] 调用。

默认行为是考虑所有要命中的点背景画家，而前景画家没有得分。

如果给定位置对应于绘图上的一个点，则返回 true 应该被视为“命中”的图像，如果它对应于应该在绘制的图像之外考虑的点，并且 null 到使用默认行为。

我在这里回答了类似的问题：Flutter: What is the correct way to detect touch enter, move and exit on CustomPainter objects

【讨论】：