Ir al contenido principal

Canvas - Dibujando poligonos con Javascript (Herencia y pseudo polimorfismo)

En el ejemplo anterior definimos de una manera muy basica varios poligonos, bueno decidi buscar la manera de pintarlos en un lienzo (canvas) y aqui el resultado (ojo necesitas un browser que soporte HTML 5)

Lo primero el HTML


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Figure Example</title>
</head>
<body>

    <canvas id="myCanvas" width="300" height="300" style="border: solid 1px black"></canvas>


    <script type="text/javascript" src="figure.js"></script>

</body>
</html>

Note q al javascript le hemos dado el nombre de figure.js

Seguidamente el codigo con el canvas, es bastante sencillo para mas detalles busque la documentacion de cada metodo. 



/**
 * User: jsanca
 * Date: 6/12/13
 * Time: 11:10 PM
 */

// Defines a point
function Point (x, y) {

    this.x = x;
    this.y = y;
} // Point


// Basic definition of a Figure, just a point in nowhere.
function Figure (point, name) {

    this.point = point;
    this.name = name;

    this.render = function (context) {

        console.log("figure: " + this.name + " " +this.point);
    }
} // Figure.

// the points defines some of the sides
function Square (point1, point2, name) {

    Figure.call(this, point1, name);
    this.point2 = point2;

    this.side = function () {

        var side =
            (this.point2.x == this.point.x)?
                this.point2.y - this.point.y:
                this.point2.x - this.point.x;

        return Math.abs(side);
    }

    this.area = function () {

        var side = this.side();

        return Math.pow(side, 2);
    }

    this.render = function (context) {

        // render out the square.
        var side = this.side();

        context.fillStyle = "rgb(0,0,255)";
        context.fillRect (this.point.x, this.point.y, side, side);

        console.log("square: " + this.name + ", area = " + this.area());
    }
} // Square.

Square.prototype.parent = Figure.prototype;
Square.prototype.constructor = Square;

// the points defines the point angles
function Triangle (point1, point2, point3, name) {

    Figure.call(this, point1, name);
    this.point2 = point2;
    this.point3 = point3;

    this.area = function () {

        var base = 0;
        var verticalHeight = 0;

        if (this.point2.x == this.point.x) {

            base = this.point2.y - this.point.y;
            verticalHeight = this.point.x - this.point3.x;
        } else {

            base = this.point2.x - this.point.x;
            verticalHeight = this.point.y - this.point3.y;
        }


        return 0.5 * Math.abs(base) * Math.abs(verticalHeight);
    }

    this.render = function (context) {

        console.log("triangle: " + this.name + ", area = " + this.area());

        // the triangle tooks a base point and them move to the rest of the angle point
        context.fillStyle = "rgb(255,0,0)";

        context.beginPath();
        context.moveTo(this.point.x,this.point.y);
        context.lineTo(this.point2.x,this.point2.y);
        context.lineTo(this.point3.x,this.point3.y);

        context.fill();
    }
} // Triangle.

Triangle.prototype.parent = Figure.prototype;
Triangle.prototype.constructor = Triangle;

// the points you pass are the diagonal of the rectangle.
function Rectangle (point1, point2, name) {

    Figure.call(this, point1, name);
    this.point2 = point2;

    this.width = function () {

        return Math.abs(this.point2.x - this.point.x);
    }

    this.height = function () {

        return Math.abs(this.point2.y - this.point.y);
    }


    this.area = function () {

        return this.width() * this.height();
    }

    this.render = function (context) {

        console.log("rectangle: " + this.name + ", area = " + this.area());

        context.fillStyle = "rgb(0,255, 0)";
        context.fillRect (this.point.x, this.point.y, this.width(), this.height());

    }
} // Rectangle.

Rectangle.prototype.parent = Figure.prototype;
Rectangle.prototype.constructor = Rectangle;

// the points defines the radius
function Circle (point1, point2, name) {

    Figure.call(this, point1, name);
    this.point2 = point2;

    this.radius = function () {

        var radius =
            (this.point2.x == this.point.x)?
                this.point2.y - this.point.y:
                this.point2.x - this.point.x;

        return Math.abs(radius);
    }

    this.circumference = function () {

        var radius = this.radius();

        return 2 * Math.PI * radius;
    }

    this.area = function () {

        var radius = this.radius();

        return Math.PI * Math.pow(radius, 2);
    }

    this.render = function (context) {

        var radius = this.radius();

        console.log("circle: " + this.name + ", area = " + this.area() + ", circumference = " + this.circumference() + ", radius = " + radius);

        context.fillStyle = "rgb(255,255, 0)";

        context.beginPath();
        context.arc(this.point.x, this.point.y, radius , 0,2 * Math.PI);
        context.stroke();
    }
} // Circle.

Circle.prototype.parent = Figure.prototype;
Circle.prototype.constructor = Circle;

console.log("Running");
var figuresArray = new Array(
    new Square  (new Point(10,10), new Point(10,30), "Cuadrado 1"),
    new Square  (new Point(10,50), new Point(20,50), "Cuadrado 2"),
    new Triangle(new Point(10,10), new Point(10,20), new Point(0,15), "Mi Triangulito"),
    new Triangle(new Point(100,100), new Point(60,160), new Point(160,160), "Triangulo grande"),
    new Rectangle(new Point(80,50), new Point(90,80), "Mi Rectangulo"),
    new Circle(new Point(200,200), new Point(200,225), "Mi Circulo")
);

var canvas = document.getElementById('myCanvas');
var context =  (canvas.getContext)?
    canvas.getContext('2d'):null;


    figuresArray.forEach(
    function(entry) {

        console.log(entry);
        entry.render(context);
    }
);
Ejecutalo para ver el resultado :) cada figura tiene un color diferente

Comentarios

aida ardani dijo…
https://timearamesh.com/the-difference-between-a-psychiatrist-and-a-psychologist/It can be said with certainty that one of the most important branches of medicine is psychiatry. This field has gained a lot of fans recently, and if you look at the universities and look at their statistics, you will see how much it has been accepted.
5:31 a.m.
Publicar un comentario

Entradas más populares de este blog

Impensando acerca de las referencias en Java

Fue hace ya algún tiempo que pase un rato discutiendo con algunos compañeros acerca de si existe o no el paso por referencia; el discurso fue mucho hacia que en Java el comportamiento, en el supuestamente pasamos por referencia un objeto y por valor los objetos primitivos creo mucha polémica. Para ubicarnos en contexto veamos el siguiente ejemplo. public static void main(String[] args) { int value = 10; changeValue(value); System.out.println("value = " + value); User user = new User(); Name name = new Name(); user.setName(name); name.setName("jsanca"); name.setLastName("XXX"); user.setPassword("123queso"); System.out.println("user: " + user.getName().getName() + ", " + user.getName().getLastName() + ", " + user.getPassword()); changeValue1(user); System.out.println("user: " + user.getName().getName() + ", " + user.getName().getLastName() + ", " + user.ge...
11 comentarios
Leer más

Analizador de expresiones algebraicas recursivo decendente

Como les mencione en un post previo, estoy leyendo el libro el arte de programar en Java, el primer ejercicio consiste en un analizador de expresiones algebraicas recursivo descendente, el mismo consiste en la posibilidad de tomar una cadena que contenga una expresión matemática, la misma puede contener valores en punto flotante, sumar, restar, dividir, multiplicar, sacar exponente (potencia), uso de paréntesis para priorizar una operación, etc. A continuación clase a clase, con una pequeña explicación Lo primero que definiremos es una suite de excepciones para reportar errores, no tiene mucha ciencia, hay una para la division entre cero, cuando no existe una expresión valida, error de sintaxis o cuando los paréntesis no se encuentran balanceados, veamos package cap2; /** * Exception para reportar que hay al intentar dividir entre cero * * User: jsanca * Date: 4/16/13 * Time: 1:30 AM * @author jsanca */ public class DividedByZeroException extends RuntimeException { ...
4 comentarios
Leer más

Links acerca de usabilidad

Bueno esta haciendo un research acerca de usabilidad y decidi compartir algunos de los links mas interesantes: Este esta muy cool y dice por que son buenos, gmail #1: http://www.1stwebdesigner.com/design/well-designed-usable-sites/ Los mejores menus: http://www.kronikmedia.co.uk/blog/website-navigation-menu-design/3580/ Otro top ten: http://www.topsite.com/best/usability los CMS con mas usabilidad http://net.tutsplus.com/articles/web-roundups/top-10-most-usable-content-management-systems/ Las grandes companias que incorporan usabilidad en sus sistemas: http://www.siteiq.net/7806/the-2013-usability-top-10-ibm-leads-sap-soars-and-apple-screws-up-the-rankings-2 + Algo interesante: top ten de sitios de Universidades http://blog.thebrickfactory.com/2010/03/top-11-best-designed-university-websites/ Y estos son 10 videitos acerca de usabilidad: http://www.usefulusability.com/10-must-see-usability-videos/ Enjoy!
Publicar un comentario
Leer más