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>