import React from 'react';
import {
Component,
StyleSheet,
Text,
View,
ScrollView,
ART,
Dimensions,
TouchableWithoutFeedback
} from 'react-native';
const {height, width} = Dimensions.get('window');
export default class DrawingEntry extends React.Component {
constructor(props){
super(props);
this.state={
shapeList:[
],
}
this.drawPath=null;
this.offsetX=0;
this.offsetY=0;
}
drawStart=(e)=>{
let px=e.nativeEvent.pageX;
let py=e.nativeEvent.pageY;
let lx=e.nativeEvent.locationX;
let ly=e.nativeEvent.locationY;
this.offsetX=lx-px;//因为e.nativeEvent.locationX,locationY在移动的时候没有改变
this.offsetX=ly-py;
this.drawPath=new ART.Path().moveTo(lx,ly);
}
drawMove=(e)=>{
let x=e.nativeEvent.pageX+this.offsetX;
let y=e.nativeEvent.pageY+this.offsetY;
this.drawPath.lineTo(x,y)
this.setState(({shapeList})=>{
shapeList.push(this.drawPath)
return ({shapeList})
})
}
drawEnd=(e)=>{
this.drawPath.close();
}
render() {
const {shapeList}=this.state;
const shapeListRender=shapeList.map((item,index)=>{
return (
<ART.Shape
d={item}
key={index}
stroke = '#FFFFFF'
strokeWidth ={ 5}
/>
)
})
return (
<View style={styles.flex}>
<ART.Surface width={width} height={height-50} >
<ART.Group>
{shapeListRender}
</ART.Group>
</ART.Surface>
<View
style={styles.drawBoard}
onStartShouldSetResponder={() => true}
onMoveShouldSetResponder={()=> true}
onResponderGrant={this.drawStart}
onResponderMove={this.drawMove}
onResponderRelease={this.drawEnd}
></View>
</View>
)
}
}
const styles=StyleSheet.create({
flex:{
flex:1,
},
drawBoard:{
width,
height:height-50,
zIndex:999,
position:'absolute',
}
})
我是这样做的,但是因为setstate是异步的,所以没有马上更新,图会慢一些画出来。
请问要怎么改进,使得画的时候可以马上显示出来