Блог

Я разрабатываю приложение, которое обеспечивает дизайн различных форм, таких как квадрат и круг, я использовал следующую библиотеку

https://www.npmjs.com/package/react-native-draggable

Во время создания моего чертежного представления он работает нормально, но во время редактирования этого чертежа я хочу переместить круг и квадрат из предыдущей сохраненной позиции в новую позицию, но когда я пытаюсь установить свою предыдущую последнюю позицию из базы данных, я не могу получить идеальное положение X и Y.

При отладке я получаю положение касания объекта, а не положение X и Y объекта

это мой код :

1. Я использовал класс 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. Как я могу получить X и Y из nativeElement ,

свойство ‘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 . Надеюсь, это поможет.

вы можете получить границы вашего перетаскиваемого объекта в следующих аргументах вашего обратного вызова.

 <Draggable
  ...
  onDragRelease={(e, gestureState, bounds) => { console.log(bounds); }}
/>