Categories
Canvas canvas-event event

Actualización: canvas-event-js 0.2

Después de meses sin actualizar, he aquí algunas cosas nuevas que pueden encontrar en canvas-event:

Ideas que tengo pero no he implementado:

  • Drag-n-Drop live para evitar llamar drag en cada objeto creado, ya que demasiados callback pueden poner lenta las aplicaciones.
  • moveUp, moveDown, toFront, toBack: para mover objetos entre capas (como en PowerPoint). 

Todo esto lo pueden encontrar en el repositorio de github a donde he movido el proyecto, donde ademas pueden dejar sus sugerencias y reportes de errores, su ayuda es muy importante y siempre bien recibida.

P.D.: Has creado alguna aplicación usando canvas-event, deja el link en los comentarios (simple curiosidad *¬*)

Categories
Canvas event html5 javascript programación script

Beta 2 de canvas-event disponible

Ya esta disponible la beta 2 de canvas-event, esta revisión cuenta con algunas mejoras y corrección de errores como:

  1. Posibilidad de adicionar una función a varios eventos simultáneamente
  2. Las figuras dibujadas dentro de un manejador de eventos ahora si se visualizan
  3. Los Objetos Line ahora también pueden ser arrastrados
  4. Los bordes redondeados ahora también funcionan en Opera
Espero que les sea tan útil como lo ha sido para mi.
Categories
Canvas event html5 javascript jQuery software libre

canvas-event: fácil interacción con el elemento canvas

Uno de los elementos HTML5 que sin duda ofrece mayores posibilidades es el elemento canvas, gracias a este es posible crear y manipular imágenes directamente en el navegador, pero a la hora de crear algo mas que imágenes estáticas  nos tropezamos con la falta de métodos para el manejo de eventos, aun así encontramos aplicaciones web que permiten la interacción por medio del teclado y el ratón.

¿Como logran esta interacción?, si vemos en el código de estas aplicaciones, todas siguen mas o menos el mismo patrón:

  1. Agregar evento mousemove al elemento canvas
  2. comparar coordenadas del cursor con las de Objetos dibujados
  3. Seleccionar objeto sobre el cual se encuentra el cursor
  4. Al ocurrir un evento, ejecutarlo sobre el Objeto seleccionado
  5. Redibujar el canvas
No es algo difícil, pero podría ser mucho mas fácil.

Con esto en mente y luego de robar algunas ideas y algo de código de otros proyectos como procesingjs, jQuery, jquery-hotkeys y canto-js, nació canvas-event, una librería que se encarga del manejo de los eventos, facilitando el desarrollo de aplicaciones interactivas en el elemento canvas; ademas cuenta con objetos predefinidos como círculos, rectángulos, rutas e imágenes entre otros.

Algunos ejemplos de lo que se puede hacer con canvas-event:

Cv = Cevent("id-canvas");

// encadenamiento de métodos
Cv.circle( 40, 40, 40 )
.attr({fill: 'red'})
.rotate( 30 );

// manejo de eventos al estilo jquery
Cv.click( function(e) {
this.fill = this.fill == 'green' ? 'red' : 'green';
});

// eventos del teclado asociados a combinación de teclas
Cv.keydown( 'ctrl+s', function(e){
alert( "el Objeto ha sido guardados");
return false;
});

// Drag and drop
Cv.ellipse( 30, 40, 50, 10 )
.drag({
start: function() { console.log( "drag start" ); },

move: function() { console.log( "move to ", this.x, this.y ); },

end: function() { console.log( "drag end" ); }
})

// identificadores de Objetos
Cv.image(50, 100, "ball.gif").addId("pelota").rect(100, 50, 20).draw();

// Recuperar elementos por su Id o tipo;
Cv.find('#pelota').attr("alpha", .5).redraw();

Cv.find('rect').click(function(){
alert( "Hola, soy un rectangulo" );
});

// Eventos live
Cv.mouseover( "#pelota", function(e){
alert( "Soy una pelota" );
});

// Este Objeto también tendrá el evento anterior
Cv.circle(175, 75, 20).addId('pelota');

Ademas, podemos definir nuestras propias figuras extendiendo el objeto Shape:

var Triangle = Cevent.Shape.extend({
// inicializador
init: function( x, y, size ){
this.size = size || 5;
this._super( x, y );
},

// ctx es el context en el que se debe dibujar
draw: function( ctx ) {

ctx.save();

// aplicamos estilo y trasformaciones
this.applyStyle( ctx );
this.setTransform( ctx );

// definimos el contexto en el cual dibujaremos
// para poder usar todos los métodos svg definidos en Cevent
// como M (move) c (cubicBlazier) etc
Cevent.beginPath( ctx )
.M( this.x, this.y )
.h( 1 * this.size )
.v( 1 * this.size )
.z();

if ( this.fill ) { ctx.fill(); }

if ( this.stroke ) { ctx.stroke(); }

ctx.restore();
}
});

// registramos el nuevo objeto
Cevent.registre( "triangle", Triangle );

// ahora podemos hacer uso del nuevo objeto
var Cv = Cevent( "canvas-id" );

Cv.triangle( 40, 30, 10 )
.attr({
fill: "#050",
alpha: .5
})
.focus(function() {
this.fill = "#999";
})
.blur(function() {
this.fill = "#050";
})
.draw();

Por el momento falta documentación pero se incluyen varios ejemplos de su uso, si tienen alguna duda y/o sugerencia por favor déjenla en los comentarios o en la pagina del proyecto en google code.