Métodos

Selección

Cevent.get(i)

Retorna el objeto almacenado en la posición i (acepta índices negativos)

// obtener ultimo objeto
var rect = ce.rect(50, 30, 15).get(-1);
Cevent.addId(id)

Marca el ultimo objeto dibujado con un identificador que lo diferencia de objetos del mismo tipo, cada objeto solo puede tener un identificador.

Cevent.find(selector)

Retorna un nueva instancia de canvas-event, capaz de manipular todos los objetos que coinciden con el selector.

// cambiar color a todos los circulos
ce.find("circle").attr("fill", "green");
Cevent.getAll(selector)

Retorna un array con los objetos que coinciden con el selector.

Cevent.remove(Shape)

Remueve la figura de la lista de objetos a ser dibujados.

// Eliminar objeto seleccionado
ce.keydown("del", function(c, e) {
    if (c.focused) {
        c.remove(c.focused);
    }
});

Dibujo

Cevent.clear(x, y, width, height)

Borra el área especificada del lienzo, si se llama sin argumentos borra el lienzo completo.

Cevent.draw()

Dibuja todos los objetos almacenados sin borrar previamente el lienzo.

Cevent.redraw()

Borra el lienzo y luego dibuja todo los objetos almacenados, es equivalente a ce.clear().draw().

Cevent.loop(function)

Llama la función especificada y luego redibuja el lienzo (aproximadamente 60 veces por segundo).

La función recibe como único argumento la instancia de canvas-event que se esta animando.

Cevent.stop()

Detiene el loop de animación.

Cevent.zoomIn()
Cevent.zoomOut()
Cevent.zoomTo(scale)

Permiten alejar y acercar los objetos dibujados mientras los eventos del ratón siguen comportándose como se esperaría.

Manejo de atributos

Cevent.attr(attr, value)
Cevent.attr({attr: value, attr: value})

Cambia o establece un atributo del ultimo objeto dibujado u objetos retornados por find.

Los atributos que comparten todo los objetos y sus valor por defecto son:

  • fill: #000
  • stroke: “”
  • tx/ty: 0 (traslación en x/y)
  • scaleX/scaleY: 1
  • skewX/skewY: 0
  • lineWidth: 1
  • lineJoin: miter
  • lineCap: butt
  • alpha: 1 (transparencia)
  • rotation: 0 (rotación en grados sexadesimales)
  • composite: source-over
  • shadowColor: rgba(0, 0, 0, 0.0)
  • shadowOffsetX/shadowOffsetY: 0
  • shadowBlur: 0
  • fontStyle: normal
  • fontWeight: normal
  • fontSize: 10
  • fontFamily: Arial

Se pueden especificar otros atributos siempre cuando no entren con conflicto con los anteriores.

ce.circle(50, 50, 20).attr({
    // color verde
    fill: "green",
    // específico de este objeto
    velx: Math.random(),
    vely: Math.random()
}).draw();

Los siguientes métodos tiene el mismo efecto que llamar a attr con los valore adecuados:

Cevent.skewX(amount)
Cevent.skewY(amount)
Cevent.translate(x, y)
Cevent.scale(x, y)
Cevent.rotate(deg)

Table Of Contents

Related Topics

This Page

Fork me on GitHub