Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Desarrollo Web / Seleccionar y mover shapes en html5

Seleccionar y mover shapes en html5

Autor jc mouse miércoles, noviembre 14, 2012

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].

muevete muevete

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.

logo feo

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, mousedownmousemove 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

muevete muevete

🙂 Los archivos utilizados en el ejemplo en este enlace 🙂

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

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! :)

También Te Podría Interesar

Guía básica: Trabajando con GitHub y Netbeans

Guía básica: Trabajando con GitHub y Netbeans

Netbeans tiene soporte para trabajar con varias herramientas de control de versiones, GIT es una de ellas, esta herramie...

Introducción a los Gráficos en Pygame

Introducción a los Gráficos en Pygame

Antes de programar un videojuego, es necesario saber: Cómo representar figuras en la pantalla Cómo se manejan las coorde...

ArrayDeque: Cola doblemente terminada

ArrayDeque: Cola doblemente terminada

Una cola doblemente terminada o deque es una estructura de datos lineal que permite insertar y eliminar elementos por am...

Control de versiones con GIT y Netbeans

Control de versiones con GIT y Netbeans

Control de versiones: Se llama control de versiones a la gestión de los diversos cambios que se realizan sobre los eleme...

Crear animaciones con JQuery y Spritely

Crear animaciones con JQuery y Spritely

Spritely es un plugin para JQuery que te permite crear animaciones con puro javascript y así no tener que utilizar flash...

TextView Autocompletado

TextView Autocompletado

Un TextView autocompletado nos facilita el ingreso de información en aplicaciones móviles ya que te muestra posibles opc...

1 comentario en “Seleccionar y mover shapes en html5”

  1. Sergio Valdez dice:

    Podrias ayudarme con CANVAS? quiero lograr mover una figura que forme.

    Saludos

Los comentarios estan cerrados

Comparte lo que sabes

Categorias

Últimas entradas

Si te gusta realizar tus propios memes o foto montajes pero tienes poca o nula experiencia en editores gráficos como Pho...

Los procedimientos almacenados no solo pueden retornar valores como números, cadenas, etc, sino también datos como los R...

XAMPP es un software para la gestión de base de datos, servidor web apache e interprete para lenguajes como php o perl....

En post anteriores vimos lo que son los parámetros IN y los parámetros OUT pero existe otro tipo de parámetro que es la...

Android Bolivia

MAUS