前言
之前几篇我们介绍了贝塞尔曲线的原理、绘制曲线和动效实现,这些都是代码预设好的,如果我们要根据需要自行绘制曲线,就需要使用交互来实现了。本篇我们先来介绍简单的交互式绘图,通过获取触控位置来设定贝塞尔曲线的控制点,从而实现交互式绘制曲线。
获取触控位置
第一个要解决的问题是如何获取手指在屏幕的触控位置。在 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
:触控点按下去