Usando texto

El objeto texto solo funciona en navegadores que soporten el API de texto.

Para agregar estilo se usan atributos con nombres iguales a los usados en css:

  • fontStyle
  • fontWeight
  • fontSize
  • fontFamily
ce = Cevent("canvas");

/****************
 * Texto Normal *
*****************/
ce.text(50, 50, "Normal").attr({
    fill: "red",
    fontSize: 25
});

/****************
 * Texto rotado *
 ****************/
ce.text(0, 0, "Rotado", 1).translate(150, 75)
.rotate(45)
.attr({
    fill: "green",
    fontSize: 30
 });

/*******************
 * Arrastrar texto *
 *******************/
ce.text(350, 100, "Arrastrar").attr({
    fontFamily: "Monospace",
    fontWeight: "Bold",
    fontSize: 40
}).drag();

/*****************
 * Crear un link *
 *****************/

ce.text(150, 50, "http://github.com/sney2002")
.attr({
    fill: "blue",
    fontSize: 20
})
// enviar a abrir pagina al dar click
.click(function(){
    open("http://github.com/sney2002");
})
// efecto rollover
.bind("mouseover mouseout", function(c, e) {
    this.fill = this.fill == "black" ? "blue" : "black";
    // cambiar el estilo del cursor
    c.cv.style.cursor = c.cv.style.cursor == "pointer" ? "default" : "pointer";
});

// Dibujar todo
ce.draw();

Related Topics

This Page

Fork me on GitHub