Реагировать на собственный ScrollView scrollTo диагональной позиции - PullRequest
Новая
       12

Реагировать на собственный ScrollView scrollTo диагональной позиции

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

Так что у меня есть ScrollView, который должен иметь возможность прокрутки по горизонтали, вертикали и диагонали. Также должно быть возможно получить масштабирование и получить коэффициент масштабирования из него. Мой вид выглядит так: 

<View {...this._panResponder.panHandlers}>
      <ScrollView bounces={false} directionalLockEnabled={false} scrollEnabled={false} horizontal={true} ref='verticalScroll'>
       {Content wich is larger than the deviceScreen on x and y axis}
      </ScrollView>
</View>

Я пытаюсь реализовать диагональную прокрутку с помощью функции scrollTo(). Но когда я добавляю в него значения x и y, он прокручивается только горизонтально или вертикально, но не по диагонали. Внутри panResponder я определяю движение смахивания и вызываю там метод. Если есть более одного касания, я получаю коэффициент масштабирования, который используется для отображения содержимого внутри scrollView. PanResponder выглядит следующим образом: 

PanResponder.create({
        onStartShouldSetPanResponder: (evt, gestureState) => true,
        onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
        onMoveShouldSetPanResponder: (evt, gestureState) => true,
        onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

        onPanResponderGrant: (evt, gestureState) => {
        },
        onPanResponderMove: (evt, gestureState) => {
            const touches = evt.nativeEvent.touches;
            if (touches.length === 2) {
                this.processPinch(
                    touches[0].pageX,
                    touches[0].pageY,
                    touches[1].pageX,
                    touches[1].pageY
                );
            } else if (touches.length === 1) {
                this.processMove(touches[0].pageX, touches[0].pageY);
            }
        },
        onPanResponderTerminationRequest: (evt, gestureState) => true,
        onPanResponderRelease: (evt, gestureState) => {
            this.setState({
                isZooming: false,
            })
        },
        onPanResponderTerminate: (evt, gestureState) => { },
        onShouldBlockNativeResponder: (evt, gestureState) => {
            return true;
        },
    });

processPinch = (x1, y1, x2, y2) => {
    var distance = this.calcDistance(x1, y1, x2, y2);

    if (!this.state.isZooming) {
        this.setState({
            isZooming: true,
            initialDistance: distance,
        });
    } else {
        var touchZoom = distance / this.state.initialDistance;
        console.log("Zooming; " + touchZoom);
        this.setState({
            pixelPerMilliSecond: this.state.pixelPerMilliSecond * touchZoom,
        });
    }
}

processMove = (x, y) => {
    if (!this.state.isMoving) {
        this.setState({
            isMoving: true,
            initialX: x,
            initialY: y,
        });
    } else {
        var distanceX = this.state.initialX - x;
        var distanceY = this.state.initialY - y;
        this.setState({
            graphX: this.state.graphX + distanceX,
            graphY: this.state.graphY + distanceY,
            isMoving: false,
        })
        this.refs.verticalScroll.scrollTo({x: this.state.graphX, y: this.state.graphY, animated: true})
    }
}

Я не могу импортировать любую новую библиотеку, поэтому было бы очень полезно, если бы она работала с panresponder. Спасибо.

...