[英]React-Native: Get X and Y coordinates of draggable Object using panResponder.panHandlers (nativeElement)
我正在開發一個應用程序,它提供不同形狀的設計,如方形和圓形,我使用了以下庫
https://www.npmjs.com/package/react-native-draggable
在創建我的繪圖視圖時它工作正常,但在編輯該繪圖時,我想將 Circle 和 Square 從其之前保存的 position 移動到其新的 position,但是當我試圖將我之前的最后一個 position 設置為數據庫,我無法獲得 X 和 Y 的完美 position。
當我調試時,我正在觸摸 object 的 position,而不是 object 的 X 和 Y position
這是我的代碼:
我使用 draggable class 創建了一個 object 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
。 希望有幫助。
您可以在回調的下一個 arguments 中獲取 Draggable 的邊界。
<Draggable
...
onDragRelease={(e, gestureState, bounds) => { console.log(bounds); }}
/>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.