前言:
最近项目需要使用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元素,其表现和真正的网页还是有点不同的,不过也不是什么坏事了。