我正在开发一个应用程序,它提供不同形状的设计,例如方形和圆形,我使用了以下库
https://www.npmjs.com/package/react-native-draggable
在创建我的绘图 View 时,它工作正常,但是在编辑该绘图时,我想将圆形和方形从之前保存的位置移动到新位置,但是当我尝试从DB,我无法获得X和Y的完美位置。
当我调试时,我获取的是对象的触摸位置,而不是对象的 X 和 Y 位置
这是我的代码:
我使用draggable类来创建对象Draggable ,
在我的组件中:
<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
中取出:
<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
。希望有帮助。
关于javascript - React-Native:使用 panResponder.panHandlers (nativeElement) 获取可拖动对象的 X 和 Y 坐标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55529217/