React Native手势缩放（react-native-gesture-handler）焦点偏移问题求助

问题描述 #

双指缩放（pinch-to-zoom）时，两指中间的焦点应保持固定，但当前实现中，初始焦点在红色方块上，放大时方块逐渐偏离焦点，未围绕焦点居中缩放。

核心代码分析 #

处理捏合手势的关键代码如下：

// 共享状态值
const translateX = useSharedValue(screenWidth / 2 - CANVAS_SIZE / 2);
const translateY = useSharedValue(screenHeight / 2 - CANVAS_SIZE / 2);
const scale = useSharedValue(1);
const startScale = useSharedValue(1);
const focalX = useSharedValue(0);
const focalY = useSharedValue(0);

// 捏合手势处理器
const pinchGesture = Gesture.Pinch()
  .onStart((event) => {
    'worklet';
    startScale.value = scale.value;
    focalX.value = event.focalX;
    focalY.value = event.focalY;
    showFocalPoint.value = true;
  })
  .onUpdate((event) => {
    'worklet';

    if (isAnyItemDragging.value) {
      startScale.value = scale.value;
      return;
    }

    const zoomSensitivity = 1;
    const rawScale = 1 + (event.scale - 1) * zoomSensitivity;
    const nextScale = clamp(startScale.value * rawScale, MIN_SCALE, MAX_SCALE);

    const worldX = (focalX.value - translateX.value) / scale.value;
    const worldY = (focalY.value - translateY.value) / scale.value;

    scale.value = nextScale;
    translateX.value = focalX.value - worldX * nextScale;
    translateY.value = focalY.value - worldY * nextScale;
  })
  .onEnd(() => {
    'worklet';
    showFocalPoint.value = false;

    if (scale.value < MIN_SCALE) {
      scale.value = withSpring(MIN_SCALE, { damping: 18, stiffness: 180 });
    } else if (scale.value > MAX_SCALE) {
      scale.value = withSpring(MAX_SCALE, { damping: 18, stiffness: 180 });
    }
  });

// 画布动画样式
const canvasAnimatedStyle = useAnimatedStyle(() => {
  return {
    transform: [
      { translateX: translateX.value },
      { translateY: translateY.value },
      { scale: scale.value },
    ],
  };
});

// 子元素动画样式
const itemAnimatedStyle = useAnimatedStyle(() => {
  return {
    transform: [
      { translateX: translateX.value },
      { translateY: translateY.value },
      { scale: visualScale.value },
    ],
  };
});

问题根源 #

1. 坐标转换基准错误：onUpdate中计算世界坐标时，使用当前scale.value作为基准，而非手势开始时的startScale.value，导致缩放过程中坐标计算偏移。
2. 子元素变换不一致：CanvasItem使用独立的visualScale.value而非画布的scale.value，且变换参数未和画布同步，造成元素与画布缩放不同步。
3. 回弹动画未同步平移：onEnd中仅对scale应用弹簧动画，未同步调整translateX和translateY，导致缩放回弹时焦点偏移。

修复方案 #

1. 修正坐标转换逻辑 #

将世界坐标的计算基准改为手势开始时的startScale.value，确保缩放过程中焦点基准一致：

.onUpdate((event) => {
  'worklet';

  if (isAnyItemDragging.value) {
    startScale.value = scale.value;
    return;
  }

  const zoomSensitivity = 1;
  const rawScale = 1 + (event.scale - 1) * zoomSensitivity;
  const nextScale = clamp(startScale.value * rawScale, MIN_SCALE, MAX_SCALE);

  // 基于手势初始缩放值计算世界坐标
  const worldX = (focalX.value - translateX.value) / startScale.value;
  const worldY = (focalY.value - translateY.value) / startScale.value;

  scale.value = nextScale;
  translateX.value = focalX.value - worldX * nextScale;
  translateY.value = focalY.value - worldY * nextScale;
})

2. 统一子元素变换参数 #

让CanvasItem的动画样式与画布保持完全一致，避免独立缩放导致的偏移：

const itemAnimatedStyle = useAnimatedStyle(() => {
  return {
    transform: [
      { translateX: translateX.value },
      { translateY: translateY.value },
      { scale: scale.value },
    ],
  };
});

若子元素需独立缩放，需在画布缩放基础上叠加，而非替换原有缩放参数。

3. 同步回弹动画的平移调整 #

缩放回弹时，同步计算并调整平移量，保证焦点位置不变：

.onEnd(() => {
  'worklet';
  showFocalPoint.value = false;

  if (scale.value < MIN_SCALE) {
    // 计算回弹后的平移值
    const targetTranslateX = focalX.value - ((focalX.value - translateX.value) / scale.value) * MIN_SCALE;
    const targetTranslateY = focalY.value - ((focalY.value - translateY.value) / scale.value) * MIN_SCALE;
    
    translateX.value = withSpring(targetTranslateX, { damping: 18, stiffness: 180 });
    translateY.value = withSpring(targetTranslateY, { damping: 18, stiffness: 180 });
    scale.value = withSpring(MIN_SCALE, { damping: 18, stiffness: 180 });
  } else if (scale.value > MAX_SCALE) {
    const targetTranslateX = focalX.value - ((focalX.value - translateX.value) / scale.value) * MAX_SCALE;
    const targetTranslateY = focalY.value - ((focalY.value - translateY.value) / scale.value) * MAX_SCALE;
    
    translateX.value = withSpring(targetTranslateX, { damping: 18, stiffness: 180 });
    translateY.value = withSpring(targetTranslateY, { damping: 18, stiffness: 180 });
    scale.value = withSpring(MAX_SCALE, { damping: 18, stiffness: 180 });
  }
})

4. 确认手势焦点坐标准确性 #

确保onStart中获取的event.focalX/event.focalY是相对于画布父容器的坐标，而非画布变换后的坐标。若手势识别器挂载在画布自身，需先转换为父容器坐标。

验证要点 #

• 双指缩放时，红色方块始终保持在两指焦点位置
• 缩放回弹过程中，焦点无偏移
• 拖拽元素与缩放的冲突拦截逻辑正常生效

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