First experience of using fluent canvas

Preface ：

Recent projects need to use Flutter do UI Interface , It involves the operation of drawing ,Flutter I've just been in touch for another week , Not very familiar with , So I'm going to make a small Demo Experience it. , Find the feel .

Demo The goal of ：

Point to where , Where there is a little red dot, follow .

Implementation steps ：

1、 First, this is an activity page , Therefore, first of all, the implementation of the page should inherit StatefulWidget. In addition, it is necessary to obtain the user's touch event , So you need to build Method used in Listener This one widget：

You can see , By passing in onPointDown、onPointerMove、onPointerUp Callback implementation of , Can be in widget When being touched, the corresponding touch event type and touch coordinates are received . Then use setState Summon the frame to widget Update the tree , The control that needs to use this coordinate variable will read the value of the new variable , To do all kinds of drawing .

My realization is as follows ：

  @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 Use ：

        In the code in the previous step , There is one DotPainter Widget, This is my custom CustomPainter, Why use this CustomPainter Well ？ Because of the need to use Canvas Drawing , You need to use CustomPaint This widget Attached to StatefulWidget in , from CustomPaint hold Canvas Send it to CustomPainter Of paint In the method , So I can get it Canvas, Called in the framework setState to update UI Tree time , Draw what you want to draw to Canvas in , And finally displayed on the page .

        The specific code implementation is as follows ：

import 'dart:ui';

import 'package:flutter/material.dart';

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

  DotPainter(
      this.mGlobalPosition // Pass in the coordinates you are touching 
      );

  @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  Temporary anencephaly true
    return true;
  }
  
  void _drawXyDot(Canvas canvas) {
    print('globalPosition == $mGlobalPosition');
    if (mGlobalPosition == null) return;
    canvas.drawPoints(PointMode.points, [mGlobalPosition], _mPaint);
  }



}

Which draw things need to use “ paint brush ”, The specific use method is similar to that of Android , It is just to set various painting properties .

in addition shouldRepaint Used to control every time widget When the tree is updated , When to redraw this widget The content of , So as to avoid multiple useless drawings . What we need here is to keep drawing , So no brain return true Just fine .

When mGlobalPosition When updated externally ,setState Trigger widget Tree drawing , here paint Method called back , Brought canvas, Then call my private base note. drawXyDot, At this point, I call canvas Of drawPoints Method , stay mGlobalPosition Use at recorded coordinates mPaint Recorded brush color 、 Draw a point with attributes such as thickness . After being called repeatedly , This process becomes a point that moves with my finger .

The actual effect ：

It was here

Press to drag elsewhere ：

 flutter Cross end debugging is still very cool , Write a set of UI Code , No matter in Android End or end web The performance of the end is relatively consistent , however web End press F12 to glance at , Obviously, I want to load a large set of 2d The engine can draw the interface , It didn't generate h5 Elements , The performance of the web page is a little different from its real performance , But it's not a bad thing .