flutter 白板工具Twitter IconFacebook Icon

flutter 白板工具

Categories:

flutter

平常桌面上都放着一些草稿纸，因为经常要整理思路、画画草图啥的。这不是电子时代嘛，就觉得在手机、pad上也可以这样写写画画，我看了有很多这种类似的app，功能很简单就一个白板，直接就可以画，工具栏大概包括选画笔颜色、选笔尖大小、选橡皮擦等。

于是我用Flutter简单实现了一个，效果看下图，可以选颜色和笔尖大小：

主要思路

整体看这个功能实现不难，其实就是一个普通画板，画板我们可以用一个CustomPainter来做，关于CustomPainter我前面有文章有介绍过《Flutter 学习6：绘制动画》 。

CustomPainter 根据拖动手势，把手指滑动过的坐标画出来，其实就是把点连成线，并且得知道当时的画笔颜色和大小。

那拖动手势当然用GestureDetector啦，拖动的时候用onPanUpdate事件来获取坐标并且把坐标连成线，每次绘画结束就用拖动结束事件来处理onPanEnd 。

具体实现

Flutter一直在主推他的Material主题，跟Google他们自己的Android非常一致，这个主题还提供了很多Widget，给开发App提供了很多便利。但是Flutter官方其实还有一个IOS的主题cupertino，这次我就试着用这个cupertino主题开发这个白板工具。

cupertino主题

主题用法跟Material一样，MaterialApp对应这里用CupertinoApp，Scaffold对应这里用CupertinoPageScaffold。当然还有很多比如CupertinoThemeData、CupertinoNavigationBar、CupertinoDialog等等，但是比起Material主题这里的Widget要少的多了。

• CupertinoNavigationBar

• CupertinoAlertDialog

• CupertinoActionSheet

• CupertinoPicker

• CupertinoSegmentedControl

CustomPainter

前面思路中说过这里主要是画线，但是因为线条颜色、宽度有变化，所以必须的记录下当时的颜色和大小。于是我写了一个实体类来保存这些数据：

 class WPPainter {
  Offset point;
  Color color;
  double strokeWidth;
  WPPainter(this.point, this.color, this.strokeWidth);
}

然后CustomPainter处理绘画就简单了：

final List<WPPainter> points;

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = new Paint()..strokeCap = StrokeCap.round;
    for (var i = 0; i < points.length - 1; i++) {
    //null是线条结束标志
      if (points[i] != null && points[i + 1] != null) {
        var wp = points[i];
        var nextWp = points[i + 1];
        paint.color = wp.color;
        paint.strokeWidth = wp.strokeWidth;
        canvas.drawLine(wp.point, nextWp.point, paint);
      }
    }
  }

  @override
  bool shouldRepaint(_MyPainter oldDelegate) {
    return oldDelegate.points != this.points;
  }

上面代码注释说的线条结束标志就是前面思路中介绍的onPanEnd的时候，我们在points中添加一个null，这样就不会把所有的线都连起来了。

添加拖动事件：

onPanUpdate: (detail) {
//计算坐标
    RenderBox referenceBox = context.findRenderObject();
    Offset localPosition =
        referenceBox.globalToLocal(detail.globalPosition大专栏  flutter 白板工具Twitter IconFacebook Icon"o">);

    setState(() {
    //添加坐标
      _points.add(WPPainter(
            localPosition, _paintColor, _paintStokeWidth));
    });
},
//结束标记
onPanEnd: (detail) => _points.add(null),

colorPicker颜色选择器

颜色选择器我这里是弹出一个Dialog，跟原来Material主题下一样，这里也提供了showDialog的方法，不过叫做：showCupertinoDialog

showCupertinoDialog(
    context: context,
    builder: (_) {
      return CupertinoAlertDialog(
        title: Text("选择颜色"),
        content: ColorChooseWidget((color) {
          _tempChooseColor = color;
        }, selectedColor),
        actions: <Widget>[
          CupertinoDialogAction(
            child: Text('取消'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
          CupertinoDialogAction(
            child: Text('确定'),
            isDefaultAction: true,
            onPressed: () {
              chooseColor(_tempChooseColor);
              Navigator.of(context).pop();
            },
          )
        ],
      );
    },
  );

弹出的Dialog内容ColorChooseWidget就是一个GridView 。这里的GridView我本来想根据屏幕大小控制Dialog宽度，然后根据宽度计算GridView的crossAxisCount就是一行放几个颜色。但是后来发现原来CupertinoAlertDialog的宽度是固定死的270