3. KineticJS: más elementos

Seguimos viendo elementos básicos de la librería KinetikJS: splines, blobs, textos y figuras personalizadas.

gvozdariki kinesik

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

En esta tercera entrada del tutorial de KineticJs vamos a terminar de ver los elementos básicos, en la siguiente veremos las imágenes, en la posterior los estilos y luego ya empezamos con cosas más chulas, como los interactivismos.

1. Splines

En la entrada anterior vimos que para dibujar una línea es tan sencillo como definir sus coordenadas de inicio y final. No sucede lo mismo con los splines (curvas Bléizer), que para dibujarse con precisión necesitan ciertos conocimientos matemáticos. El proceso es similar a las líneas, pero se añade una tercera propiedad —la tensión—, que es el factor que determina el recorrido de la curva a partir de un valor que va del 0 al 1. Cuanto más bajo, menos pronunciada será la curva y con 0.5, más o menos se obtiene un arco y con 1 una elipse.

splines

var miSpline = new Kinetic.Spline({

points: [{

x: 100,

y: 160

}, {

x: 300,

y: 200

}, {

x: 400,

y: 400

}],

stroke: '#900',

strokeWidth: 10,

lineCap: 'round',

tension: 0.5

});

figurasBasicas.add(miSpline);

figurasBasicas.draw();

2. Blobs

Para hacer lo que Eric Drowell ha denominado blobs, figuras con curvas Bléizer, el proceso es casi idéntico, pero añadiendo la propiedad fill (relleno).

var miBlob = new Kinetic.Blob({

points: [{

x: 300,

y: 100

}, {

x: 500,

y: 100

}, {

x: 450,

y: 220

}],

stroke: '#900',

strokeWidth: 10,

fill: '#000',

tension: 1

});

3. Textos

Los textos se definen con el método Text() de esta forma tan sencilla:

var miTexto = new Kinetic.Text({

x: 450,

y: 450,

text: 'Hola Mundo',

fontSize: 30,

fontFamily: 'Verdana',

stroke: '#090',

fill: '#0c0'

});

4. Formas personalizadas

Kinetik también permite definir formas personalizadas que, como veremos, se pueden modificar dinámicamente. El mecanismo es igual que canvas:

  • context.beginPath(): declaramos que comienza un path.
  • context.moveTo(): se fija el punto de inicio.
  • context.lineTo / context.quadraticCurveTo(): se van añadiendo puntos normales o curvas
  • context.closePath(): se cierra el camino

var miFigura = new Kinetic.Shape({

drawFunc: function(canvas) {

var context = canvas.getContext();

context.beginPath();

context.moveTo(100, 450);

context.lineTo(320, 400);

context.quadraticCurveTo(300, 350, 160, 370);

context.closePath();

canvas.fillStroke(this);

},

fill: '#ff0',

stroke: '#000',

strokeWidth: 2

});

Bueno, de momento vamos a dejarlo aquí. El código de esta entrada está en git.

|| Tags: ,

valoración de los lectores sobre 3. KineticJS: más elementos

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (2 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!

Los comentarios están cerrados.