import React, {PureComponent, Component} from 'react';
import {
StyleSheet,
View,
ART,
Dimensions,
PanResponder,
AppRegistry,
Navigator,
BackAndroid,
Platform,
TouchableOpacity,
Text
} from 'react-native';
const {
Shape,
Surface,
Group,
Path
} = ART
//获取屏幕的宽高
const {width, height} = Dimensions.get('window');
export default class LineDrawing extends PureComponent {
constructor(props) {
super(props);
this.state = {
//用于更新界面
lastX: 0,
};
//每次移动的临时数组
this.MousePostion = {
firstX:0, //起点 X 坐标
firstY:0,// 起点 Y 坐标
x: 0, //经过路径的x坐标
y: 0 //经过路径的y坐标
}
//path 全部路径数组
this.MousePostions = []
}
shouldComponentUpdate(nextProps,nextState){
//lastX|state|用于更新界面
let stateChange = [];
let propsChange = [];
this.changes = '[';
for(let key in this.state) {
if(this.state[key]!=nextState[key]){
stateChange.push(key);
}
}
for(let key in this.props) {
if(this.props[key]!=nextProps[key]){
propsChange.push(key);
}
}
for(let i=0;i<stateChange.length;i++){
let key = "state."+stateChange[i];
if(i<stateChange.length-1){
key += ","
}
this.changes += key;
}
for(let i=0;i<propsChange.length;i++){
let key = "props."+propsChange[i];
if(i<propsChange.length-1){
key += ","
}
this.changes += key;
}
this.changes+=']';
return true;
}
componentWillUpdate = () => {
this.startTime = new Date().getTime();
}
componentDidUpdate = () => {
let timestamp = new Date().getTime();
let dt = timestamp-this.startTime;
// console.log(">>> 文件名称:"+this.path+", 改变的参数名:"+this.changes+", 变化时间:"+dt.toString());
dt += 'ms';
let param = 'bbb';
RunMachine.collectLog(this.path,this.changes,dt,param);
}
componentWillMount() {
this._panResponder = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => {
return true;
},
onMoveShouldSetPanResponder: (evt, gestureState) => {
return true;
},
onPanResponderGrant: (evt, gestureState) => {
//手指按下时的画笔起点坐标
// this.tempfirstX = (evt.nativeEvent.pageX-300)
// this.tempFirstY = (evt.nativeEvent.pageY-150)
this.tempfirstX = (evt.nativeEvent.pageX)
this.tempFirstY = (evt.nativeEvent.pageY)
},//激活时做的动作
onPanResponderMove: (evt, gestureState) => {
//
this.MousePostion = {
firstX:this.tempfirstX,
firstY:this.tempFirstY,
x: this.tempfirstX + gestureState.dx,
y: this.tempFirstY + gestureState.dy
}
this.MousePostions.push(this.MousePostion);
//更新界面
this.setState({
lastX: this.MousePostions[0].x + gestureState.dx,
})
}, //移动时作出的动作
onPanResponderRelease: (evt, gestureState) => {
},///动作释放后做的动作
onPanResponderTerminate: (evt, gestureState) => {
},
});
}
componentDidMount(){
BackAndroid.addEventListener('hardwareBackPress',()=>{
return true;
});
}
render() {
// console.log(this.MousePostions.length+"this.MousePostions.length");
const path = new Path();
for (let i = 0; i < this.MousePostions.length; i++) {
let tempFistX = this.MousePostions[i].firstX
let tempFistY = this.MousePostions[i].firstY
let tempX = this.MousePostions[i].x
let tempY = this.MousePostions[i].y
// console.log(tempFistX+":tempFistX,"+tempFistY+":tempFistY,"+tempX+":tempX,"+tempY+":tempY,");
if (i == 0) {
path.moveTo(tempFistX, tempFistY)
path.lineTo(tempX, tempY)
path.close();
} else {
let tempFistX_1 = this.MousePostions[i-1].firstX
if(tempFistX==tempFistX_1){
let tempX_1 = this.MousePostions[i - 1].x
let tempY_1 = this.MousePostions[i - 1].y
path.moveTo(tempX_1, tempY_1)
path.lineTo(tempX, tempY)
path.close();
}else {
path.moveTo(tempFistX, tempFistY)
path.lineTo(tempX, tempY)
path.close();
}
}
}
return (
<View style={styles.container} {...this._panResponder.panHandlers} >
<Svgs key={`key-home_bg`} icon={GlobalThemeSvg.home_bg} size="100%" style={[styles.backgroundSvg]}></Svgs>
<Surface width={width} height={height}>
<Group>
<Shape d={path} stroke="#FFFFFF" strokeWidth={1}/>
</Group>
</Surface>
<TouchableOpacity style={styles.TextView} onPress={()=>this.props.navigation.goBack()}>
<Text style={styles.TextStyle}>退出</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
// backgroundColor:'#000000'
},
backgroundSvg: {
position: 'absolute',
zIndex: -1,
width: '100%',
height: '100%'
},
TextStyle:{
color:'#FFFFFF',
fontSize: 30
},
TextView:{
position: "absolute",
left:540,
top:600,
padding:70,
}
})