Question

我有一个场景，它使用了来自react-native-photoView Api的panResonder和<Animated.View>以及<PhotoView>。 panResponder处理<Animated.View>内圆圈的动画，而<PhotoView>处理缩放和缩放背景图像的缩放。 <Animated.View>的圆圈（使用的标记即时）渲染在图像的顶部，但它不包含在其中（它没有嵌套在其中），因为这在Api中是不可能的，所以它们是有一个共同的<View>父母的兄弟姐妹。

我想要实现的目标：我希望能够获得与背景图像相关的标记坐标，如果背景图像被放大，我希望相应地更新标记坐标。因此，如果我将标记按在图像人的头部上方时，我会期望图像上的头部坐标。

<PhotoView> API给出了onTap的回调函数，我可以轻松地从图像中获取正确的缩放x和y值。 <Animated.View>，标记，我可以根据panResponder给出的父视图轻松获取坐标。所以我想象如果我可以为<PhotoView>的onTap函数注册标记的点击，那将触发回调函数，我将获得包含该位置的缩放（x，y）对的事件。

问题：由于标记与<PhotoView>重叠，并且由于它们没有嵌套，因此标记的onTap不会触发<PhotoView>的onTap，这可能是预期的。

以下是我的渲染方法中提到的代码

    return (
    <View style={{ flex: 1 }}>
    <View style={styles.container}>
        <PhotoView
         onViewTap={(data) => }
         onLoadEnd={(e) => }
         onLoadStart={(event) =>}
         source={{ uri:  }}
         onLoad={(event) =>}
         onTap={(event) => console.log(`onTap called: 
         ${event.nativeEvent.x} ${event.nativeEvent.y}`)}
         onScale={() => }
         minimumZoomScale={1}
         maximumZoomScale={3}
         scale={this.state.scale}
         resizeMode={'contain'}
         androidScaleType={'fitXY'}
        />
    <View
        pointerEvents={this.pointer}
        style={styles.draggableContainer}>
        <Animated.View
            {...this.panResponder.panHandlers}
            style={[this.state.xy, styles.circle]}>
        </Animated.View>
    </View>
    </View>
</View>

)

我怎么能解决这个问题？也许我无法触发onTap，我怎么能解决呢？

修改：我尝试创建第二个panResponder（<PhotoView>的父级）来跟踪图像的事件，例如缩放然后拖动图像。如果我可以更新每次触摸的偏移量，我相信我可以获得“更正后的”＃39;如果在触摸标记时给出当前缩放比例和偏移，则为像素。现在我正在玩这种方法，但它不会太好。

setScale()将处理触发缩放的所有背景图片。所以这里我只在缩放发生时才添加侦听器，并设置从传递的事件参数给出的缩放的状态比例。

setScale(e) {
    // Add listener to the panValue of the panResponder
    this.panListener2 = this.state.pan2.addListener((value) => this.currentPanValue2 = value);
    // Set the panResponders values to 0,0 when new touch event is registered
    this.state.pan2.setValue({ x: 0, y: 0 });

    // Set updated scale value of the image
    this.setState({ scaleF: e.scale });
}

然后，我的想法是记录panResponder2的搜索值，这是魔法应该发生的地方，但此时法术能力非常干燥。

this.panResponderImage = PanResponder.create({
    onMoveShouldSetPanResponder: () => true,
    onStartShouldSetPanResponder: () => true,
    onPanResponderMove: Animated.event([null, {
        dx: this.state.pan2.x,
        dy: this.state.pan2.y
    }]),
    onPanResponderRelease: (e) => {
        this.state.pan2.setOffset({
            x: this.currentPanValue2.x, y: this.currentPanValue2.y
        });
        console.log((e.nativeEvent.pageX - (this.currentPanValue2.x)),
             (e.nativeEvent.pageY - this.currentPanValue2.y));

        this.state.pan2.setValue({ x: 0, y: 0 });
    }
});

因此，采用这种新方法，我基本上都试图通过onTap调用完成已经完成的工作，感觉就像浪费了每个人的时间，但是，如果我可以让它工作，我可以忽略这种轻微的烦恼。

你能看到我需要添加x或y的位置吗？你以前做过这样的事情，也许知道我应该怎么做？我必须在panResponderRelease（）中采取哪些必要步骤才能获得最佳值？

感谢您阅读并度过美好的一天！

从重叠的panResponder

0 个答案: