持续创作,加速成长!这是我参与「日新计划 6 月更文挑战」的第21天,点击查看活动详情

  • 「手绘板的制作——手绘(1)」
  • 「手绘板的制作——重置与橡皮擦(2)」
  • 「手绘板的制作——命令模式与撤销、重制(3)」
  • 「手绘板的制作——画布缩放(4)」
  • 「手绘板的制作——画布移动(5)」
  • 「手绘板的制作——画布保存(6)」

前言

在这一篇中,我们讲解下画布的缩放,也就是做一个根据手势缩放进行画布缩放的功能。

我们先来梳理下逻辑:

  • 监听手势,当为一根手指的时候,就延续之前的操作,执行手绘操作,当操作为两根手指的时候,则执行缩放功能。
  • 对画布进行缩放

好了,正文开始!

手势缩放

看了下,GestureDetector 里面有 onScaleStart、onScaleUpdate、onScaleEnd 参数,这…这不是缩放开始、缩放过程中、缩放结束的回调吗?Flutter 真方便,都给封装好了。赶紧试下:

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanStart: (details) {
        print("onPanStart:准备开始移动");
        _paintedBoardProvider.onStart(details);
      },
      onPanUpdate: (details) {
        print("onPanUpdate:正在移动");
        _paintedBoardProvider.onUpdate(details);
      },
      onPanEnd: (details) {
        print("onPanDown:移动结束");
        widget._invoker.execute(PaintedCommand(
            _paintedBoardProvider, _paintedBoardProvider.strokes.last));
      },
      onScaleStart: (details) {  // <-  新增
        print("onScaleStart:缩放开始");
      },
      onScaleUpdate:  (details) { // <-  新增
        print("onScaleStart:缩放进行中");
      },
      onScaleEnd:  (details) { // <-  新增
        print("onScaleStart:缩放结束");
      },
      child: CustomPaint(
        painter: MyPainter(_paintedBoardProvider),
        size: Size.infinite,
      ),
    );
  }

运行…

======== Exception caught by widgets library =======================================================
The following assertion was thrown building HandPaintedBoard(dirty, state: _HandPaintedBoardState#7df2e):
Incorrect GestureDetector arguments.
Having both a pan gesture recognizer and a scale gesture recognizer is redundant; scale is a superset of pan.
Just use the scale gesture recognizer.

em…咋报错了…

大意就是,缩放手势包含了平移手势,所以,同时赋值缩放手势和平移手势是多余,直接使用缩放手势即可。

具体报错源码就是:

         final bool havePan = onPanStart != null || onPanUpdate != null || onPanEnd != null;
         final bool haveScale = onScaleStart != null || onScaleUpdate != null || onScaleEnd != null;
         if (havePan || haveScale) {
           if (havePan && haveScale) {
             throw FlutterError.fromParts(<DiagnosticsNode>[
               ErrorSummary('Incorrect GestureDetector arguments.'),
               ErrorDescription(
                 'Having both a pan gesture recognizer and a scale gesture recognizer is redundant; scale is a superset of pan.',
               ),
               ErrorHint('Just use the scale gesture recognizer.'),
             ]);
           }

这能怎么办?解决!

所以,我们需要把 onPanStart、onPanUpdate、onPanEnd 去掉,只保留 onScaleStart、onScaleUpdate、onScaleEnd,然后在缩放的方法里面进行缩放和平移的区分,所以,我们先定义一个枚举:

enum GestureType {
  translate, // 平移
  scale, // 缩放
}

具体区分代码:

class _HandPaintedBoardState extends State<HandPaintedBoard> {
  PaintedBoardProvider get _paintedBoardProvider =>
      widget._paintedBoardProvider;
  // 标识手势
  GestureType _gestureType = GestureType.translate;  // <- 新增
  // 记录缩放开始的缩放
  double _startScale = 1; // <- 新增
class PaintedBoardProvider extends ChangeNotifier {
  // 缩放比例
  double scale = 1;  // <- 新增
      onScaleStart: (details) {
        if (details.pointerCount > 1) {  // 双指
          _gestureType = GestureType.scale;
          _startScale = _paintedBoardProvider.scale;
        } else { // 单指
          _gestureType = GestureType.translate;
          _paintedBoardProvider.onStart(details.localFocalPoint);
        }
      },
      onScaleUpdate: (details) {
        switch (_gestureType) {
          case GestureType.translate:
            _paintedBoardProvider.onUpdate(details.localFocalPoint);
            break;
          case GestureType.scale:
              setState(() {
                _paintedBoardProvider.scale = _startScale + details.scale - 1;
              });
            break;
        }
      },
      onScaleEnd: (details) {
        switch (_gestureType) {
          case GestureType.translate:
              widget._invoker.execute(PaintedCommand(
                  _paintedBoardProvider, _paintedBoardProvider.strokes.last));
            break;
          case GestureType.scale:
            print("onScaleEnd:缩放结束");
            break;
        }
      },

主要的思路其实就是:

  • 在 onScaleStart 的时候,判断是单指还是双指,并且进行记录该状态,后续的 onScaleUpdate、onScaleEnd 都是基于这个单指或者双指进行操作的。
  • 在 onScaleStart 中进行数据记录:
    • 单指:创建 stroke 存储当前绘画信息,便于后续手绘。
    • 双指:记录当前的缩放系数。
  • 在 onScaleUpdate 中进行状态更改:
    • 单指:更新 path 数据,进行手绘刷新。
    • 双指:手势过程的缩放系数 details.scale 是基于 1 进行不断增大的,直至缩放过程结束,所以通过 _startScale + details.scale - 1 就能拿到当前 Widget 正确的缩放系数,_startScale 为在 onScaleStart 中存储的当前缩放系数。
  • 在 onScaleEnd 进行事件的收尾处理:
    • 单指:提交命令。
    • 双指:无需操作。

视图缩放

经过以上步骤,我们可以获取得到手势缩放的系数,但是这个系数如何用于放大视图?

目前一般有两种步骤:

  • 对于 canvas 进行缩放,并且对于 canvas 的绘制内容进行全部缩放,例如画笔原有起点为 (1,1),放大后,需要将画笔原有起点进行更改,可能就要变为 (2,2) 了,这种方式需要更改的比较多,所以我就不在这里实践了,有兴趣的同学可以自己试下。
  • 使用 Transform 进行缩放,也就是把整个 Widget 进行放大,所以 canvas 的坐标系是没有改动的,之前绘制的内容不需要重新绘制,目前我采取的是这种方案。这里有个重点,canvas 的坐标系是没有改动的

所以,使用以下代码即可完成缩放功能:

      child: Transform.scale(
        scale: _paintedBoardProvider.scale,
        child: CustomPaint(
          painter: MyPainter(_paintedBoardProvider),
          size: Size.infinite,
        ),
      ),

所以,这缩放功能就结束了吗?

当然没有这么简单,这后面才是难点。

我们在进行手绘板制作的时候,使用的坐标点是 details.localFocalPoint,它是基于当前视图的坐标点,但是它的 (0,0) 坐标并不是固定为视图的左上角,当视图大于屏幕的时候,它的 (0,0) 是视图与屏幕的交接处,所以,无论使用 Transform 进行如何缩放,对于同一个点击点,其 details.localFocalPoint 的值都是一样的。(这话可能不够严谨,但是对于我当前的 demo 而言,它原有视图就是铺满整个屏幕,无论它使用 Transform 进行缩放多少倍,同个点击点的 details.localFocalPoint 值都是一样的。)

但是,我们特别强调了,在进行缩放后,canvas 的坐标系是没有改动的,只是视图效果放大而已,所以,即使点击的是同一个位置,在 canvas 的坐标系上的位置也是不相同的,所以,我们要对于后续绘画的点进行处理,将 details.localFocalPoint 其转换为基于视图 (0,0) 点的坐标。

手绘板的制作——画布缩放(4)

  • 蓝框为原图,x、y 为原图的坐标系。
  • Transform 默认是基于中心仅放大的,所以,黄框是实际上放大的效果。
  • 若放大前的 details.localFocalPoint 为 (10,10),那么放大后同个点击处的 details.localFocalPoint 仍然为 (10,10)
  • 由于手绘绘制是基于画布 (0,0) 位置的,也就是黄框的左上角,所以,我们需要把 details.localFocalPoint 加上两条绿边距离,才是真正的手绘坐标点。
  • 那两条绿边怎么计算?我们先算 x 坐标的,假设原图大小为 w1,放大后的大小为 w2,那绿边 x = (w2-w1) / 2,而 w2 其实就是 w1 乘以 scale,所以 x = (scale-1) * w1 /2

实际的代码实操:

首先,我们需要存储原有的画布大小:

class PaintedBoardProvider extends ChangeNotifier {
  // 画布原有尺寸
  Size realCanvasSize = Size.zero;

具体的赋值在 MyPainter:

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    paintedBoardProvider.realCanvasSize = size;

剩下的就是换算了:


  /// 移动开始时
  void onStart(Offset localPosition) {
    double startX = localPosition.dx;
    double startY = localPosition.dy;
    final newStroke = Stroke(
      color: isClear ? Colors.transparent : color, 
      width: paintWidth,
      isClear: isClear, 
    );
    newStroke.path.moveTo(
        (startX + (scale - 1) * realCanvasSize.width / 2 ) /
            scale,
        (startY + (scale - 1) * realCanvasSize.height / 2 ) /
            scale);
    _strokes.add(newStroke);
  }
  /// 移动
  void onUpdate(Offset localPosition) {
    _strokes.last.path.lineTo(
        (localPosition.dx +
                (scale - 1) * realCanvasSize.width / 2 ) /
            scale,
        (localPosition.dy +
                (scale - 1) * realCanvasSize.height / 2 ) /
            scale);
    notifyListeners();
  }

可能会有人有疑问,为什么换算后的值还要除以 scale,em…这还是因为 canvas 的坐标系没有更改过,我们的换算都是基于真正进行放大后的换算,但是实际上坐标系没有放大,所以还要除以 scale 转换回来。

清除误差点

在具体的实操上,其实人点击屏幕的时候,由于手指接触屏幕面积较大,所以,经常会出现缩放结束后,还会触发绘制的效果,所以,我们在手指抬起之后,对于绘制数据进行初步清理,也就是单点的误差的全部清除,当然,我这种方式还不够严谨,剩下的大家可以根据具体需求进行调整:

      onScaleEnd: (details) {
        switch (_gestureType) {
          case GestureType.translate:
            // 移除由于误操作导致的小点出现
            final lastBounds = _paintedBoardProvider.strokes.last.path.getBounds();
            if (lastBounds.width < 0.5 && lastBounds.height < 0.5) {
              _paintedBoardProvider.strokes.removeLast();
              _paintedBoardProvider.refreshPaintedBoard();
            } else {
              widget._invoker.execute(PaintedCommand(
                  _paintedBoardProvider, _paintedBoardProvider.strokes.last));
            }
            break;
          case GestureType.scale:
            print("onScaleEnd:缩放结束");
            break;
        }
      },