android - Flutter:同时使用 Pan 和 Scale 手势？

Question

我正在创建一个带有 flutter 的绘图 Canvas ，我想同时使用缩放(用于缩放、平移和旋转)和平移(用于用手指绘图)手势，但 flutter 不允许这样做，因为缩放是平移的超集。有什么解决方法吗？

我尝试创建自己的自定义手势识别器来检测屏幕上的指针数量，以便如果两个指针在短时间内(比如说 1 秒)与屏幕接触，则 Scale 接管，否则 pan 开始使用第一个触摸屏幕的指针。我正在使用 matrix_gesture_detector用于缩放部分的包。

这是我的自定义手势识别器代码

class ScaleAndPanRecognizer extends OneSequenceGestureRecognizer {
  var manager = GestureArenaManager();
  final Function onPanDown;
  final Function onPanUpdate;
  final Function onPanEnd;
  ScaleAndPanRecognizer({
    @required this.onPanDown,
    @required this.onPanUpdate,
    @required this.onPanEnd,
  });

  int numPointers = 0;
  int timeFrame = 1;
  int pointer1;
  int pointer2;
  var time1;
  var time2;
  var position1;

  @override
  void addPointer(PointerDownEvent event) {
    print(numPointers);
    if (numPointers == 0) {
      pointer1 = event.pointer;
      print(pointer1);
      position1 = event.localPosition;
      manager.hold(pointer1); //hold the assignment for this pointer for now
      startTrackingPointer(pointer1);

      numPointers += 1;
      time1 = DateTime.now();
    } else if (numPointers == 1) {
      pointer2 = event.pointer;
      print(pointer2);
      resolvePointer(pointer2, GestureDisposition.rejected);
      time2 = DateTime.now();
      var diff = time2.difference(time1);
      print(diff);
      if (diff <= Duration(seconds: timeFrame)) {
        manager.release(pointer1);
        resolvePointer(pointer1, GestureDisposition.rejected);
      } else {
        resolvePointer(pointer1, GestureDisposition.accepted);
        manager.release(pointer1);
        onPanDown(position1);
      }
      numPointers = 0;
    }
  }

  @override
  void handleEvent(PointerEvent event) {
    if (event is PointerMoveEvent) {
      onPanUpdate(event.localPosition);
    }
    if (event is PointerUpEvent) {
      onPanEnd();
      stopTrackingPointer(event.pointer);
    }
  }

  @override
  String get debugDescription => 'only one pointer recognizer';

  @override
  void didStopTrackingLastPointer(int pointer) {}

}

Answer 1

你要做的是替换onPanUpdate, onPanEnd...与 onScaleUpdate, onScaleEnd... .然后只是代替details.globalPosition 使用 details.focalPoint .您将获得与 Pan 相同的行为，而且您现在可以访问 details.scale或 details.rotation .这是一个例子。
前:

onPanUpdate: (DragUpdateDetails details){
              newPosition = details.globalPosition;
              //scale and rotation missing in pan
            },

后:

onScaleUpdate: (ScaleUpdateDetails details){
              newPosition = details.focalPoint;
              newRotation = details.rotation;
              newScale = details.scale;
              //scale and rotation now available
            },

希望这可以帮助。我也花了一些时间才弄清楚。