Aligning React native Component with Canvas Line Component

[hewad-mubariz]

I have a Drawing Board and user can draw lines from one Point to another.
as You see in the picture the black Lines are Canvas Line and the green Lines are Animated.View component now I want to align the view exactly in same direction with the line to provide some partial touch wrapper for Canvas Line Component.
Is there Any way to achieve this.
I did the same for Rect Component Using Matrixes.

Here is What I did so far

    onStart: ({x, y}) => {
      offsetX.current = x - rectX.current;
      offsetY.current = y - rectY.current;
      canvas.current?.drawLine(x, y, x, y, paint);
    },
    onActive: ({x, y}) => {
      canvas.current?.drawLine(offsetX.current, offsetY.current, x, y, paint);
    },
    onEnd: ({x, y}) => {
      canvas.current?.drawLine(offsetX.current, offsetY.current, x, y, paint);
      const newLine = {
        x0: offsetX.current,
        y0: offsetY.current,
        x1: x,
        y1: y,
        matrix: ValueApi.createValue(Skia.Matrix()),
      };
      dispatch(saveLine(newLine));
    },
  });

 //Line Component
const Line = ({line, matrix}: Props) => {
  return (
    <Group transform={[{translateX: x}, {translateY: y}]}>
      <Group matrix={matrix}>
        <Line
          p1={vec(line.x0, line.y0)}
          p2={vec(line.x1, line.y1)}
          strokeWidth={5}
        />
      </Group>
    </Group>
  );
};

//Animated.View To handle Partial Transform And Click 

export const PartialView = ({
  matrix: skMatrix,
  line,
  debug,
}: GestureHandlerProps) => {
  const {width, height} = {width: 8, height: 0};
  const matrix = useSharedValue(identity4);
  const lineLenght = Math.sqrt(
    Math.pow(line.x0 - line.x1, 2) + Math.pow(line.y0 - line.y1, 2),
  );
  const origin = useSharedValue(vec3(0, 0, 0));

  useSharedValueEffect(() => {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    skMatrix.current = Skia.Matrix(toMatrix3(matrix.value) as any);
  }, matrix);
  const offset = useSharedValue(identity4);

  const pan = Gesture.Pan().onChange(e => {
    matrix.value = multiply4(
      Matrix4.translate(e.changeX, e.changeY, 0),
      matrix.value,
    );
  });
  const angle = Math.atan2(line.y1 - line.y0, line.x1 - line.x0);


  angle > 0 ? line.x0 : line.x1;
  const style = useAnimatedStyle(() => ({
    position: 'absolute',
    width: width,
    height: lineLenght,
    backgroundColor: debug ? 'rgba(100, 200, 300, 0.4)' : 'green',
    transform: [
      {translateX: angle > 0 ? line.x0 : line.x1},
      {translateY: angle > 0 ? line.y0 : line.y1},
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      {matrix: matrix.value as any},
    ],
  }));
  return (
    <GestureDetector gesture={Gesture.Race(pan, rotate)}>
      <Animated.View style={[style]} />
    </GestureDetector>
  );
};