React-Native:使用 panResponder.panHandlers (nativeElement) 获取可拖动对象的 X 和 Y 坐标 [英] React-Native: Get X and Y coordinates of draggable Object using panResponder.panHandlers (nativeElement)

问题描述

我正在开发一个应用程序，它提供了不同形状的设计，如方形和圆形，我使用了以下库

I am developing an app, which provides the design of Different shapes like Square and Circle, I have used the following Library

当我调试时，我得到的是物体的触摸位置，而不是物体的 X 和 Y 位置

这是我的代码:

1. 我使用可拖动类来创建对象 可拖动、

在我的组件中:

                  <Draggable
                       renderSize={68}
                       renderColor='rad'
                       x={80.80097961425781}
                       y={72.79156494140625}
                       renderText='B'
                       pressDrag={()=>alert('touched!!')}
                       pressDragRelease={({ nativeEvent }) => { console.log(nativeEvent);}}
                       reverse={false}
                   />

这是我的问题:
1.如何从nativeElement、
获取X和Y'nativeElement` 属性是:nativeEvent

ChangedTouches - Array of all touch events that have changed since the last event
identifier - The ID of the touch
locationX - The X position of the touch, relative to the element
locationY - The Y position of the touch, relative to the element
pageX - The X position of the touch, relative to the root element
pageY - The Y position of the touch, relative to the root element
target - The node id of the element receiving the touch event
timestamp - A time identifier for the touch, useful for velocity calculation
touches - Array of all current touches on the screen

推荐答案

我也在一个项目中使用了 react-native-draggable.pageX、pageY 是你实际触摸的坐标，而 locationX、locationY 是你触摸的偏移量对象的左上角.您没有指定如何渲染形状，但是例如，如果您要渲染要拖动的图像，则可以通过获取 (pageX-locationX) 来获得准确的左上角坐标，(pageY-locationY).你可以像这样将它们从 nativeEvent 中拉出来:

I used react-native-draggable in a project too. pageX, pageY are the coordinates of your actual touch, while locationX, locationY are the offset of your touch from the top-left of the object. You didn't specify how you're rendering the shapes, but for instance if you're rendering an image to drag, you can get the exact top-left coordinates by getting (pageX-locationX), (pageY-locationY). And you can pull them out of nativeEvent like this:

<Draggable
  renderSize={68}
  renderColor='rad'
  x={80.80097961425781}
  y={72.79156494140625}
  renderText='B'
  onDragRelease={(e) => {console.log("pageX, pageY = " + e.nativeEvent.pageX + ", " + e.nativeEvent.pageY);
  console.log("locX, locY = " + e.nativeEvent.locationX + ", " + e.nativeEvent.locationY)}}>
  reverse={false}
/>

此外，我将 pressDragRelease 更改为 onDragRelease；不确定你是否将 onDragRelease 包装在你自己的单独函数中，或者你有不同的版本或其他东西，但在我的是 onDrag/onDragRelease.希望有所帮助.

Also, I changed pressDragRelease to onDragRelease; not sure if you wrapped onDragRelease in your own separate function or you have a different version or something, but in mine it's onDrag / onDragRelease. Hope that helps.

这篇关于React-Native:使用 panResponder.panHandlers (nativeElement) 获取可拖动对象的 X 和 Y 坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！