SVG Transform / Draggable - PullRequest
Новая
       19

SVG Transform / Draggable

0 голосов
/ 09 октября 2018

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

svg изначально на экране

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

часть svg изменена, однако полигон не следует.

Вот мой код:

const AnimatedPolygon = Animated.createAnimatedComponent(Polygon)

Логика PanResponder: 

this._eventResponder = PanResponder.create({
      //normal stuff here
      onPanResponderGrant: ( e, gesture ) => {
        this.state.eventAnimation.extractOffset()
      },
      onPanResponderMove: (e, gesture) => {
        if (gesture.numberActiveTouches === 2) {
         //handling pinching
        } else {
        Animated.event([ null,
        { dx: this.state.eventAnimation.x, dy: this.state.eventAnimation.y},
      ])(e, gesture)} // function logic continues from here

Вот этот компонент при настройке точек треугольника: 

let leftCornerX = (deviceWidth/2 - 50) - 25 + 100
let leftCornerY = ((sceneHeight + layoutY ) / 2) - 75 - 50 + 100

let rightCornerX = (deviceWidth/2 - 50) + 25 + 100
let rightCornerY = ((sceneHeight + layoutY ) / 2) - 75 - 50 + 100

let bottomX = deviceWidth/2 + 100
let bottomY = ((sceneHeight + layoutY) /2 ) + 100

let points = `${leftCornerX},${leftCornerY}, ${bottomX},${bottomY} ${rightCornerX},${rightCornerY}`

<AnimatedPolygon
   points={points}
   fill="white"
   stroke="black"
   strokeWidth="3"
   transform={{translate: `${eventAnimation.x}, ${eventAnimation.y}`}}
/>

Независимо от того, что я пытаюсь, я не могу получитьмой треугольник, чтобы следовать за моим маленьким речевым пузырем.Я могу console.log мои значения eventAnimation.x и .y и видеть, что они меняются.Это те же значения, которые я использую для перетаскивания своего речевого пузыря, поэтому я знаю, что Animated.Event возвращается правильно.Однако кажется, что мой объект преобразования должен быть неправильно отформатирован, чтобы полигон динамически корректировал исходные точки.

Я научился форматировать объект на основе этих двух сообщений: https://github.com/react-native-community/react-native-svg/issues/88 https://medium.com/@richardrosko/matrix-transform-in-svg-in-react-native-53a9357a811b

К сожалению, ни один из них не привел меня к успеху.Любая помощь с благодарностью.

...