How to animate movement of a single point of a Line or a Polygon?

[adil-tanveer888]

I would like to know how I can animate the movement of a single point of a Line or a Polygon as the user drags them on the screen. I am using Reanimated shared values, React native Gesture handler and Skia Line, Skia Path for polygons.

Here is the sample code that I am trying to implement:

import { Canvas, Line } from "@shopify/react-native-skia";
import { GestureDetector, Gesture } from "react-native-gesture-handler";
import { useSharedValue } from "react-native-reanimated";

export const HelloWorld = () => {
 const beginPoint = useSharedValue({x: 0, y: 0});
 const translateX = useSharedValue(0);
 const translateY = useSharedValue(0);

 const gesture = Gesture.Pan()
   .onBegin((e) => {
      beginPoint.value = {x: e.x, y: e.y};
   })
   .onChange((e) => {
     translateX.value += e.changeX;
     translateY.value += e.changeY;
   });

 return (
   <GestureDetector gesture={gesture}>
       <Canvas style={{ flex: 1 }}>
          <Line
             p1={{x: 0, y: 0}}
             p2={{x: 100, y: 100}
             style="stroke"
             strokeWidth={3}
           />
       </Canvas>
   </GestureDetector>
 );
};

How can I move just one point of the line? I am capturing the amount translated but it seems I cannot use shared values in the line component. I can use matrix to translate the whole line but I just want one point to be moved as the user drags that point.

Extending on this would be to move just one point of an n-sided polygon. I am currently using Skia Path for the polygon. How can I animate the movement of any point of the Skia Path an arbitrary distance based on the pan gesture by the user?