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
Animación basica de personaje en 3d utilizando el BIPED de 3d Studio Max[...]
im4java es una interfaz pura de Java para la línea de comandos de ImageMagick. La interfaz de la línea de comandos de IM[...]
En este tutorial conoceremos una forma de conectar una aplicación en Laravel con tres bases de datos diferentes, 2 en My[...]
En este tutorial nos conectaremos a una base de datos de Firebird utilizando el lenguaje de Visual Basic, el proyecto se[...]
uiverse.io es u sitio web para desarrolladores que contiene miles de elementos de interfaz de usuario HTML/CSS creados y[...]
Continuación del tutorial [Personalizar JTabbedPane con Netbeans]. La clase BlackTabbedPaneUI que extendemos de BasicTab[...]
