Un ejemplo básico para dibujar en canvas.
Además, como el canvas es transparente, podemos simular que se dibuja sobre nuestra página, tal y como hice en el banner de Cuenta tu imposible de adidas :).
Utilizo HammerJS para que funcione también en iPad y dispositivos móviles.
He encontrado un efecto de swipe (deslizar con el dedo) para las galerías de fotos que simulan un iPad en un navegador de sobremesa.
Normalmente lo que se hace es arrastrar y que al final «salte» el evento de siguiente, y eso no mola. El usuario espera que se vaya visualizando el arrastre según mueve el dedo (o el ratón).
Con esta librería funciona tipo iPad, y la verdad va muy fino en iPad, desktop, Android…
Interesante librería que he descubierto gracias a q-interactiva 😉
Sirve para detectar los eventos de touch, drag, swipe, etc… *todos* los dispositivos (escritorio, iPad y otras tabletas, móviles…), y parece que funciona muy bien 🙂
http://eightmedia.github.io/hammer.js/
Funciona como plugin de jQuery o de forma independiente y pesa ná y menos 🙂
Los eventos en el iPad funcionan diferente que en un ordenador. Si utilizamos deslizadores, botones o cualquier elemento de interfaz de usuario de jQuery UI, no nos funcionará en iPad.
Para solucionarlo basta con incluir jQuery UI Touch Punch y listo, nuestro deslizador funcionará sin problemas en iPad 🙂
<script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jquery-ui.min.js"></script> <script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script> |
Normalmente en iPad se puede arrastrar hacia abajo la ventana de una página web mas allá de su límite (elastic scrolling lo llaman ellos).
Esto nos puede fastidiar si queremos hacer una aplicación de dibujo alguna aplicación donde se tengan que arrastrar cosas con el dedo.
Podemos evitar este comportamiento anulando el comportamiento por defecto así:
// Evito que se pueda arrastrar el fondo document.addEventListener('touchmove', function(e){ e.preventDefault(); }); |
Si queremos detectar el click en alguna parte de nuestra ventana en un iPad, no nos funcionará el evento click normal, sino que hay que escuchar el touch.
Para simplificarlo en una línea podemos hacer esto, y en cada dispositivo ya cogerá el que le corresponda:
var clickEvent = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click'; jQuery("body").bind(clickEvent, funcionClick); |
Estoy trasteando un poco y las transformaciones 3D que permiten las CSS3 y jugando un poco con la posición del cursor.
He utilizado este plugin de jQuery de Rico Sta. Cruz que facilita las transformaciones 3D
Básicamente capturo la posición del ratón cada vez que se mueve y hago el cálculo del ángulo.
$(document).bind("mousemove", (function(e){
mouseX = e.pageX;
mouseY = e.pageY;
})); |
Y en iPad simulo la posición del cursor con la inclinación del dispositivo. Sorprendentemente va muy fluido!! 🙂
// En iPad la rotacion la determina la inclinacion del dispositivo
window.addEventListener("deviceorientation", function(e) {
mouseX = $(document).width()*0.5 + e.beta*10;
mouseY = $(document).height()*0.5 - e.gamma*5;
}, true); |
