Ecuacion del Elipce

ClubIce · #1 (**permalink**) 02/10/2010, 17:25

Hola,

Lo que sucede es que nesesita generar elipses dinamicamente con JS, entonses queria saber si alguien conoce alguna funcion que me devuelva el X e Y de la ubicacion de cada pixel que componen el Contorno del Elipse, para que yo despues puede manipularlo.

Panino5001 · #2 (**permalink**) 02/10/2010, 19:32

Básicamente, para crear un círculo, se trata de ubicar como coordenada x al coseno del radiovector de un círculo trigonométrico y como coordenada y al seno:
Un ejemplo:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Documento sin título</title> 
<script> 
function $(id){return document.getElementById(id);} 
function c(b,ax,ay){ 
    var clon=document.createElement('div'); 
    var fragment=document.createDocumentFragment(); 
    clon.style.width=clon.style.height='10px';  
    clon.style.position='absolute'; 
    clon.style.background='red'; 
    var p=2*Math.PI/6; 
    for(i=0;i<6;i++){ 
        cl=clon.cloneNode(true); 
        var ang=p*i; 
        cl.style.left=Math.cos(ang)*ax+'px'; 
        cl.style.top=Math.sin(ang)*ay+'px'; 
        fragment.appendChild(cl); 
    } 
    $(b).appendChild(fragment); 
} 
onload=function(){ 
    c('b',100,100); 
} 
</script> 
</head> 
 
<body> 
<div id="b" style="position:relative; left:100px; top:100px;"></div> 
</body> 
</html>

Si llamamos a las variables ax y ay, respectivamente, amplitud x y amplitud y, comprobarás que si no tienen el mismo valor se genera una elipse. Ejemplo:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Documento sin título</title> 
<script> 
function $(id){return document.getElementById(id);} 
function c(b,ax,ay){ 
    var clon=document.createElement('div'); 
    var fragment=document.createDocumentFragment(); 
    clon.style.width=clon.style.height='10px';  
    clon.style.position='absolute'; 
    clon.style.background='red'; 
    var p=2*Math.PI/6; 
    for(i=0;i<6;i++){ 
        cl=clon.cloneNode(true); 
        var ang=p*i; 
        cl.style.left=Math.cos(ang)*ax+'px'; 
        cl.style.top=Math.sin(ang)*ay+'px'; 
        fragment.appendChild(cl); 
    } 
    $(b).appendChild(fragment); 
} 
onload=function(){ 
    c('b',100,50); 
} 
</script> 
</head> 
 
<body> 
<div id="b" style="position:relative; left:100px; top:100px;"></div> 
</body> 
</html>