How to initialize matrix values for a Group object? (Following Instagram Stickers tutorial)

[JinxMan25]

Hi,

I'm following the Instagram stickers tutorial by William Candillon (Thanks so much for the tutorials!)

I'm just having trouble initializing the matrix values for the different images I have in a canvas.

What I'm trying to do

Save the position of the image in a canvas (along with translation, rotation, and scale factor) in local storage.

So that I can come back to an image and edit the position of the image without having to do it all over again.

The issue

Not sure which values to save and use to initialize the matrix for the image.

Here is my shortened code:

export const GestureHandler = ({
  matrix: skMatrix,
  dimensions,
  debug,
  index,
  handleDimentionsChange,
}) => {
  const {x, y, width, height} = dimensions;

  const origin = useSharedValue(vec3(0, 0, 0));
  const matrix = useSharedValue(identity4);
  const offset = useSharedValue(identity4);

  useSharedValueEffect(() => {
    skMatrix.current = Skia.Matrix(toMatrix3(matrix.value));
  }, matrix);

  const pan = Gesture.Pan()
    .onChange(e => {
      matrix.value = multiply4(
        Matrix4.translate(e.changeX, e.changeY, 0),
        matrix.value,
      );
    })
    .onEnd(e => {
      handleDimentionsChange(e, 'pan', index);
    });

  const rotate = Gesture.Rotation()
    .onBegin(e => {
      origin.value = [e.anchorX, e.anchorY, 0];
      offset.value = matrix.value;
    })
    .onChange(e => {
      matrix.value = concat(offset.value, origin.value, [
        {rotateZ: e.rotation},
      ]);
    })
    .onEnd(e => {
      handleDimentionsChange(e, 'rotate', index);
    });

  const scale = Gesture.Pinch()
    .onBegin(e => {
      origin.value = [e.focalX, e.focalY, 0];
      offset.value = matrix.value;
    })
    .onChange(e => {
      matrix.value = concat(offset.value, origin.value, [{scale: e.scale}]);
    })
    .onEnd(e => {
      handleDimentionsChange(e, 'pinch', index);
    });

  const style = useAnimatedStyle(() => ({
    position: 'absolute',
    left: x,
    top: y,
    width,
    height,
    backgroundColor: debug ? 'rgba(100, 200, 300, 0.4)' : 'transparent',
    transform: [
      {translateX: -width / 2},
      {translateY: -height / 2},
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      {matrix: matrix.value},
      {translateX: width / 2},
      {translateY: height / 2},
    ],
  }));

  return (
    <GestureDetector gesture={Gesture.Race(scale, rotate, pan)}>
      <Animated.View style={style} />
    </GestureDetector>
  );
};

And then this is the canvas:

<View style={{flex: 1}}>
      <Canvas style={{flex: 1}}>
        <Picture matrix={pictureMatrix} image={image} dimensions={dimensions} />
      </Canvas>
      <GestureHandler
        index={index}
        matrix={pictureMatrix}
        dimensions={PictureDimensions}
        handleDimentionsChange={handleDimentionsChange}
      />
</View>

And this is <Picture>

export const Picture = ({matrix, image, dimensions}) => {
  return (
    <Group matrix={matrix}>
      <Image
        x={0}
        y={0}
        width={dimensions.width}
        height={dimensions.height}
        image={image}
        fit={'contain'}
      />
    </Group>
  );
};