How can I get four corners coordinates from the transformation matrix?

[milindsakhare100]

I want to extract 4 corners and center coordinates of the matrix. The bounding box is made up of a transformation matrix using reanimated3 and same used in skia. For reference please look Stickers example of skia.

[xiaoosnggao]

Same question

[milindsakhare100]

@xiaoosnggao can we do it with skia matrix?

[xiaoosnggao]

@xiaoosnggao can we do it with skia matrix?我们可以使用 Skia Matrix 来做吗？

Understood! If you have any specific questions or need further assistance with selectSticker or anything else, feel free to ask!

The content of selectSticker is as follows:

{
  "id": 1,
  "type": "sticker",
  "style": {
    "transform":{
      "translateX": 100,
      "translateY": 100,
      "scale": 1,
      "scaleX": 1,
      "rotation": 0,
    },
    "size": {
      "width": 100,
      "height": 100,
    },
    "borderWidth": 0,
    "borderColor": "transparent",
  },
  "data": {
    "uri": "",
  },
}

The content of the applyTransformations function:

export function applyTransformations(initialWidth, initialHeight, transform) {
  'worklet';

  const centerX = initialWidth / 2;
  const centerY = initialHeight / 2;

  // 初始矩阵
  let matrix = [
    [1, 0, 0, 0],
    [0, 1, 0, 0],
    [0, 0, 1, 0],
    [0, 0, 0, 1],
  ];

  // 应用变换
  transform.forEach(t => {
    let newMatrix;
    if (t.translateX !== undefined) {
      newMatrix = [
        [1, 0, 0, t.translateX],
        [0, 1, 0, 0],
        [0, 0, 1, 0],
        [0, 0, 0, 1],
      ];
    } else if (t.translateY !== undefined) {
      newMatrix = [
        [1, 0, 0, 0],
        [0, 1, 0, t.translateY],
        [0, 0, 1, 0],
        [0, 0, 0, 1],
      ];
    } else if (t.scale !== undefined) {
      const scale = t.scale;
      // 平移到中心点
      const translateToCenter = [
        [1, 0, 0, -centerX],
        [0, 1, 0, -centerY],
        [0, 0, 1, 0],
        [0, 0, 0, 1],
      ];

      // 缩放矩阵
      const scaleMatrix = [
        [scale, 0, 0, 0],
        [0, scale, 0, 0],
        [0, 0, scale, 0],
        [0, 0, 0, 1],
      ];

      // 从中心点平移回原位置
      const translateBack = [
        [1, 0, 0, centerX],
        [0, 1, 0, centerY],
        [0, 0, 1, 0],
        [0, 0, 0, 1],
      ];

      newMatrix = multiplyMatrices(
        translateBack,
        multiplyMatrices(scaleMatrix, translateToCenter),
      );
    } else if (t.rotateZ !== undefined) {
      const angle = parseFloat(t.rotateZ);

      // 平移到中心点
      const translateToCenter = [
        [1, 0, 0, -centerX],
        [0, 1, 0, -centerY],
        [0, 0, 1, 0],
        [0, 0, 0, 1],
      ];

      // 旋转矩阵
      const rotationMatrix = [
        [Math.cos(angle), -Math.sin(angle), 0, 0],
        [Math.sin(angle), Math.cos(angle), 0, 0],
        [0, 0, 1, 0],
        [0, 0, 0, 1],
      ];

      // 从中心点平移回原位置
      const translateBack = [
        [1, 0, 0, centerX],
        [0, 1, 0, centerY],
        [0, 0, 1, 0],
        [0, 0, 0, 1],
      ];

      newMatrix = multiplyMatrices(
        translateBack,
        multiplyMatrices(rotationMatrix, translateToCenter),
      );
    }

    matrix = multiplyMatrices(matrix, newMatrix);
  });

  // 初始矩形的四个顶点
  const initialPoints = [
    [0, 0, 0, 1],
    [initialWidth, 0, 0, 1],
    [0, initialHeight, 0, 1],
    [initialWidth, initialHeight, 0, 1],
  ];

  // 变换后的顶点坐标
  const transformedPoints = initialPoints.map(point =>
    multiplyMatrixAndPoint(matrix, point),
  );

  // 提取变换后的 x 和 y 坐标
  const transformedCoordinates = transformedPoints.map(point => ({
    x: point[0],
    y: point[1],
  }));

  return {
    transformedCoordinates,
    rotation: Math.atan2(matrix[1][0], matrix[0][0]),
  };
}

You can directly use the matrix above.

[milindsakhare100]

Thank you for the reply,
The content I have is as follows, it's like your selectSticker content, but I have a matrix instead of transform values separately.

matrix=[ 0.29574845615053047, 0, 0, 248.95825033187867, 0, 0.29574845615053047, 0, 190.01839021577126, 0, 0, 1, 0, 0, 0, 0, 1 ]
size={"height": 487, "width": 377}

{"ID":` "2", "Image": {"Matrix": {"matrix": [Object]}, "Params": {"base64Image": " ", "objectId": 5451, "pickImage": " ", "size": [Object]}}, "objectId": 5451}

We can directly use Matrix with Skia components as follow,

<Image image={image2} fit="contain" x={0} y={0} width={size.width} height={size.height} matrix={matrix}> </Image>

So, my question was, can we use the matrix instead of transform values directly or in any other way with your "applyTransformations" function?

I hope you understand, thanks.

[milindsakhare100]

hi @xiaoosnggao could you please share the code for, how you can add sticker and show on canvas? how to add gestureHandler so we can rotate, and scale the sticker?

[milindsakhare100]

Hi @xiaoosnggao , how can we flip the image vertically and horizontally?

Please help
Thanks

[wcandillon]

there is a mapPoint in Matrix.ts that will give you those coordinates. I believe we use it in this example: https://github.com/Shopify/react-native-skia/tree/main/example/src/Examples/FrostedCard

[xiaoosnggao]

"@shopify/react-native-skia": "0.1.237",

First of all, thank you for your response.

The calculated result contains NaN.

[ReedYu]

Maybe it is because the value of rotateZ is not number?

[Glazzes]

@milindsakhare100 @xiaoosnggao If you guys mean getting the xy position of each corner relative to the canvas it's drawn on then it's pretty simple actually:

• Determine where the center of the image is located relative to it's parent.
• Determine the distance between the center of the image and the corners assuming the center of the image is cartesian place, for instance the top right corner distance is a x = imageWidth / 2, y = imageHeight / 2 and bottom right is x = imageWidth / 2, y = -1 * (imageHeight / 2) (This assuming the image is no resizeable)
• Now you must rotate such distances by a 2d rotation matrix like this:

type Vector = {x: number, y: number};

const rotate2d = (distance: Vector, angle: number): Vector => {
  return {
    x: distance.x * Math.cos(angle) - distance.y * Math.sin(angle),
    y: distance.x * Math.sin(angle) + distance.y * Math.cos(angle) 
  }
}

• As the final step add the center position of the image to whatever the rotate 2d function returns.

Pretty much this how you determine the position of a rotated point in space, actually you can follow any glsl tutorial on rotation and it's the same technique.