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>
Saludos
