Question

我使用的是expo软件包中的Camera，但是相机视图失真有问题。我的手机的2:1比率是非标准比率。

当我使用相机的getSupportedRatiosAsync方法时，会得到各种比率，例如1:1，2:1，4:3，16:9，但是只有{ {1}}看起来不错。

如何选择适合设备自然分辨率的比例？有没有办法访问设备的首选比率？还是周围有什么漏洞，例如总是选择2:1并让摄像头组件增加黑边，而实际设备的比例却不适合16:9？

编辑：

我的手机分辨率为16:9，因此正确的比率应为2196x1080。但是由于2:1

，我无法提出一个可以计算2196x1080 => 2:1的函数

即使对于这种愚蠢的分辨率，有什么方法可以推断出最佳的比率吗？

Answer 1

在Samsung S9上，18.5:9的屏幕纵横比非常接近2:1。而且，如果您不hide the navigation bar，则专用于相机预览的区域可能会更靠近被推荐的2:1。

但是，如果您要在所有设备上使用不同的屏幕长宽比和支持的相机长宽比，则必须将预览裁剪到窗口中，例如， https://github.com/waitopiggu/rn-camera-android-cropping-test。

关于选择最佳相机长宽比，您可能无法完全匹配；让我们找到最接近我们想要的那个：

const wantedRatio = height/width
var bestRatio = 0;
var bestRatioError = 100000;
for (i in ratios) {
    const r = ratios[i].split(":")
    if (abs(wantedRatio - r[0]/r[1]) < bestRatioError) {
        bestRatioError = abs(wantedRatio - r[0]/r[1])
        bestRatio = ratios[i]
    }
}

this.setState({
    bestRatio
})

Answer 2

首先使用https://facebook.github.io/react-native/docs/dimensions获取设备尺寸（分辨率，定量）。

然后您可以尝试以下操作：

import React from 'react';
import {
    Platform
} from 'react-native';
import {
    RNCamera
} from 'react-native-camera';

const DESIRED_RATIO = "2:1"; //suppose the result of first step is 2:1

class MyCameraComponent extends Component {
    state = {}

    prepareRatio = async () => {
        if (Platform.OS === 'android' && this.cam) {
            const ratios = await this.cam.getSupportedRatiosAsync();

            // See if the current device has your desired ratio, otherwise get the maximum supported one
            // Usually the last element of "ratios" is the maximum supported ratio
            const ratio = ratios.find((ratio) => ratio === DESIRED_RATIO) || ratios[ratios.length - 1];

            this.setState({
                ratio
            });
        }
    }

    render() {
        return ( <
            RNCamera ref = {
                (cam) => this.cam = cam
            }
            onCameraReady = {
                this.prepareRatio
            } // You can only get the supported ratios when the camera is mounted
            ratio = {
                this.state.ratio
            }
            />
        );
    }
}

React Native Android获取设备的比例

2 个答案: