javascript - React-Native:使用 panResponder.panHandlers (nativeElement) 获取可拖动对象的 X 和 Y 坐标

Question

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

https://www.npmjs.com/package/react-native-draggable
在创建我的绘图 View 时，它工作正常，但是在编辑该绘图时，我想将圆形和方形从之前保存的位置移动到新位置，但是当我尝试从DB，我无法获得X和Y的完美位置。

当我调试时，我获取的是对象的触摸位置，而不是对象的 X 和 Y 位置

这是我的代码:

1. 我使用draggable类来创建对象Draggable ,

2. 在我的组件中:

                     <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

Answer 1

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

<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。希望有帮助。