16.reactnative屏幕划线功能

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,

}

})