实际行为:
我应该在横向右模式下实现签名板以及绘制签名的时间戳。然后对视图进行截图,并通过旋转将其以纵向模式保存在文档目录(iOS)或外部目录(Android)中。我成功地使用transform: [{rotate: '90deg"}]css属性和react-native-signature-capture在横向右模式下实现了签名屏幕,使用react-native-view-shot和react-native-view-shot保存了捕获的签名截图以及在本地目录中绘制的签名的时间戳使用 react-native-fs 将其转换为 base64 格式。
但是保存的屏幕截图不是纵向模式,我尝试旋转图像,同时将其保存在文档目录 (iOS) 或外部目录 (Android) 中而不使用任何模块。我还尝试在使用画布上下文 API 保存图像时旋转图像,但无法找到在 react-native 中访问画布以旋转图像的方法,同时将其保存为画布与 HTML DOM 相关。
预期行为:
我应该将与时间戳一起绘制的签名以纵向模式保存在文档目录(iOS)或外部目录(Android)中,如下面的屏幕截图所示。
其他资源:
代码 :
render() {
return (
<View
style={{
flex: 1,
flexDirection: 'row',
overflow: "hidden",
}}>
<StatusBar hidden={true} />
<View
style={{
flex: 0.8,
flexDirection: 'row-reverse',
marginVertical: width / 18,
overflow: "hidden",
}}>
<ViewShot
ref="viewShot"
style={[styles.viewShot, { transform: [{ rotate: this.state.bool && '90deg' }] }]}>
{/* options={{ width: height, height: width }}> */}
<SignatureCapture
style={styles.signature}
ref={sign => …Run Code Online (Sandbox Code Playgroud)