Flutter中如何实现画布双指平移与缩放手势功能

核心思路是通过自定义MultiDragGestureRecognizer子类，仅响应双指及以上的触摸事件，完全避开和单指绘图手势的冲突，具体实现步骤如下：

步骤1：定义画布变换状态与临时缓存变量 #

在State类中先声明需要用到的变量：

// 画布当前偏移量
Offset _offset = Offset.zero;
// 画布当前缩放系数
double _scale = 1.0;
// 手势开始时的初始偏移量
Offset _initialOffset = Offset.zero;
// 手势开始时的初始缩放系数
double _initialScale = 1.0;
// 双指触点的初始中点坐标
Offset _initialFocalPoint = Offset.zero;

步骤2：自定义双指手势识别器 #

继承MultiDragGestureRecognizer，实现仅响应双指操作的逻辑：

class TwoFingerGestureRecognizer extends MultiDragGestureRecognizer {
  final Function(Offset offset, double scale) onUpdate;
  final VoidCallback onEnd;

  TwoFingerGestureRecognizer({
    required this.onUpdate,
    required this.onEnd,
  });

  final Map<int, Offset> _pointerLocations = {};

  @override
  void addPointer(PointerDownEvent event) {
    _pointerLocations[event.pointer] = event.position;
    // 仅当触点数等于2的时候才处理手势，单指直接不注册
    if (_pointerLocations.length == 2) {
      // 计算初始双指中点、初始缩放、初始偏移
      final points = _pointerLocations.values.toList();
      _initialFocalPoint = (points[0] + points[1]) / 2;
      _initialScale = _scale;
      _initialOffset = _offset;
      startGesture(event.pointer);
    }
    super.addPointer(event);
  }

  @override
  void handleEvent(PointerEvent event) {
    if (event is PointerMoveEvent) {
      _pointerLocations[event.pointer] = event.position;
      // 始终保持双指才响应更新
      if (_pointerLocations.length == 2) {
        final points = _pointerLocations.values.toList();
        // 计算当前双指中点
        final currentFocalPoint = (points[0] + points[1]) / 2;
        // 计算缩放比例
        final currentDistance = (points[0] - points[1]).distance;
        final initialDistance = (_pointerLocations.values.firstWhere((p) => p != points[0]) - points[0]).distance;
        final scale = _initialScale * (currentDistance / initialDistance);
        // 计算偏移量
        final offset = _initialOffset + (currentFocalPoint - _initialFocalPoint);
        // 回调更新状态
        onUpdate(offset, scale.clamp(0.5, 5.0)); // 这里可以加缩放边界限制
      }
    } else if (event is PointerUpEvent || event is PointerCancelEvent) {
      _pointerLocations.remove(event.pointer);
      if (_pointerLocations.length < 2) {
        onEnd();
      }
    }
    super.handleEvent(event);
  }

  @override
  String get debugDescription => 'TwoFingerGestureRecognizer';
}

步骤3：在页面中绑定手势 #

使用RawGestureDetector包裹你的画布组件，配置自定义的手势识别器即可，单指的绘图手势可以正常叠加，不会产生冲突：

@override
Widget build(BuildContext context) {
  return RawGestureDetector(
    gestures: {
      TwoFingerGestureRecognizer: GestureRecognizerFactoryWithHandlers<TwoFingerGestureRecognizer>(
        () => TwoFingerGestureRecognizer(
          onUpdate: (offset, scale) {
            setState(() {
              _offset = offset;
              _scale = scale;
            });
          },
          onEnd: () {
            // 手势结束后的处理逻辑按需添加
          },
        ),
        (instance) {},
      ),
      // 你的单指绘图手势识别器可以正常加在这里，互不影响
    },
    child: CustomPaint(
      painter: YourCanvasPainter(
        offset: _offset,
        scale: _scale,
      ),
    ),
  );
}

注意点 #

• 可以根据业务需求调整缩放的上下限，上面示例是限制在0.5倍到5倍之间
• 如果需要处理双指旋转逻辑，只需要在手势更新时额外计算两个点的角度差即可
• 画布绘制时要注意先应用缩放再应用偏移，避免变换顺序错误导致的位移异常

内容的提问来源于stack exchange，提问作者xtiandirige