react-native 怎么实时画图

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是异步的,所以没有马上更新,图会慢一些画出来。
请问要怎么改进,使得画的时候可以马上显示出来

阅读 3.6k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题