Expo Camera返回的条码/QR码cornerPoints与实际边缘不匹配问题求助

嘿，我完全懂你现在的困扰——用Expo Camera扫条码或QR码时，返回的cornerPoints总是和屏幕上实际码的边缘对不上，导致你画的红点位置跑偏，对吧？我之前帮不少开发者排查过这类问题，主要是几个常见的适配“坑”在作怪，咱们一步步来解决：

1. 核心原因：相机预览尺寸与屏幕尺寸的适配偏差 #

Expo Camera返回的cornerPoints坐标是基于相机原始预览分辨率的，而屏幕显示的预览通常会被拉伸、裁剪或居中适配，直接用原始坐标肯定会错位。咱们需要做一次坐标转换：

首先，你得获取两个关键尺寸：

• 相机组件在屏幕上的实际显示尺寸
• 相机当前使用的预览分辨率

然后通过比例计算，把原始坐标映射到屏幕坐标系上。这里给你一段可复用的代码示例：

import { useState, useEffect } from 'react';
import { View, StyleSheet } from 'react-native';
import { Camera } from 'expo-camera';

export default function BarcodeScanner() {
  const [screenSize, setScreenSize] = useState({ width: 0, height: 0 });
  const [cameraPreviewSize, setCameraPreviewSize] = useState({ width: 0, height: 0 });
  const [cornerPoints, setCornerPoints] = useState([]);
  const [backDevice, setBackDevice] = useState(null);

  // 获取相机权限与设备信息
  useEffect(() => {
    const loadCamera = async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      if (status === 'granted') {
        const devices = await Camera.getAvailableCameraDevices();
        const backCam = devices.find(d => d.position === 'back');
        setBackDevice(backCam);
      }
    };
    loadCamera();
  }, []);

  // 监听相机组件的屏幕布局
  const handleCameraLayout = (event) => {
    const { width, height } = event.nativeEvent.layout;
    setScreenSize({ width, height });
    // 匹配最接近屏幕比例的预览分辨率，减少拉伸
    if (backDevice) {
      const bestFit = backDevice.videoResolution.find(size => 
        Math.abs(size.width/size.height - width/height) < 0.1
      );
      setCameraPreviewSize(bestFit || backDevice.videoResolution[0]);
    }
  };

  // 坐标转换核心函数
  const transformCornerPoints = (rawPoints) => {
    if (!screenSize.width || !cameraPreviewSize.width) return [];

    // 计算等比缩放比例，避免拉伸变形
    const scaleX = screenSize.width / cameraPreviewSize.width;
    const scaleY = screenSize.height / cameraPreviewSize.height;
    const scale = Math.min(scaleX, scaleY);

    // 计算预览居中时的偏移量
    const offsetX = (screenSize.width - cameraPreviewSize.width * scale) / 2;
    const offsetY = (screenSize.height - cameraPreviewSize.height * scale) / 2;

    // 转换每个角点的坐标
    return rawPoints.map(point => ({
      x: point.x * scale + offsetX,
      y: point.y * scale + offsetY,
    }));
  };

  // 条码扫描回调
  const handleBarcodeScanned = ({ barcodes }) => {
    if (barcodes.length > 0) {
      const transformedPoints = transformCornerPoints(barcodes[0].cornerPoints);
      setCornerPoints(transformedPoints);
    }
  };

  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device={backDevice}
      onLayout={handleCameraLayout}
      onBarcodeScanned={handleBarcodeScanned}
    >
      {/* 渲染转换后的红点 */}
      {cornerPoints.map((point, idx) => (
        <View
          key={idx}
          style={{
            position: 'absolute',
            left: point.x - 5, // 让红点中心对准角点
            top: point.y - 5,
            width: 10,
            height: 10,
            backgroundColor: 'red',
            borderRadius: 5,
          }}
        />
      ))}
    </Camera>
  );
}

2. 别忘了处理屏幕方向的影响 #

如果你的App支持横竖屏切换，相机的原始坐标是基于横屏的，竖屏模式下需要额外做旋转转换。比如竖屏时，坐标转换可以这样调整：

// 在transformCornerPoints里添加方向处理逻辑
const transformForOrientation = (point, previewSize) => {
  // 假设当前是竖屏模式
  return {
    x: previewSize.height - point.y,
    y: point.x,
  };
};

你可以通过expo-screen-orientation获取当前屏幕方向，再动态应用对应的转换规则。

3. 检查Expo Camera版本 #

有些旧版本的expo-camera存在cornerPoints返回不准确的bug，建议升级到最新稳定版：

npx expo install expo-camera@latest

最后提醒下，测试时尽量用不同大小、不同距离的条码/QR码，确保转换后的坐标在各种场景下都能准确对齐。

备注：内容来源于stack exchange，提问作者Marcelo_M