En este tutorial se hará uso de los eventos de ratón de jquery para desplazar shapes sobre el canvas, para tener una mejor compresión sobre el código y la forma de trabajo, se recomienda visitar los post anteriores sobre HTML5 [Shapes y evento click de jquery].
Comencemos.
Primero nuestro archivo html5:
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title>Shapes move html5</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="shape.js"></script> </head> <body> <div> <canvas id="canvas" width="1000" height="600"></canvas> </div> <footer> <h3>by jc mouse</h3> </footer> </body> </html>
Nuestro archivo javascript, se llamara shape.js y el código es el siguiente:
1. Las variables globales
var canvas; var ctx; var shapes = []; //array para almacenar las figuras var selectedShape; // bandera para saber si existe un shape seleccionado
2. Utilizaremos el logo de html5, declaramos la estructura del shape.
functionhtml5( x , y )
{ this.name = 'html5'; this.x = x; this.y = y; this.width = 100; this.height = 114; }
3. definimos la función que pintara el shape
function drawhtml5( ctx, x, y ) { ctx.fillStyle = 'rgba(228, 77, 38, 1.0)'; ctx.beginPath(); ctx.moveTo( x, y ); //cuerpo ctx.lineTo( x , y ); ctx.lineTo( x + 100, y ); ctx.lineTo( x + 90 , y + 100 ); ctx.lineTo( x + 50 , y + 114 ); ctx.lineTo( x + 10 , y + 100 ); ctx.closePath(); ctx.fill(); // numero 5 ctx.fillStyle = 'rgba(255, 255, 255, 1.0)'; ctx.beginPath(); x = x +20 ; y = y +20 ; //nueva coordenada ctx.moveTo( x, y ); ctx.lineTo( x , y ); ctx.lineTo( x +60 , y ); ctx.lineTo( x +60 , y + 15 ); ctx.lineTo( x +15 , y + 15 ); ctx.lineTo( x +15 , y + 25 ); ctx.lineTo( x + 58 , y + 25 ); ctx.lineTo( x + 55 , y + 65 ); ctx.lineTo( x + 30 , y + 70 ); ctx.lineTo( x + 5 , y + 65 ); ctx.lineTo( x + 2 , y + 45 ); ctx.lineTo( x + 15 , y + 45 ); ctx.lineTo( x + 15 , y + 55 ); ctx.lineTo( x + 30 , y + 60 ); ctx.lineTo( x + 45 , y + 53 ); ctx.lineTo( x + 45 , y + 40 ); ctx.lineTo( x + 2 , y + 40 ); ctx.closePath(); ctx.fill(); }
4. Cuando realicemos el movimiento del shape, pintaremos un rectángulo para dar la impresion de que se selecciono un shape, no es necesario pero le dara un mejor acabado 🙂
function drawBox(x,y) { ctx.fillStyle = 'rgba(255, 255, 255, 1.0)'; ctx.beginPath(); ctx.rect(x, y, 100, 114); ctx.closePath(); ctx.fill(); ctx.lineWidth = 2; ctx.strokeStyle = 'rgba(43, 45, 203, 1.0)'; ctx.stroke(); }
5. Nuestra función de pintado, recorre y va dibujando los shapes sobre el canvas, ademas, si existe un shape seleccionado y en movimiento, pintara el rectángulo azul.
function paint() { //limpia canvas ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); //si se tiene un shape seleccionado se pintara una rectangulo a su alrededor if( selectedShape != undefined ) drawBox( shapes[selectedShape].x , shapes[selectedShape].y ); //pinta los shappes for (var i=0; i<shapes.length; i++) drawhtml5(ctx, shapes[i].x , shapes[i].y ); }
6. Finalmente nuestra función init(), para inicializar los shapes del canvas, pintaremos 12 shapes 🙂
function init() { var width = canvas.width; var height = canvas.height; //crea los objetos for (var i=0; i<12; i++) { var x = Math.random()*width; var y = Math.random()*height; shapes.push( new html5( x, y ) ); } }
7. Para terminar implementamos las funciones en el jquery junto a los eventos del ratón, mousedown, mousemove y mouseup,
$(function(){ canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); init(); //almacena las coordenas X,Y antes de realizar un desplazamiento var oldX,oldY; //coordenas del raton var mouseX = 0; var mouseY = 0; //eventos del raton $('#canvas').mousedown(function(e) { //se capturan coordenas del mouse mouseX = e.pageX; mouseY = e.pageY; //se controla en todos los shapes for (var i=0; i<shapes.length; i++) { //se determina si se presiono el mouse encima de un shape if ( (mouseX>shapes[i].x) && (mouseX < (shapes[i].x + shapes[i].width) ) && (mouseY>shapes[i].y) && (mouseY < (shapes[i].y + shapes[i].height) ) ) { // coordenas X,Y donde se hizo clic oldX = mouseX; oldY = mouseY; selectedShape = i; break; } } }); $('#canvas').mousemove(function(e) { mouseX = e.pageX; mouseY = e.pageY; //si existe un shape seleccionado if (selectedShape != undefined) { //se calcula la distancia del dezplazamiento var dx = mouseX - oldX ; var dy = mouseY- oldY ; //se asignan nuevos valores oldX = mouseX; oldY = mouseY; //se actualiza coordenadas X,Y del shape seleccionado shapes[selectedShape] = new html5( shapes[selectedShape].x + dx, shapes[selectedShape].y + dy ); } }); $('#canvas').mouseup(function(e) { selectedShape = undefined; }); //todo el lienzo se repinta cada 50 milisegundos setInterval(paint, 50); });
El resultado
Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.
Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye
Enjoy! :)
El ser humano siempre a buscado la perfección, la simetría del cuerpo y claro esta del rostro, al parecer investigacione...
Messenger Rooms es la nueva opción de videoconferencias de Facebook que permite realizar videollamadas con hasta 50 pers...
¿Que son los archivos JNLP? Java Network Launching Protocol (JNLP) es una especificación usada por Java Web Start. Esta...
En ocasiones por motivos cualesquiera que sea queremos pasar proyectos hechos en netbeans a Eclipse, Netbeans cuenta con...
¿Qué es Maven? Maven es una herramienta de software para la gestión y construcción de proyectos Java. Provee un conjunto...
¿Que es y para que sirve una imagen forense? Una imagen forense es un «clon» (copia bit a bit) de algún dispositivo como...
Los comentarios estan cerrados
Por lo general se usan transacciones a nivel base de datos y posteriormente se llaman estos a través de procedimientos a...
En este post, aprenderemos como conectar Visual Basic 6 con SQL Server, abrir una tabla, leer su contenido y mostrar est...
Lo que veremos en este post es la configuración del driver para PHP de SQL Server que ha creado Microsoft el cual permit...
Google Bard la inteligencia artificial de Google se actualiza con una mejora que entra a competir con el resto de IAs y...
Podrias ayudarme con CANVAS? quiero lograr mover una figura que forme.
Saludos