Flutter Canvas使用初体验

前言：

最近项目需要使用Flutter做UI界面，其中涉及绘图方面的操作，Flutter我又是刚接触一周，不太熟悉，因此我打算专门做一个小Demo体验一下，找找手感。

Demo的目标：

点到哪里，哪里就出现一个小红点跟着。

实现步骤：

1、首先这是个活动页面，因此首先页面的实现要继承StatefulWidget。另外要获取用户的触摸事件，因此需要在build方法中使用Listener这一款widget：

可以看到，通过传入onPointDown、onPointerMove、onPointerUp的回调实现，即可在widget被触摸时收到对应的触摸事件类型和触摸坐标了。接着使用setState召唤框架去把widget树更新一下，需要使用到这个坐标变量的控件就会读到新变量的值，从而做各种绘制了。

我的实现如下：

  @override
  Widget build(BuildContext context) {
    DotPainter painter = DotPainter(_globalPosition);
    return Listener(
      child: CustomPaint(
        size: Size.infinite,
        painter: painter,
        foregroundPainter: painter,
        child: null,
      ),
      onPointerMove: (PointerMoveEvent e) => {
        setState(() {
          _globalPosition = e.localPosition;
        })
      },

    );
  }

2、Canvas的使用：

        在上一步的代码中，有一个DotPainter Widget，这个就是我自定义的CustomPainter，为什么要用这个CustomPainter呢？因为要用Canvas进行绘制，就需要使用CustomPaint这个widget依附到StatefulWidget中，由CustomPaint把Canvas下发到CustomPainter的paint方法中，这样我才能拿到Canvas，在框架被调用setState更新UI树时，把要绘制的东西画到Canvas中，并最终显示到页面上。

        具体代码实现如下：

import 'dart:ui';

import 'package:flutter/material.dart';

class DotPainter extends CustomPainter {
  Offset mGlobalPosition;
  Paint _mPaint = Paint();

  DotPainter(
      this.mGlobalPosition //传入正在触摸的坐标
      );

  @override
  void paint(Canvas canvas, Size size) {
    _mPaint..color = Colors.red
        ..strokeWidth = 100
        ..strokeCap = StrokeCap.round
        ..isAntiAlias = true;
    _drawXyDot(canvas);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    //todo 暂时无脑true
    return true;
  }
  
  void _drawXyDot(Canvas canvas) {
    print('globalPosition == $mGlobalPosition');
    if (mGlobalPosition == null) return;
    canvas.drawPoints(PointMode.points, [mGlobalPosition], _mPaint);
  }



}

其中绘制东西需要使用“画笔”，具体使用方法和安卓差不多，就是设置各种绘制特性而已。

另外shouldRepaint用来控制每次widget树更新的时候，时候重绘这个widget的内容，以免产生多次无用绘制。这里要的就是不停的绘制，所以无脑return true就好了。

当mGlobalPosition被外部更新时，setState触发widget树绘制，此时paint方法被回调，被带来canvas，然后调用我的私有方法drawXyDot，此时我调用canvas的drawPoints方法，在mGlobalPosition记录的坐标处使用mPaint记录的画笔颜色、粗细等属性绘制一个点。反复被调用后，这个过程就成了一个点跟着我的手指移动了。

实际效果：

原本在这里

按着可以拖动到别处：

 flutter跨端调试起来还是挺爽的，写一套UI代码，无论在Android端还是web端的表现都比较一致，但是web端按F12看一下，很明显是想需要加载一套很大的2d引擎才能进行界面绘制，并没有生成h5元素，其表现和真正的网页还是有点不同的，不过也不是什么坏事了。