Interactuando con Textos
15/03/2016
La clase Text
En este capítulo vamos a presentar la clase Text. Una clase encargada de crear representaciones de caracteres de texto de una forma sencilla. Nos permitirá inicializar un objeto Text con distintas propiedades y atributos, útiles para crear textos y frases, los cuales después podremos animar y/o programar para implementarlos en nuestra aplicación interactiva.
Para crear un objeto Text basta con inicializar uno con:
new createjs.Text(text, font, color);
Todos los atributos son opcionales. El más importante será el primero, una string especificando el texto que deseamos (cualquier caracter o cadena de caracteres). El segundo argumento tiene que ver con la familia, el estilo y el tamaño (cualquier valor del atributo font de CSS).
De esta manera podremos crear textos:
canvas = document.getElementById('canvas');
stage = new createjs.Stage(canvas);
hello = new createjs.Text('Hola Mundo!', '16px Arial', 'green');
stage.addChild(hello);
stage.update();
La clase Text posee métodos propios para calcular su ancho y alto total una vez se ha inicializado. Esto nos puede ser muy útil a la hora de posicionar y/o centrar el elemento en el Stage.
hello.getMeasuredHeight() // devolverá el Alto aproximado
hello.getMeasuredWidth() // devolverá el Ancho
El método getMeasuredHeight() hará los cálculos atendiendo a la propiedad lineHeight, obteniendo un valor aproximado. El método getMeasuredWidth() devolverá el ancho total del texto sin tener en cuenta transformaciones ni empaquetado.
De modo que, usando estas propiedades, podríamos centrarlo en pantalla simplemente con:
canvas = document.getElementById('canvas');
stage = new createjs.Stage(canvas);
zalospace = new createjs.Text('ZaloSpace', '24px Arial', 'skyblue');
zalospace.regX = zalospace.getMeasuredWidth() / 2;
zalospace.regY = zalospace.getMeasuredHeight() / 2;
zalospace.x = canvas.width/2;
zalospace.y = canvas.height/2;
stage.addChild(zalospace);
Más propiedades
Otras propiedades interesantes de la clase Text son:
zalospace.text = texto // La más importante, contiene el string a representar
zalospace.color = color // El color del texto
zalospace.outline = grosor; // Si es mayor que 0, las letras se dibujarán más gruesas
zalospace.lineWidth = ancho // Al que tendrá una línea de texto antes de hacerse multilínea
zalospace.lineHeight = altura; // Para especificar la altura. Si se deja a 0 o a null, createjs usará getMeasuredHeight()
zalospace.maxWidth = max // El tamaño máximo que puede tener una línea; si se excede, el texto se comprimirá.
zalospace.textAlign = posicion // Orientación horizontal ("start", "end", "left", "right", "center"). Por defecto "left"
zalospace.textBaseline = posicion // Orientación vertical ("top", "hanging", "middle", "alphabetic", "ideographic", or "bottom"). Por defecto "top"
Como siempre, en la documentación podremos ver todos los métodos y propiedades de la clase Text. Nótese que contiene también propiedades conocidas como rotation, alpha, scaleY, scaleY, etc, de manera que sobre la clase Text podremos aplicar todo lo aprendido en los capítulos anteriores con las clases Graphics y Shape.
Ejemplo Interactivo
Ahora vamos a realizar un pequeño experimento para dominar aún mejor la clase Text y CreateJS en general. Crearemos una entrada de texto para permitir al usuario agregar contenido al canvas dinámicamente. Escribirá el texto que desee crear y lo posicionará en el lugar del canvas donde haga click. Por último también agregaremos un botón para limpiar todo el canvas.
Y por aquí os dejo el código, Creo que es bastante sencillo, con CreateJS era de esperar :)
Primero creamos los input de html necesarios para que el usuario introduzca valores:
<div class="form-inline">
<div class="form-group">
<label for="text">Texto: </label>
<input type="text" class="form-control" id="text">
</div>
<div class="form-group">
<select class="form-control" id="font" title="fuente">
<option>8px Arial</option>
<option>16px Arial</option>
<option>32px Arial</option>
<option>64px Arial</option>
</select>
</div>
<div class="form-group">
<input type="color" id="color" title="color">
</div>
<button type="button" class="btn btn-primary" onclick="clean()">Limpiar</button>
</div>
El botón contiene el atributo onclick para llamar a la función clean() que se encargará de limpiar todo el Canvas.
Y ahora el código javascript, también muy sencillo, primero inicializamos el Stage:
canvas = document.getElementById('canvas');
stage = new createjs.Stage(canvas);
stage.on('stagemousedown', stageClicked); // agregamos un listener al Stage
El método stageClicked se encargará de crear un texto y posicionarlo en el lugar del canvas donde se haya clickado. Para tomar los valores de los input haremos uso de JQuery.
var textValue, textFont, textColor, text;
textValue = $('#text').val();
textFont = $("#font").find("option:selected").val();
textColor = $('#color').val();
if(textValue){ // Si se ha introducido algún texto
text = new createjs.Text(textValue, textFont, textColor); // creamos el texto con las tres variables
text.regX = text.getMeasuredWidth() / 2;
text.regY = text.getMeasuredHeight() / 2;
text.x = e.stageX; // el 'evento' guarda información sobre dónde ocurrió
text.y = e.stageY; // en sus propiedades stageX y stageY tendremos la posición del click
stage.addChild(text); // Agregamos el texto
stage.update() // Dibujamos
}
Finalmente, el método clean() para limpiar el canvas. Se encargará de eliminar a todos los hijos del Stage, dejando el Display List vacío.
var clean = function(e){
stage.removeAllChildren();
}
Y aquí culmina otro capítulo más en el aprendizaje de CreateJS.