Objetos predefinidos¶

canvas-event cuenta con varios objetos que representan formas básicas.

class Cevent.rect(x, y, width[, height])¶

class Cevent.ellipse(x, y, width[, height])¶

Crea un rectángulo u ovalo de medidas width * height en la posición x, y, al omitirse height se usara width.

ce.rect(50, 50, 20, 30);// Rectángulo de 20x30

ce.rect(50, 150, 40); // Cuadrado de 40x40

ce.ellipse(100, 50, 30, 20); // Ovalo de 30x40

ce.ellipse(50, 150, 30); // Circulo de 30 radio

// Dibujar todo
ce.draw();

class Cevent.text(x, y, text)¶

inserta el texto en la posición (x, y). Para dar estilo al texto se usan los siguiente atributos:

• fontStyle: Normal | Italic.
• fontWeight: Normal | Bold.
• fontSize: Numero entero
• fontFamily: Tipo de letra valido (eje. Arial)

Para cambiar el texto tenemos dos opciones:

 var saludo = ce.text(20, 20, "hola").get(-1);

 // Usar el metodo setText del objeto text
 saludo.setText("Mundo");

 // modificar el atributo text
 saludo.text = "Hola mundo!";

Pueden encontrar un ejemplo :doc:`aquí <example-text>`.

class Cevent.circle(x, y, radius)¶

Crea un circulo de radio radius en la posición x, y.

ce.circle(50, 50, 40).draw();

class Cevent.image(x, y, src)¶

Dibujar la imagen ubicada en src en la posición x, y.

ce.image(50, 50, "directorio/de/imagen.png").draw();

class Cevent.arc(x, y, radius, start-angle, end-angle[, anticlockwise])¶

Crear un arco de radio radius en la posición x, y. los ángulos se expresan en sexagesimal. anticlockwise indica la dirección del arco.

ce.arc(50, 50, 30, 0, 120, false);
ce.arc(50, 100, 30, 0, 120, true);

ce.draw();

class Cevent.line(x1, y1, x2, y2)¶

Crear un segmento de linea entre los puntos (x1, y1) y (x2, y2).

ce.line(10, 10, 100, 110).draw();

class Cevent.path(svg_path)¶

Trazar una ruta svg (gracias a canto-js). Para una descripción mas completa vea Ruta SVG

// Triangulo rectángulo en posición 50, 50
ce.path("M 50 50 h 30 v 40 z").draw();