Draw Bezier curve through screen interaction

Preface

In the previous articles, we introduced the principle of Bessel curve 、 Draw curves and achieve dynamic effects , These are preset by the code , If we want to draw the curve by ourselves according to our needs , You need to use interaction to realize . In this article, we will first introduce the simple interactive drawing , Set the control point of Bezier curve by obtaining the touch position , So as to achieve interactive curve drawing .

Get touch location

The first problem to be solved is how to get the touch position of the finger on the screen . stay Flutter in , Provides a Listener Components , It can monitor all kinds of touch events .Listener The component construction method of is defined as follows ：

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

among onPointerXX Are callback methods for touch events , The touch location information will be carried in the callback , The specific parameters are as follows ：

• onPointerDown： Touch point press down （ Similar to the mouse pressed but not released ） The callback method for the , With one PointerDownEvent Parameters , This parameter will contain the click information , One of them localPosition Parameters , That is, the position on time .
• onPointerUp： Touch and click Release ࿰