react-native 팔레트

이것은 손으로 쓰고 서명하는 것과 유사하므로art와 제스처 시스템을 도입해야 한다.직접 코드를 넣으면 필요한 친구가 알아서 쓸 수 있어요.

import React, {PureComponent, Component} from 'react';
import {
    StyleSheet,
    View,
    ART,
    Dimensions,
    PanResponder,
} from 'react-native';

const {
    Shape,
    Surface,
    Group,
    Path
} = ART
//       
const {width, height} = Dimensions.get('window');
export default class MyResponder 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 = []
    }


    componentWillMount() {
        this._panResponder = PanResponder.create({
            onStartShouldSetPanResponder: (evt, gestureState) => {
                return true;
            },
            onMoveShouldSetPanResponder: (evt, gestureState) => {
                return true;
            },
            onPanResponderGrant: (evt, gestureState) => {
                //            
                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) => {
            },
        });

    }


    render() {

        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
            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 (
            
                
                    
                        
                    
                
            
        );
    }
}

const styles = StyleSheet.create({
    container: {
        // width: 300,
        // height: 300,
        flex: 1,
    },
});