Tengo las siguientes coordenadas de recorte en relación con esta imagen girada:

Las coordenadas son relativas al alto y ancho de la imagen girada. El origen de la rotación es el centro del rectángulo de recorte. La rotación del cultivo es conocida.

Mi objetivo aquí es usar la llamada drawImage y la información de recorte anterior y renderizar la siguiente imagen:

Mi enfoque hasta ahora es:

1. Gira la imagen primero.

2. Traduzca las coordenadas que se muestran arriba para que sean relativas al contenedor.

3. Llame a drawImage con el lienzo que contiene la imagen rotada como origen y las coordenadas traducidas.

   drawImage(rotatedCanvas, rotatedX, rotatedY, cropWidth, cropHeight, 0, 0, width, height)

Problemas:

• No estoy seguro de cómo encontrar el punto central del rectángulo de recorte dada la información de recorte anterior. Sin esto, no puedo establecer el origen correcto para la rotación de la imagen.

• Sin encontrar este punto central, no puedo usar el siguiente código para rotar las coordenadas correctamente.

 // cx origin x, cy origin y const rotate = (cx: number, cy: number, x: number, y: number, angle: number) => { const radians = (Math.PI / 180) * angle; const cos = Math.cos(radians); const sin = Math.sin(radians); const nx = cos * (x - cx) + sin * (y - cy) + cx; const ny = cos * (y - cy) - sin * (x - cx) + cy; return { nx, ny }; };

Para ser honesto, no estoy seguro si estoy haciendo esto completamente de manera equivocada.

¡Cualquier consejo sería muy apreciado! Muchas gracias.