通过屏幕交互绘制贝塞尔曲线

前言

之前几篇我们介绍了贝塞尔曲线的原理、绘制曲线和动效实现，这些都是代码预设好的，如果我们要根据需要自行绘制曲线，就需要使用交互来实现了。本篇我们先来介绍简单的交互式绘图，通过获取触控位置来设定贝塞尔曲线的控制点，从而实现交互式绘制曲线。

获取触控位置

第一个要解决的问题是如何获取手指在屏幕的触控位置。在 Flutter 中，提供了一个 Listener 组件，可以监听各类触控事件。Listener 的组件构造方法定义如下：

const Listener({
  Key? key,
  this.onPointerDown,
  this.onPointerMove,
  this.onPointerUp,
  this.onPointerHover,
  this.onPointerCancel,
  this.onPointerSignal,
  this.behavior = HitTestBehavior.deferToChild,
  Widget? child,
}) 

其中onPointerXX都是触控事件的回调方法，在回调里会携带触控的位置信息，具体的参数如下：

• onPointerDown：触控点按下去（类似鼠标按下未释放）时的回调方法，携带了一个PointerDownEvent参数，该参数会包含点按信息，其中有一个localPosition参数，即当时点按时的位置。
• onPointerUp：触控点按 松开࿰