如何在React Native上缩放相机？

hmae6n7t 于 2023-10-22 发布在 React

关注(0)|答案(1)|浏览(133)

我正在使用Expo构建一个RN应用程序，它使用expo-camera的Camera组件。我正在尝试实现缩放捏功能，这基本上是计算一个数字之间的0（无缩放）和1（最大缩放）的基础上的手势。
MRE：https://snack.expo.dev/@fpicoral/expo-camera-zoom

// from https://stackoverflow.com/a/72524084/10893256
const onPinch = useCallback((event: GestureUpdateEvent<PinchGestureHandlerEventPayload>) => {
        const velocity = event.velocity / 20;

        let newZoom =
            velocity > 0
                ? zoom + event.scale * velocity * (Platform.OS === 'ios' ? 0.01 : 25) 
                : zoom - event.scale * Math.abs(velocity) * (Platform.OS === 'ios' ? 0.02 : 50);

        if (newZoom < 0) newZoom = 0;
        else if (newZoom > 0.5) newZoom = 0.5;

        setZoom(newZoom);
    },
    [zoom, setZoom]
);

这是工作得很好，但问题是缩小。如果你从不让手指离开屏幕，一切都很顺利。但是，如果你放大了很多，举起手指，并试图缩小，它需要大量的捏适当缩小。
这个问题与以下事实有关：如果用户在放大后停止手势，则event.scale将太小。我试着跟踪累积的比例，当手势在放大和缩小之间切换时重置它，但它也没有帮助。

**编辑：**它只在iOS上运行得很好。在Android上，即使有乘数，它也几乎没有放大。当我跟踪累计总和时，iOS和Android都有相同的行为，但两个平台都存在缩小的问题。

react-native

来源：https://stackoverflow.com/questions/76641654/how-to-zoom-camera-on-pinch-on-react-native

1条答案

按热度按时间

4ioopgfo1#

我也遇到过同样的问题。我通过根据最后一次缩放添加缩放因子来解决它（更大的缩放=更大的因子）：

const onPinch = useCallback(
    (event) => {
      const velocity = event.velocity / 20;
      const outFactor = lastZoom * (Platform.OS === 'ios' ? 40 : 15);

      let newZoom =
        velocity > 0
          ? zoom + event.scale * velocity * (Platform.OS === 'ios' ? 0.01 : 25)
          : zoom - (event.scale * (outFactor || 1)) * Math.abs(velocity) * (Platform.OS === 'ios' ? 0.02 : 50);

      if (newZoom < 0) newZoom = 0;
      else if (newZoom > 0.7) newZoom = 0.7;

      setZoom(newZoom);
    },
    [zoom, setZoom, lastZoom, setLastZoom]
  );

  const onPinchEnd = useCallback(
    (event) => {
      setLastZoom(zoom);
    },
    [zoom, setLastZoom]
  );

  const pinchGesture = useMemo(
    () => Gesture.Pinch().onUpdate(onPinch).onEnd(onPinchEnd),
    [onPinch, onPinchEnd]
  );

希望它能帮助

赞(0）回复(0）举报 2023-10-22

我来回答

如何在React Native上缩放相机？

1条答案

相关问题

热门标签

最新问答