我正在尝试在实时摄影机中像下面的图片那样设置对焦区域的形状(圆圈是人们拍摄图像的地方,而圆圈外的所有内容都会变暗)。我目前正按照以下代码中的显示方式正确使用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>
答案 0 :(得分: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;
您可以根据需要更改颜色。