2. KineticJS: figuras básicas

Seguimos viendo Kinetik, una librería formidable para dibujar con canvas orientado a objetos.

gvozdariki kinesik

archivado en: JavaScript / 20 abril, 2013 / taller: ,

Después de un empacho laboral tremebundo, por fin consigo sacar dos segundos libres, que aprovecho para seguir con el tutorial de kinetic, una librería formidable para trabajar con canvas orientado a objetos.

En la entrada anterior de esta serie vimos el proceso básico de dibujo: se declara un stage principal, en el cual vamos añadiendo layers, cada uno de los cuales puede tener uno o más dibujos. En esta aprenderemos cómo preparar las figuras geométricas básicas, como los rectángulos, las líneas, etcétera.

Para dibujar una figura el proceso es muy sencillo: se declara un objeto especificando sus propiedades mediante notación de literales, es decir, con un array JSON, mediante algún método del objeto Kinetic, como Line para las líneas o Rect para los rectángulos. Luego se añade al layer que sea y, finalmente, se dibuja mediante el método draw().

En general, primero se definen las coordenadas en las que debe aparecer (a partir del punto 0-0, que es la esquina superior izquierda del lienzo) y luego las peculiaridades, como el color, el tamaño, el grosor de la línea, etcétera. Esto se entiende bien en cuanto se dibujan un par de figuras.

1. Líneas - método Line()

Para dibujar líneas, en la propiedad points se van indicando las coordenadas x e y de cada punto. Como ocurre en canvas, con stroke definimos el color de la línea, con strokeWidth el ancho, con lineCap la manera en que deben terminar las puntas y con y lineJoin las intersecciones cuando hay más de un punto en el recorrido.

var miLinea = new Kinetic.Line({

points: [10, 10, 200, 10],

stroke: '#009',

strokeWidth: 5,

lineCap: 'round',

lineJoin: 'round'

});

var miOtraLinea = new Kinetic.Line({

points: [10, 400, 50, 300, 150, 500],

stroke: '#003',

strokeWidth: 5,

lineCap: 'round',

lineJoin: 'round'

});

figurasBasicas.add(miLinea);

figurasBasicas.add(miOtraLinea);

figurasBasicas.draw();

2. Rectángulos - método Rect()

Los rectángulos son aún más fáciles de dibujar. Se define dónde debe situarse la esquina superior izquierda y luego ya el ancho, el alto, el tipo de línea (stroke) y el relleno (fill).

var miRectangulo = new Kinetic.Rect({

x: 10,

y: 20,

width: 100,

height: 110,

fill: '#0c0',

stroke: '#090',

strokeWidth: 2

});

3. Círculos - método Circle()

El procedimiento es el mismo para los círculos, pero en este caso en las coordenadas x e y se indica el centro y en radius el radio.

var miCirculo = new Kinetic.Circle({

x: 200,

y: 200,

radius: 60,

fill: '#fc0',

stroke: 'f90',

strokeWidth: 2

});

4. Elipses - método Ellipse()

Las elipses se dibujan de forma parecida a los círculos, pero indicando los dos radios.

var miElipse = new Kinetic.Ellipse({

x: 600,

y: 200,

radius: {

x: 100,

y: 50

},

fill: '#c00',

stroke: '#900',

strokeWidth: 2

});

5. Polígonos regulares - método RegularPolygon()

Los polígonos regulares se dibujan definiendo las coordenadas x e y de la esquina superior izquierda y luego indicando el número de lados y el radio.

var miPoligonoRegular = new Kinetic.RegularPolygon({

x: 500,

y: 400,

sides: 5,

radius: 50,

fill: '#fc0',

stroke: 'f90',

strokeWidth: 2

});

6. Polígonos irregulares - método Polygon()

En cambio, para los polígonos irregulares hay que seguir un procedimiento similar al de las líneas e ir indicando cada par de coordenadas en points.

var miPoligonoIrregular = new Kinetic.Polygon({

points: [300, 350, 400, 350, 310, 410, 270, 340],

fill: '#00ddff',

stroke: '#000',

strokeWidth: 5

});

7. Polígonos irregulares - método Star()

Y para las estrellas es igual de sencillo: se indica el centro, el número de puntas, el radio interno y el externo.

var miEstrella = new Kinetic.Star({

x: 650,

y: 450,

numPoints: 8,

innerRadius: 40,

outerRadius: 70,

fill: '#00ddff',

stroke: '#000',

strokeWidth: 4

});

Bueno, faltan alguna que otra figuras básica más por ver, como las curvas o los segmentos, pero por hoy ya está bien. En la próxima entrada de esta serie seguiré con estos conceptos fundamentales, al igual que en la siguiente, y creo que ya para la tercera podremos empezar a ver interactivismos varios, que es dónde está lo más chulo de la librería.

Todo este código y la demo están en git.

|| Tags: ,

valoración de los lectores sobre 2. KineticJS: figuras básicas

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • 3.7 sobre 5 (3 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

2 respuestas a “2. KineticJS: figuras básicas

  1. Si le ayuda, esto es para un “poner la foto en orden al juego. Quiero que el usuario sea capaz de dibujar un cuadro para seleccionar múltiples piezas. Mi suposición es que la forma más fácil de hacerlo es getRawX () y getRawY () de la MotionEvent y luego comparar esos valores en la esquina superior izquierda de la celebración de las piezas de diseño. Saber el tamaño de las piezas, que puede determinar cuántas piezas han sido seleccionadas. Me doy cuenta de que puedo usar getX () y Gety () en el MotionEvent, pero como que devuelve una posición relativa que hace que la determinación de qué piezas se seleccionaron más difícil. (No es imposible, lo sé, pero parece complicado innecesariamente).

  2. marcos el dijo:

    Hola Duncan. No sé si he entendido bien el problema. Calcula que puedes añadir un id a cada figura que dibujes. Por lo tanto, puedes indicar que onClick se guarde ese id en un array. Luego solo tienes que recorrerlo para saber sobre qué figuras se ha pulsado.