Flutter拖拽组件旋转后平移吸附功能异常问题求助

我Fork了一个Flutter包，用来在画布上实现可拖拽组件，以此创建包含图片、文本和贴纸的布局。我给组件的平移和旋转加了吸附功能，方便用户快速居中或对齐，但平移吸附在组件旋转后失效了——计算出的当前位置和目标吸附位置的偏移量无法正确把组件移到吸附点，旋转功能则正常工作。

现有代码 #

平移计算函数 #

Matrix4 _translate(Offset translation) {
    var dx = translation.dx;
    var dy = translation.dy;

    double tx = matrix[12];
    double ty = matrix[13];

    Size size = context.size!;
    double rotation = atan2(matrix[1], matrix[0]);

    double preRotationCenterX = (tx - size.width / 2) / recordOldScale;
    double preRotationCenterY = (ty - size.height / 2) / recordOldScale;

    double centerX = cos(-rotation) * preRotationCenterX -
        sin(-rotation) * preRotationCenterY +
        (size.width / 2);

    double centerY = sin(-rotation) * preRotationCenterX +
        cos(-rotation) * preRotationCenterY +
        (size.height / 2);

    for (var snapPosition
        in widget.stickerWidgetConfig.translationXSnapValues) {
      if (absoluteError(centerX + dy, snapPosition) <=
          widget.stickerWidgetConfig.translationSnapThreshold) {
        dx = snapPosition - centerX;
      }
    }

    for (var snapPosition
        in widget.stickerWidgetConfig.translationYSnapValues) {
      if (absoluteError(centerY + dy, snapPosition) <=
          widget.stickerWidgetConfig.translationSnapThreshold) {
        dy = snapPosition - centerY;
      }
    }

    Matrix4 translationMatrix =
        Matrix4(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, dx, dy, 0, 1);

    return translationMatrix;
  }

旋转计算函数 #

Matrix4 _rotate(double angle, Offset focalPoint) {
    double toBeRotated = 0;
    var array = matrix.applyToVector3Array([0, 0, 0, 1, 0, 0]);
    Offset delta = Offset(array[3] - array[0], array[4] - array[1]);
    double rotation = delta.direction;
    double deltaAngle = rotationUpdater.update(angle);

    for (var snapPosition in widget.stickerWidgetConfig.rotationSnapValues) {
      if (snapPosition > 180) {
        snapPosition = 180 - snapPosition;
      }
      snapPosition = radians(snapPosition);

      if (absoluteError((rotation + deltaAngle), snapPosition) >
          widget.stickerWidgetConfig.rotationSnapThreshold) {
        toBeRotated = deltaAngle;
      } else if (rotation != snapPosition &&
          absoluteError((rotation + deltaAngle), snapPosition) <=
              widget.stickerWidgetConfig.rotationSnapThreshold) {
        toBeRotated = snapPosition - rotation;
        break;
      } else {
        toBeRotated = 0;
        break;
      }
    }

    double c = cos(toBeRotated);
    double s = sin(toBeRotated);

    double dx = (1 - c) * focalPoint.dx + s * focalPoint.dy;
    double dy = (1 - c) * focalPoint.dy - s * focalPoint.dx;

    return Matrix4(c, s, 0, 0, -s, c, 0, 0, 0, 0, 1, 0, dx, dy, 0, 1);
  }

手势更新处理 #

void onScaleUpdate(ScaleUpdateDetails details) {
    // Handle translation.
    if (widget.shouldTranslate) {
      Offset translationDelta = translationUpdater.update(details.focalPoint);
      matrix = _translate(translationDelta) * matrix;
    }

    final focalPointAlignment = widget.focalPointAlignment;
    final focalPoint = focalPointAlignment == null
        ? details.localFocalPoint
        : focalPointAlignment.alongSize(context.size!);

    // Handle scaling.
    if (widget.shouldScale && details.scale != 1.0) {
      double sc = recordOldScale * details.scale;
      if (sc > widget.minScale && sc < widget.maxScale) {
        recordScale = sc;
        double scaleDelta = scaleUpdater.update(details.scale);
        matrix = _scale(scaleDelta, focalPoint) * matrix;
      }
    }

    // Handle rotation.
    if (widget.shouldRotate && details.rotation != 0.0) {
      matrix = _rotate(details.rotation, focalPoint) * matrix;
    }
  }

问题根源 #

1. 坐标系转换错误：原代码试图通过逆旋转计算组件中心，但逻辑混乱，没有正确区分屏幕坐标系和组件本地坐标系的关系，旋转后偏移量计算完全错位。
2. 变量混用：X轴吸附判断时错误使用了centerX + dy（把Y轴偏移加到了X轴中心上），逻辑完全颠倒。
3. 矩阵乘法顺序错误：_translate(translationDelta) * matrix是平移矩阵左乘，这会让平移操作在组件的本地坐标系下执行，而旋转后本地坐标系和屏幕坐标系不重合，导致平移方向和预期不符。

修复后的平移函数 #

Matrix4 _translate(Offset translation) {
  var dx = translation.dx;
  var dy = translation.dy;

  final size = context.size!;

  // 获取组件中心在屏幕坐标系的当前位置
  final localCenter = Offset(size.width / 2, size.height / 2);
  final screenCenter = matrix.transform(localCenter);

  // 计算拖拽后的临时中心位置
  final tempScreenCenter = screenCenter + Offset(dx, dy);

  // X轴吸附处理
  for (final snapX in widget.stickerWidgetConfig.translationXSnapValues) {
    if (absoluteError(tempScreenCenter.dx, snapX) <= widget.stickerWidgetConfig.translationSnapThreshold) {
      dx = snapX - screenCenter.dx;
      break;
    }
  }

  // Y轴吸附处理
  for (final snapY in widget.stickerWidgetConfig.translationYSnapValues) {
    if (absoluteError(tempScreenCenter.dy, snapY) <= widget.stickerWidgetConfig.translationSnapThreshold) {
      dy = snapY - screenCenter.dy;
      break;
    }
  }

  // 直接在现有矩阵上执行平移（屏幕坐标系下）
  return matrix.clone()..translate(dx, dy);
}

修复说明 #

• 直接基于屏幕坐标系计算组件中心，避免复杂且容易出错的旋转坐标系转换
• 修正了X/Y轴吸附判断的变量混用问题
• 使用matrix.clone().translate(dx, dy)替代手动创建平移矩阵，确保平移操作在屏幕坐标系下执行，旋转后也能正确对齐
• 增加break语句，找到匹配的吸附点后立即停止遍历，提升性能

内容的提问来源于stack exchange，提问作者Ruben Röhner