Hola muy buenas noches! Este es mi primer trabajo con geometría aplicada y lo que intento es ROTAR una figura. En este caso el motor es SVG pero la logica es algo general y es en donde radica mi error.
Mi funcion draw(grados) dibuja la figura en el angulo "grados" de rotacion que recibe como parametro. Si corre solo una vez, funciona, si corre mas de una vez, falla y dibuja una figura deforme.
La logica de mi funcion
draw(grados) es {
1- Establece el punto de origen en el CENTRO de mi figura
2- Para cada punto:
a. Obtiene el angulo que se forma entre el Punto de origen y el Punto
b. Calcula las coordenadas del punto rotado al nuevo angulo
3- Dibuja la figura
}
Ya no se mas qué probar, no entiendo bien en qué estoy fallando. La primera vez que se corre funciona bien con cualquier angulo entre 1 y 360.
Código HTML:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<title>123 probando SVG</title>
<style type="text/css">
HTML,BODY {
width:100%;
height:100%;
border: rgba(0,0,0,1);
}
#canvas {
position:absolute;
top:0;
left:0;
border:1px #333333 solid;
}
</style>
<script>
// Esto es para acceder al DOM de la SVG
var svgDoc;
function startup(evt){
svgDoc=evt.target.ownerDocument;
}
// Load event de mi HTML
$(document).ready(function() {
// Dibujar el rectangulo a 45 grados
draw(45);
});
// #1 - Defino mi RECTANGULO con 4 puntos
var matriz = Array({x:250,y:150},{x:250,y:250},{x:450,y:250},{x:450,y:150});
// #2 - Funcion para dibujar la figura en un angulo dado por medio
// de la rotacion de cada uno de sus puntos
function draw(grados) {
// Este es el punto de origen: corresponde al CENTRO de la figura y lo estoy
// estableciendo de forma MANUAL en esta pruebita.
// 250 y 150 son valores literales de "ajuste" en el eje cartesiano
// ya que estoy dibujando en el centro de mi canvas
var Ox = 250 + ((450 - 250) / 2);
var Oy = 150 + ((250 - 150) / 2);
var angulo = 0;
var r=150; // Valor relativo al tamaño que tendrá mi figura
/** Recorrido de puntos del poligono **/
for (var i=0; i<4; i++) {
// Lo primero es calcular el ANGULO del punto, su valor inicial al que le
// voy a sumar la cantidad de "GRADOS"
angulo = Math.atan2(matriz[i].y - Oy, matriz[i].x - Ox) * 180 / Math.PI;
// Luego calculo el X y el Y del nuevo punto, R es la Hipotenusa
// Nuevamente: 250 y 150 son valores literales de "ajuste"
matriz[i].x = 250 + r * Math.sin((grados - 90 + angulo) * Math.PI / 180);
matriz[i].y = 150 - r * Math.cos((grados - 90 + angulo) * Math.PI / 180);
}
// Esta funcion es la que dibuja la figura en funcion de los valores en la variable 'matriz'
trazarFigura();
}
// #3 - Funcion para dibujar las lineas de mi figura rectangular
function trazarFigura() {
var linea = document.getElementById("line1");
linea.setAttribute("x1", matriz[0].x);
linea.setAttribute("y1", matriz[0].y);
linea.setAttribute("x2", matriz[1].x);
linea.setAttribute("y2", matriz[1].y);
linea = document.getElementById("line2");
linea.setAttribute("x1", matriz[1].x);
linea.setAttribute("y1", matriz[1].y);
linea.setAttribute("x2", matriz[2].x);
linea.setAttribute("y2", matriz[2].y);
linea = document.getElementById("line3");
linea.setAttribute("x1", matriz[2].x);
linea.setAttribute("y1", matriz[2].y);
linea.setAttribute("x2", matriz[3].x);
linea.setAttribute("y2", matriz[3].y);
linea = document.getElementById("line4");
linea.setAttribute("x1", matriz[3].x);
linea.setAttribute("y1", matriz[3].y);
linea.setAttribute("x2", matriz[0].x);
linea.setAttribute("y2", matriz[0].y);
}
</script>
</head>
<body>
<svg id="canvas" onload="startup(evt)" width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
<line id="line1" stroke-linecap="round" x1="0" y1="0" x2="0" y2="0" stroke-width="4" stroke="black" />
<line id="line2" stroke-linecap="round" x1="0" y1="0" x2="0" y2="0" stroke-width="4" stroke="black" />
<line id="line3" stroke-linecap="round" x1="0" y1="0" x2="0" y2="0" stroke-width="4" stroke="black" />
<line id="line4" stroke-linecap="round" x1="0" y1="0" x2="0" y2="0" stroke-width="4" stroke="black" />
</svg>
</body>
</html> ¡Si me ayudan se los agradeceré muchisimo!
Saludos