Expo Camera 内部焦点形状

Question

我正在尝试在我的实时相机中设置焦点区域形状，如下图所示（圆圈是拍摄图像的地方，而圆圈外的所有内容都变暗）。我目前正在使用 expo 相机，具体如下面的代码所示。有谁知道我如何在此之上添加一个圆圈或正方形，以便用户确切知道在何处拍摄对象的照片。任何帮助将不胜感激。

<View style={{ flex: 1 }}>
          <Camera
            style={{ flex: 1 }}
            type={this.state.type}
            flashMode={this.state.flashMode}
            ref={(camera) => (this.camera = camera)}
            zoom={this.state.cameraZoomValue}
            autoFocus={Camera.Constants.AutoFocus.on}
            whiteBalance={Camera.Constants.WhiteBalance.auto}
            faceDetectorSettings={{
              mode: FaceDetector.Constants.Mode.accurate,
              detectLandmarks: FaceDetector.Constants.Landmarks.all,
              runClassifications: FaceDetector.Constants.Classifications.all,
              minDetectionInterval: 500,
              tracking: true,
            }}
            onFacesDetected={this.onFacesDetected}
            onFacesDetectionError={this.onFacesDetectionError}
          >
</Camera>
</View>

Answer 1

您可以尝试添加一些带有边框（上、左、右、下）的视图并设置绝对位置来实现它。这是我的代码（不是很干净），但我认为它可以帮助。

import { StyleSheet, View ,Dimensions} from "react-native";

class App extends Component {
  render() {
    const { height, width } = Dimensions.get("window");
    const maskRowHeight = Math.round((height - 200) / 20);
    const maskColWidth = (width - 200) / 2;
    return (
      <View style={styles.app}>
       <View style={styles.maskOutter}>
              <View
                style={[
                  { flex: maskRowHeight },
                  styles.maskRow,
                  styles.maskFrame
                ]}
              />

              <View style={[{ flex: 40 }, styles.maskCenter]}>
                <View style={[{ width: maskColWidth }, styles.maskFrame]} />
                <View style={styles.maskInner}>
                  <View
                    style={{
                      position: "absolute",
                      top: 0,
                      left: 0,
                      width: "100%",
                      height: 10,
                      borderColor: "#FFFFFF",
                      borderTopWidth: 1,
                    }}
                  />
                  <View
                    style={{
                      position: "absolute",
                      bottom: 0,
                      left: 0,
                      width: "100%",
                      height: 10,
                      borderColor: "#FFFFFF",
                      borderBottomWidth: 1,
                    }}
                  />
                  <View
                    style={{
                      position: "absolute",
                      top: 0,
                      left: 0,
                      width: 20,
                      height: "100%",
                      borderColor: "#FFFFFF",
                      borderLeftWidth: 1,
                    }}
                  />
                  <View
                    style={{
                      position: "absolute",
                      top: 0,
                      right: 0,
                      width: 20,
                      height: "100%",
                      borderColor: "#FFFFFF",
                      borderRightWidth: 1,
                    }}
                  />
                  <View
                    style={{
                      position: "absolute",
                      top: 0,
                      left: 0,
                      width: 30,
                      height: 30,
                      borderColor: "#00BED6",
                      borderTopWidth: 4,
                      borderLeftWidth: 4
                    }}
                  />
                  <View
                    style={{
                      position: "absolute",
                      top: 0,
                      right: 0,
                      width: 30,
                      height: 30,
                      borderColor: "#00BED6",
                      borderTopWidth: 4,
                      borderRightWidth: 4
                    }}
                  />
                  <View
                    style={{
                      position: "absolute",
                      bottom: 0,
                      left: 0,
                      width: 30,
                      height: 30,
                      borderColor: "#00BED6",
                      borderBottomWidth: 4,
                      borderLeftWidth: 4
                    }}
                  />
                  <View
                    style={{
                      position: "absolute",
                      bottom: 0,
                      right: 0,
                      width: 30,
                      height: 30,
                      borderColor: "#00BED6",
                      borderBottomWidth: 4,
                      borderRightWidth: 4
                    }}
                  />
                </View>
                <View style={[{ width: maskColWidth }, styles.maskFrame]} />
              </View>
              <View
                style={[
                  { flex: maskRowHeight },
                  styles.maskRow,
                  styles.maskFrame
                ]}
              >                
              </View>
            </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  app: {    
    flex:1
  },
  cameraView: {
    flex: 1,
    justifyContent: "flex-start"
  },
  maskOutter: {
    position: "absolute",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%",
    alignItems: "center",
    justifyContent: "space-around"
  },
  maskInner: {
    width: 300,
    backgroundColor: "transparent"    
  },
  maskFrame: {    
    backgroundColor: "#1C355E",
    opacity: 0.7
  },
  maskRow: {
    width: "100%"
  },
  maskCenter: { flexDirection: "row" },
  rectangleText: {
    justifyContent: "center",
    alignItems: "center",
    width: "100%",
    flex: 1,
    textAlign: "center",
    color: "white"
  }
});

export default App;

看起来像这样...

你可以根据需要更改颜色。

Code on sandbox

Expo Camera 内部焦点形状

Focus Shape Inside Expo Camera

javascript

camera

react-native

expo