dibujar optimamente

[derkenuke]

Trabajando con la libreria, caricatos, me he dado cuenta que necesitaba una cosa mas simple para trabajar, algo mas pobre, porque tu codigo para mi es demasiado grande (aunque no por ello malo, me parece fantastico). He hecho una "libreria" que dibuja puntos, rectangulos y circulos, estos dos ultimos con la posibilidad de hacerlo con bordes. Falta por implementar que haga lineas, pero estoy trabajando en ello:

Código PHP:

  document.write('<style>.pto { width:2; height:1; position:absolute; font-size:1; }</style>');
 
function ptoObj(x,y,color) {            //objeto punto. color en rrggbb
    this.x=x; this.y=y; this.color=color;    
    this.generar=function() {
        document.write("<div class='pto' style='background-color:#"+this.color+";top:"+this.y+";left:"+this.x+";'></div>");
    }
}
 
function cuadObj(x,y,w,h,color) {
    this.x=x; this.y=y; this.w=w; this.h=h; this.color=color;
    this.generar=function() {
        document.write("<div class='pto' style='background-color:#"+this.color+";top:"+this.y+";left:"+this.x+";width:"+this.w+";'></div>");
        document.write("<div class='pto' style='background-color:#"+this.color+";top:"+this.y+";left:"+this.x+";height:"+this.h+";'></div>");
        document.write("<div class='pto' style='background-color:#"+this.color+";top:"+(this.y+this.h)+";left:"+this.x+";width:"+this.w+";'></div>");
        document.write("<div class='pto' style='background-color:#"+this.color+";top:"+this.y+";left:"+(this.x+this.w)+";height:"+(this.h+2)+";'></div>");
    }
    this.rellenar=function(color) {
        color=color==null?this.color:color;    //si no se pone el color, que sea el mismo que el del cual
        document.write("<div class='pto' style='background-color:#"+color+";top:"+(this.y+2)+";left:"+(this.x+2)+";width:"+(this.w-2)+";height:"+(this.h-2)+";'></div>");
    }
}
 
function circObj(x,y,radio,color) {
    this.x=x; this.y=y; this.radio=radio; this.color=color;
    this.generar=function() {
        for(a=0;a<360;a+=0.25) {
            ang=a*Math.PI/180;                //a radianes
            posX=(Math.cos(ang)*this.radio)+this.x; posY=(Math.sin(ang)*this.radio)+this.y;
            document.write("<div class='pto' style='background-color:#"+this.color+";top:"+posY+";left:"+posX+";z-index:2;'></div>");
        }
    }
    this.rellenar=function(color) {        //color es optativo
        color=color==null?this.color:color;    //si no se pone el color, que sea el mismo que el del circ
        for(a=90;a>-90;a-=0.5) {        //recorremos cada angulo en los cuadrantes 1º y 4º (los de la dcha del circ)
            rad=a*Math.PI/180;    //radianes
            y=this.y-Math.sin(rad)*this.radio;
            width=(Math.cos(rad)*this.radio)*2; width+=1;    // el 1 es para el margen de error por los decimales ;-)
            x=this.x-(width/2);
            document.write("<div class='pto' style='background-color:#"+color+";top:"+y+";left:"+x+";width:"+width+";z-index:1'></div>");
        }
    }
}
 
 
miPto=new ptoObj(30,30,"ff00ff");
miPto.generar();
 
miCuad=new cuadObj(50,100,50,100,"996643");
miCuad.generar();
miCuad.rellenar();
 
miCirc=new circObj(300,300,200,"ff0000");
miCirc.generar();
miCirc.rellenar("ff9933"); 
   

(caricatos fijate en lo del relleno del circulo, porque he visto que utilizas mucho codigo para rellenarlo, haber si lo entiendes).

Espero que le sirva a mucha gente.


Un saludo