Как пользователь может установить положение водяного знака на изображении, используя response-native-image-marker, response-native? - PullRequest
Новая
       28

Как пользователь может установить положение водяного знака на изображении, используя response-native-image-marker, response-native?

0 голосов
/ 29 марта 2020

Я создаю приложение на реагирующем языке, в котором пользователь может выбрать изображение из средства выбора изображений, после чего он / она может установить водяной знак на изображении. Сейчас я использую реагирующую нативную сборку изображений введите описание ссылки здесь Эта библиотека предоставляет X: расстояние слева, Y: расстояние сверху. Теперь помогите мне установить положение водяного знака в зависимости от ввода пользователя. Я попробовал с пан-ответчиком. вот мой код 

class SetPosition extends Component {
constructor(props) {
    super(props);
    this.state = {
        image: this.props.navigation.getParam('image'),
        name: this.props.navigation.getParam('name'),
        currentPanValue: { x: 0, y: 0 },
        pan: { x: 0, y: 0 },
        obj: '',
    };

    Image.getSize(this.state.image.uri, (width, height) => {
        console.log(`The image dimensions are ${width}x${height} ${Dimensions.get('window').width}x${Dimensions.get('window').height}`);

        diheight = (Dimensions.get('window').height / Dimensions.get('window').width) * width
        console.log('dih',diheight)
      }, (error) => {
        console.error(`Couldn't get the image size: ${error.message}`);
      });

    const position = new Animated.ValueXY();
    this.panResponder = PanResponder.create({
        onStartShouldSetPanResponder: () => true,
        onPanResponderMove: (e, gesture) => {
            console.log(gesture)



            position.setValue({ x: gesture.dx, y: gesture.dy })
            this.setState({
                pan: position
            })
        },
        onPanResponderRelease: (e, gesture) => {
            this.state.currentPanValue.x += this.state.pan.x._value;
            this.state.currentPanValue.y += this.state.pan.y._value;

            this.state.pan.setOffset({ x: this.state.currentPanValue.x, y: this.state.currentPanValue.y });
            this.state.pan.setValue({ x: 0, y: 0 });

            // console.log(gesture.dx,'data')


        }

    })
    this.position = position


}

submit = () =>{
    console.log(this.state.name)
    AsyncStorage.setItem(this.state.name, JSON.stringify({ ...this.state.pan })).then(data => {
        console.log('tom', data)
        this.props.navigation.goBack()

    });
}

render() {
    console.log('position',this.state.pan)
    return (
        <View style={styles.container}>
            <Animated.View style={this.position.getLayout()} {...this.panResponder.panHandlers}>

                <View style={styles.positionView}>

                </View>

            </Animated.View>
            <Image source={this.state.image && this.state.image}
                style={{
                    width: Dimensions.get('window').width,
                    resizeMode: "contain",
                    height: '100%',
                    backgroundColor:'black',

                }} />

                <View style={styles.btnView}>
                <TouchableOpacity onPress={() => this.submit()} style={styles.button}>
                    <Text style={{fontSize:24,color:'white'}}>
                        Done
                    </Text>
                </TouchableOpacity>
                </View>






            {/* </ImageBackground> */}
        </View>
    );
}

}

...