Autor Tema: Clase para dibujar, circulos, rectangulos, triangulos,rombos  (Leído 6840 veces)

Crear-juegos

  • Jr. Member
  • **
  • Mensajes: 59
  • Karma: +0/-0
    • Ver Perfil
    • http://blog.crear-juegos.com
Esta clase (simulación de clase o lo que sea) es la que he escrito hace un rato porque me hacía falta dibujar figuras simples pero no me apetecía andar todo el santo día copiando y pegando porciones de código. Tampoco crearlas como funciones sueltas ya que me podían servir para otros proyectos así que me he decidido por una clase independiente que, ahora, voy a compartirla por si a alguien le sirve.

PUBLICIDAD



Quizá la del rectángulo sobra por ser muy simple dibujarlo directamente pero era por tener todo junto. Donde mas se agradece, creo yo, es en el dibujo de una simple equis.

Funcionar funciona pero estoy muy seguro de que algunas líneas sobran para conseguir lo mismo.

Código: ("clase_dibujo.js") [Seleccionar]
/*
 *
 * clase para crear figuras simples
 *
 */
dibujo = function(){

    // contexto canvas donde se dibuja
    this.ctx_canvas;

    // iniciamos el contexto
    this.iniciar = function(canvas){
        this.ctx_canvas = canvas;
    }

    // creamos un circulo. Vacio=true,false
    this.circulo = function(x,y,radio,vacio){
        // comenzamos el camino
        this.ctx_canvas.beginPath();
        // establecemos el grosor de la linea
        this.ctx_canvas.lineWidth = 2;
        // dibujamos el circulo
        this.ctx_canvas.arc(x,y,radio,0,Math.PI*2, false);
        // establecemos que sea vacio o no
        if(vacio)
            {
                this.ctx_canvas.stroke();
            }else{
                this.ctx_canvas.fill();
            }
        // cerramos el camino
        this.ctx_canvas.closePath();
    }

    // creamos una X
    this.equis = function(x,y,ancho,alto){
        // comensamos el camino
        this.ctx_canvas.beginPath();
        // colocamos el inicio de la equis
        this.ctx_canvas.moveTo(x,y);
        // pintamos la posicion final de la primera linea
        this.ctx_canvas.lineTo(x + ancho,y + alto);
        // cerramos la linea
        this.ctx_canvas.closePath();
        // le decimos que es sin relleno
        this.ctx_canvas.stroke();
        // comensamos el camino
        this.ctx_canvas.beginPath();
        // colocamos el inicio de la segunda linea
        this.ctx_canvas.moveTo(x + ancho,y);
        // pintamos la posicion final de la segunda linea
        this.ctx_canvas.lineTo(x,y + alto);
        // cerramos la linea
        this.ctx_canvas.closePath();
        // le decimos que es sin relleno
        this.ctx_canvas.stroke();
    }

    // creamos un rectangulo. Vacio=true,false
    this.rectangulo = function(x,y,ancho,alto,vacio){
       
        // establecemos que sea vacio o no
        if(vacio)
            {
                this.ctx_canvas.strokeRect(x,y,ancho,alto);
            }else{
                this.ctx_canvas.fillRect(x,y,ancho,alto);
            }
    }

    // creamos un triangulo simetrico. Vacio=true,false
    this.trianguloS = function(x,y,ancho,alto,vacio){
        // comenzamos el camino
        this.ctx_canvas.beginPath();
        // colocamos el inicio de la base
        this.ctx_canvas.moveTo(x,y+alto);
        // pintamos la posicion final de la base
        this.ctx_canvas.lineTo(x + ancho,y + alto);
        // pintamos la posicion final de la cima
        this.ctx_canvas.lineTo(x + (ancho/2),y);
        // cerramos el triangulo
        this.ctx_canvas.lineTo(x,y + alto);
        // establecemos que sea vacio o no
        if(vacio)
            {
                this.ctx_canvas.stroke();
            }else{
                this.ctx_canvas.fill();
            }
        // cerramos el camino
        this.ctx_canvas.closePath();
    }
}

// creamos el objeto para utilizarlo despues
dibujo = new dibujo();

¿Como se utiliza?
Yo incluyo la creación del objeto en el mismo archivo que tengo la clase para asi utilizarla directamente del modo:
Código: (".js") [Seleccionar]
// iniciamos la clase dibujo
dibujo.iniciar(ctx_tilesEditar);

// pinta un circulo vacio
dibujo.circulo(x,y,radio,true);
// pinta un circulo relleno
dibujo.circulo(x,y,radio,false);
// pinta una equis
dibujo.equis(x,y,ancho,alto);

// pinta un rectangulo vacio
dibujo.rectangulo(x,y,ancho,alto,true);
// pinta un rectangulo relleno
dibujo.rectangulo(x,y,ancho,alto,false);

// pinta un triangulo simetrico vacio
dibujo.trianguloS(x,y,ancho,alto,true);
// pinta un triangulo relleno
dibujo.trianguloS(x,y,ancho,alto,false);

Clase para dibujar rombos

Clase para dibujar Sprays



PD: También le faltan parámetros para elegir el grosor de línea y color pero todavía no me hacía falta  especificar esos valores  :P
PD2: Si alguien se aburre y quiere añadir otras figuras simples como: rombos...
« última modificación: Abril 12, 2011, 07:47:20 pm por rmr »
Engine para juegos html5. En desarrollo: Blog, @crearjuegos_com, Tema en el foro

R Martin Seo

  • Administrator
  • Hero Member
  • *****
  • Mensajes: 620
  • Karma: +0/-0
    • Ver Perfil
Re:Clase para dibujar, circulos, rectangulos, triangulos
« Respuesta #1 en: Abril 06, 2011, 01:42:59 am »
ME gusta CHinchetazo Buen trabajo.

Canvas Dk

  • Full Member
  • ***
  • Mensajes: 249
  • Karma: +0/-0
  • Buscando colaboradores para proyectos
    • Ver Perfil
    • Páginas y posicionamiento web en Córdoba
Re:Clase para dibujar, circulos, rectangulos, triangulos
« Respuesta #2 en: Abril 06, 2011, 09:49:04 am »
Realmente bueno si señor