Estoy usando React-Konva (versión React de KonvaJS) para dibujar formas personalizadas, en su mayoría polígonos irregulares, y aplicarles transformaciones, como moverlas, escalarlas y rotarlas.
Ahora, una vez que los polígonos están en su lugar, necesito la coordenada de los vértices para otra característica, pero aunque la muevo y transformo y demás, la forma aparece modificada correctamente, pero las coordenadas de los vértices siguen siendo las iniciales.
Por ejemplo, si tengo un triángulo en (0,0), (1,0), (0.5,2) y luego lo arrastro completamente hacia la derecha, después de que finalice el arrastre, el triángulo aparecerá en la nueva posición en el canva, pero al imprimir los vértices seguirá generando (0,0), (1,0), (0.5,2).
¿Cómo se obtienen las coordenadas actualizadas de todos los vértices? Estoy usando la clase Shape para los polígonos que se pueden draggable como true para la traducción, y la clase Transformer para escalar y rotar.
Canvas, y por lo tanto Konva, que es un envoltorio y potenciador de la funcionalidad del lienzo, utiliza gráficos vectoriales. Una parte importante de los gráficos vectoriales es el concepto de 'transformar' tus formas cuando las giras o escalas. Esencialmente, la forma le dirá que su posición no cambia cuando se gira o escala, pero el hecho importante es su transformación, que es lo que hace la rotación y la escala.
Para resumir, sin necesidad de entender las matemáticas de la matriz, puede 'obtener' la transformación que se aplica a su forma y darle las posiciones x, y de los vértices/esquinas de su forma, y devolverá la x, y de eso punto con la transformada aplicada.
Aquí hay una respuesta anterior a la misma pregunta pero con respecto a los rectángulos. https://stackoverflow.com/a/65645262/7073944
Esto es Vanilla JS, pero espero que puedas reaccionar.
Las funciones críticas son node.getTransform y sus métodos de estrecha relación node.getAbsoluteTransform recuperarán la transformación aplicada al nodo (forma).