javascript - 带有透明View Scanner的相机(Camera with a transparent View Scanner)

Question

Edit 1 :(编辑1：)

please how can i masks the spaces between the card on camera ?(请问我如何遮掩相机上插卡之间的空间？)

The overlay mask on left side of the card should be in light grey color.(卡左侧的覆盖罩应为浅灰色。) The code down below is a simplified version of the snapshot.(下面的代码是快照的简化版本。) <Camera ref={this.camera} style={styles.camera} flashMode={this.state.flashMode} {...{type, onCameraReady, ratio}} > <SafeAreaView style={[styles.cameraSafeArea]} top> <View style={[styles.header, styles.maskFrame]}> </View> <View style={[{flex: 40}, styles.maskFrame]} ></View> <View style={[styles.grid]}> </View> <View style={[{flex: 32}, styles.maskFrame]} ></View> <View style={[styles.footer, styles.maskFrame]}> <IconButton name="cross" onPress={goBack} /> <TouchableOpacity onPress={notImplementedYet}> <View style={styles.snapButton}> <View style={[styles.innerSnapButton, { backgroundColor: theme.palette.primary }]}> <Icon color="white" name="camera" /> </View> </View> </TouchableOpacity> <IconButton name="flash" onPress={toggleFlash} /> </View> </SafeAreaView> </Camera> My Css :(我的CSS：) camera: { flex: 1 }, cameraSafeArea: { flex: 1, justifyContent: 'flex-start', backgroundColor: StyleGuide.palette.transparent }, header: { flexDirection: "row", justifyContent: "space-between", padding: StyleGuide.spacing.small, }, footer: { flexDirection: "row", justifyContent: "space-around", alignItems: "center", padding: StyleGuide.spacing.small }, grid: { alignItems: 'center', justifyContent: 'space-around', top: 0, left: 0, borderColor: StyleGuide.palette.white, borderWidth: 4, marginLeft: StyleGuide.spacing.small, width: width - (StyleGuide.spacing.small * 2), height: ( width - (StyleGuide.spacing.small * 2) ) * 2 / 3, borderRadius: 5, }, maskFrame: { backgroundColor: 'rgba(1,1,1,0.6) !important', }, maskCenter: { flexDirection: 'row' }, Result Of This Code :(该代码的结果：) I want to mask space between the whiteLine, for example in this photo (RightSide)(我想在whiteLine之间遮盖空间，例如在这张照片中（RightSide）) Any idea how to get this done ?(知道如何完成这项工作吗？)   ask by algo tourist translate from so

Answer 1

you can try something like this:(您可以尝试这样的事情：)

<View style={[{flex: 40}, styles.maskFrame]} ></View> <View style={{ flexDirection: 'row', width: '100%' }> <View style={styles.marginViewStyle}></View> <View style={[styles.grid]}></View> <View style={styles.marginViewStyle}></View> </View> <View style={[{flex: 32}, styles.maskFrame]} ></View> CSS:(CSS：) marginViewStyle: { backgroundColor: 'rgba(1,1,1,0.6)', height: ( width - (StyleGuide.spacing.small * 2) ) * 2 / 3, width: '5%', }, grid: { alignItems: 'center', // justifyContent: 'space-around', top: 0, left: 0, borderColor: StyleGuide.palette.white, borderWidth: 4, // marginLeft: StyleGuide.spacing.small, width: '90%', height: ( width - (StyleGuide.spacing.small * 2) ) * 2 / 3, borderRadius: 5, },