[英]PanResponder X,Y values slightly off on react native app
I am trying to get a handle on understanding how to use Panresponder.我正在尝试了解如何使用 Panresponder。 I am trying to create a 'cross hairs' that show up wherever the user clicks.
我正在尝试创建一个“十字准线”,在用户点击的任何地方都会出现。 I'd like to be able to have it follow the users finger but right now I cant even get it working to show up right where the user taps.
我希望能够让它跟随用户的手指,但现在我什至无法让它显示在用户点击的地方。 Right now its sort of working but the X,Y values are off.
现在它的工作,但 X,Y 值是关闭的。 I cant understand what I am doing wrong.
我无法理解我做错了什么。
I set the initial offset to x:0 and y:0 because I do not care where the previous user clicked.我将初始偏移量设置为 x:0 和 y:0 因为我不在乎前一个用户点击的位置。 I've tried every combination of using locationX/locationY or pageX/pageY, or gesture.x0/gesture.y0.
我已经尝试过使用 locationX/locationY 或 pageX/pageY 或gesture.x0/gesture.y0 的所有组合。
Even weirder, after Ive made at least one click in the box that contains the panhandlers, I can then click below the box to initiate the panhandlers.更奇怪的是,在我至少单击包含 panhandler 的框后,我可以单击框下方来启动 panhandler。 If I click out of the box before clicking inside the box for the first time, the panhandlers wont get called.
如果我在第一次单击框内之前单击框外,则不会调用乞丐。
Any help would be amazing任何帮助都会很棒
Main file主文件
import Line from '../components/Line';
const {width, height} = Dimensions.get('window');
const PanResponderComp = () => {
const pan = useState(new Animated.ValueXY())[0];
const [opacity, setOpacity] = useState(0);
const panResponder = useState(
PanResponder.create({
onStartShouldSetPanResponder: () => true,
// onMoveShouldSetPanResponder: () => true,
onPanResponderGrant: (e, gesture) => {
const {locationX, locationY} = e.nativeEvent;
console.log(locationX);
console.log(locationY);
pan.setOffset({x: 0, y: 0});
pan.setValue({
x: locationX,
y: locationY,
});
setOpacity(1);
},
// onPanResponderMove: (e, gesture) => {
// pan.x.setValue(gesture.dx);
// pan.y.setValue(gesture.dy);
// },
onPanResponderRelease: () => {
console.log('RELEASED');
// pan.flattenOffset();
setOpacity(0);
},
}),
)[0];
return (
<View style={styles.container}>
<View style={styles.chartContainer}>
<Animated.View
{...panResponder.panHandlers}
style={[
{borderWidth: 2, borderColor: 'green'},
StyleSheet.absoluteFill,
]}>
<Animated.View
style={{
transform: [{translateX: pan.x}],
opacity: opacity,
...StyleSheet.absoluteFill,
}}>
<Line y={height} x={0} />
</Animated.View>
<Animated.View
style={{
transform: [{translateY: pan.y}],
opacity: opacity,
...StyleSheet.absoluteFill,
}}>
<Line x={width} y={0} />
</Animated.View>
</Animated.View>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
},
titleText: {
fontSize: 14,
lineHeight: 24,
fontWeight: 'bold',
},
chartContainer: {
width: 400,
height: 400,
borderWidth: 1,
borderColor: 'orange',
},
});
export default PanResponderComp;
Line.js Line.js
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import Svg, {Line} from 'react-native-svg';
export default ({x, y}) => {
// console.log(vertical);
return (
<Svg>
<Line
x1={'0'}
x2={x}
y1={'0'}
y2={y}
stroke={'black'}
strokeWidth={'2'}
strokeDasharray="6 6"
/>
</Svg>
);
};
Figured it out.弄清楚了。 The Animated.View I have wrapped in both components didn't have a set width/height so it was inheriting it from the container.
我包装在两个组件中的 Animated.View 没有设置宽度/高度,因此它是从容器继承的。 This meant I could see the dash lines but there was really a giant box I was moving around.
这意味着我可以看到虚线,但我确实在移动一个巨大的盒子。 Once I set the height/width on each Animated.View I was able to get the click to be spot on
一旦我在每个 Animated.View 上设置了高度/宽度,我就能够获得点击位置
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.