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元素,其表现和真正的网页还是有点不同的,不过也不是什么坏事了。

 


原文连接:https://blog.csdn.net/cjzjolly/article/details/124304533

相关推荐

看完这篇,你也可以搞定有趣的动态曲线绘制

Flutter 绘制探索 | 箭头端点的设计

极简的成本实现Flutter静态资源多渠道定制

Flutter 小技巧之优化使用的 BuildContext

Flutter ConstraintLayout(约束布局)完全指南

Flutter 2 商城App实战指南(支持Null safety)

利用Flutter开发了一个类似微信可运行小程序的App

为什么说 Compose 的声明式代码最简洁 ?Compose\u002FReact\u002FFlutter\u002FSwiftUI 语法对比

[Flutter] 认识Zone和异常处理

GetX状态管理的实现机制原理剖析

你真的敢落地Flutter桌面端吗?

Dart基本语法

Flutter Cupertino 教程:如何构建外观和感觉原生的 iOS 应用

【基于Flutter&Flame 的飞机大战开发笔记】展示面板及重新开始菜单

抢先体验! 在浏览器里写 Flutter 是一种什么体验?

由点汇聚成字的动效炫极了

【基于Flutter&Flame 的飞机大战开发笔记】利用bloc管理游戏状态

Flutter 绘制探索 | 来一起画箭头吧

【Flutter入坑】Mac + VS Code + Android真机环境搭建

【基于Flutter&Flame 的飞机大战开发笔记】子弹升级和补给