React Native Pinch手势缩放位置偏移问题求助

我在PinchGestureHandler内嵌套PanGestureHandler实现了可缩放的多方向滚动视图，基础功能正常，但存在缩放定位异常：用户缩放时，视图并未在手指下方放大，而是偏移到其他位置。

现有代码 #

视图代码 #

<PinchGestureHandler
          simultaneousHandlers={[panRef]}
          ref={pinchRef}
          onGestureEvent={pinchGestureHandler}>
          <Animated.View style={animatedStyle}>
            <PanGestureHandler
              simultaneousHandlers={[pinchRef]}
              ref={panRef}
            onGestureEvent={panGestureHandler}></PanGestureHandler>
        </Animated.View>
        </PinchGestureHandler>

手势处理器代码 #

const translateX = useSharedValue(0);
const translateY = useSharedValue(0);
const scale = useSharedValue(1);
const panRef = useRef();
const pinchRef = useRef();

const panGestureHandler = useAnimatedGestureHandler({
  onStart: (_, ctx) => {
    ctx.startX = translateX.value;
    ctx.startY = translateY.value;
  },
  onActive: (event, ctx) => {
    translateX.value = ctx.startX + event.translationX;
    translateY.value = ctx.startY + event.translationY;
  },
  onEnd: (event, ctx) => {
    translateX.value = withDecay({
      velocity: event.velocityX,
      deceleration: 0.99,
    });
    translateY.value = withDecay({
      velocity: event.velocityY,
      deceleration: 0.99,
    });
  },
});

const pinchGestureHandler = useAnimatedGestureHandler({
  onStart: (_, ctx) => {
    ctx.startScale = scale.value;
  },
  onActive: (event, ctx) => {
    scale.value = ctx.startScale * event.scale;
  },
  onEnd: (event, ctx) => {
    scale.value = withSpring(Math.min(Math.max(scale.value, 1), 3));
  },
});

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

已尝试方案 #

曾尝试加入焦点位置调整逻辑，但缩放位置仍与手指位置偏差较大：

const pinchGestureHandler = useAnimatedGestureHandler({
    onStart: (_, ctx) => {
      ctx.startScale = scale.value;
      ctx.startTranslateX = translateX.value;
      ctx.startTranslateY = translateY.value;
    },
    onActive: (event, ctx) => {
      scale.value = ctx.startScale * event.scale;

      const focalX = event.focalX;
      const focalY = event.focalY;
      
      // Adjust translations
      translateX.value = ctx.startTranslateX + (1 - event.scale) * (focalX - ctx.startTranslateX);
      translateY.value = ctx.startTranslateY + (1 - event.scale) * (focalY - ctx.startTranslateY);
    },
    onEnd: (_) => {
      scale.value = withSpring(Math.min(Math.max(scale.value, 1), 3));
    },
});

解决方法 #

问题核心在于焦点坐标的坐标系转换：event.focalX/focalY是基于屏幕的绝对坐标，而视图的位移是相对自身初始位置的，需要结合当前缩放比例和容器偏移来计算正确的调整值。

修改pinchGestureHandler的逻辑，步骤如下：

1. 在onStart阶段，记录焦点相对于视图当前位置的坐标（而非绝对屏幕坐标）
2. 在onActive阶段，基于缩放比例的变化，计算需要调整的位移，确保焦点位置始终在手指下方

调整后的代码：

const pinchGestureHandler = useAnimatedGestureHandler({
  onStart: (event, ctx) => {
    ctx.startScale = scale.value;
    ctx.startTranslateX = translateX.value;
    ctx.startTranslateY = translateY.value;
    // 计算焦点相对于视图左上角的初始位置（已考虑当前位移）
    ctx.focalOffsetX = event.focalX - ctx.startTranslateX;
    ctx.focalOffsetY = event.focalY - ctx.startTranslateY;
  },
  onActive: (event, ctx) => {
    const currentScale = ctx.startScale * event.scale;
    scale.value = currentScale;

    // 计算缩放后，焦点位置应该对应的视图位移
    const targetTranslateX = event.focalX - ctx.focalOffsetX * currentScale;
    const targetTranslateY = event.focalY - ctx.focalOffsetY * currentScale;

    translateX.value = targetTranslateX;
    translateY.value = targetTranslateY;
  },
  onEnd: (_) => {
    scale.value = withSpring(Math.min(Math.max(scale.value, 1), 3));
    // 结束时保持位移，不需要额外调整
  },
});

同时需要注意：

• 确保PanGestureHandler的onActive逻辑不受缩放影响，因为平移的translationX/Y是相对手势起始点的，无需额外转换
• 动画顺序：transform数组中先执行scale再执行translate会导致位移被缩放，所以保持现有顺序（先translate后scale）是正确的，上述逻辑也基于此顺序编写

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