Skip to content

Instantly share code, notes, and snippets.

@aryaminus

aryaminus/rn-sketch-canvas.js

Last active August 28, 2018 03:06
Show Gist options
  • Save aryaminus/f509d4db43ef4555f93d4e7776ad659b to your computer and use it in GitHub Desktop.
Save aryaminus/f509d4db43ef4555f93d4e7776ad659b to your computer and use it in GitHub Desktop.
Download ZIP
sketch_hub store from async
Raw
rn-sketch-canvas.js
import React, { Component } from "react";
import {
StyleSheet,
Text,
View,
Alert,
TouchableOpacity,
Platform,
AsyncStorage
} from "react-native";
import RNSketchCanvas from "@terrylinla/react-native-sketch-canvas";
import { SketchCanvas } from "@terrylinla/react-native-sketch-canvas";
var check = [];
type Props = {};
class Sketch extends Component<Props> {
messagesRef = null;
static navigationOptions = {
headerStyle: {
backgroundColor: "#fff",
elevation: null
},
header: null
};
constructor(props) {
super(props);
this.state = {
example: 0,
color: "#FF0000",
thickness: 5,
message: "",
photoPath: null,
checkpath: ""
};
this.asyncer = this.asyncer.bind(this);
}
state = {
messages: []
};
takePicture = async function() {
if (this.camera) {
const options = { quality: 0.5, base64: true };
const data = await this.camera.takePictureAsync(options);
this.setState({
photoPath: data.uri.replace("file://", "")
});
}
};
async componentDidMount() {
const paaths = await AsyncStorage.getItem("paths");
check = JSON.parse(paaths);
console.log(check);
this.setState({
checkpath: paaths
});
//console.log("ya" + this.state.checkpath);
}
asyncer = async function() {
await AsyncStorage.setItem("paths", this.state.checkpath);
};
render() {
return (
<View style={styles.container}>
{this.state.example === 0 && (
<View style={{ flex: 1, flexDirection: "row" }}>
<View style={{ flex: 1, flexDirection: "column" }}>
<View
style={{
flexDirection: "row",
justifyContent: "space-between"
}}
>
<TouchableOpacity
style={styles.functionButton}
onPress={() => {
this.setState({ example: 0 });
}}
>
<Text style={{ color: "white" }}>Close</Text>
</TouchableOpacity>
<View style={{ flexDirection: "row" }}>
<TouchableOpacity
style={styles.functionButton}
onPress={() => {
this.setState({ thickness: 10 });
}}
>
<Text style={{ color: "white" }}>Thick</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.functionButton}
onPress={() => {
this.setState({ thickness: 5 });
}}
>
<Text style={{ color: "white" }}>Thin</Text>
</TouchableOpacity>
</View>
</View>
<SketchCanvas
ref={ref => {
this.canvas = ref;
var cpath = {};
cpath = JSON.parse(this.state.checkpath);
//console.log("itder");
console.log(check);
//this.state.checkpath;
console.log(JSON.parse(this.state.checkpath));
this.canvas.addPath(check);
}}
user={"user1"}
style={{ flex: 1 }}
strokeColor={this.state.color}
strokeWidth={this.state.thickness}
onStrokeStart={() => {
//console.log (JSON.parse(this.state.checkpath));
//this.canvas.addPath(JSON.parse(this.state.checkpath));
this.setState({ message: "Start" });
}}
onStrokeChanged={() => {
this.setState({ message: "Changing" });
}}
onStrokeEnd={path => {
//console.log(path);
this.setState({ message: "End" });
}}
onPathsChange={pathsCount => {
console.log("pathsCount", pathsCount);
}}
/>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center"
}}
>
<View style={{ flexDirection: "row" }}>
<TouchableOpacity
style={[styles.functionButton, { backgroundColor: "red" }]}
onPress={() => {
this.setState({ color: "#FF0000" });
}}
>
<Text style={{ color: "white" }}>Red</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
styles.functionButton,
{ backgroundColor: "black" }
]}
onPress={() => {
this.setState({ color: "#000000" });
}}
>
<Text style={{ color: "white" }}>Black</Text>
</TouchableOpacity>
</View>
<Text style={{ marginRight: 8, fontSize: 20 }}>
{this.state.message}
</Text>
<TouchableOpacity
style={[
styles.functionButton,
{ backgroundColor: "black", width: 90 }
]}
onPress={() => {
var value = JSON.stringify(this.canvas.getPaths());
this.setState({
checkpath: value
});
//console.log("log" + this.state.checkpath);
//Alert.alert(JSON.stringify(this.canvas.getPaths()));
this.asyncer();
/*this.canvas.getBase64("jpg", false, (err, result) => {
//console.log(result);
});*/
}}
>
<Text style={{ color: "white" }}>Get Paths</Text>
</TouchableOpacity>
</View>
</View>
</View>
)}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
strokeColorButton: {
marginHorizontal: 2.5,
marginVertical: 8,
width: 30,
height: 30,
borderRadius: 15
},
strokeWidthButton: {
marginHorizontal: 2.5,
marginVertical: 8,
width: 30,
height: 30,
borderRadius: 15,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#39579A"
},
functionButton: {
marginHorizontal: 2.5,
marginVertical: 8,
height: 30,
width: 60,
backgroundColor: "#39579A",
justifyContent: "center",
alignItems: "center",
borderRadius: 5
},
cameraContainer: {
flex: 1,
flexDirection: "column",
backgroundColor: "black",
alignSelf: "stretch"
},
preview: {
flex: 1,
justifyContent: "flex-end"
},
capture: {
flex: 0,
backgroundColor: "#fff",
borderRadius: 5,
padding: 15,
paddingHorizontal: 20,
alignSelf: "center",
margin: 20
}
});
export default Sketch;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment