Foros del Web » Programando para Internet » Jquery »

No me funciona en la tablet

Estas en el tema de No me funciona en la tablet en el foro de Jquery en Foros del Web. Buenos días: Os pongo al final un código que me funciona cuando lo ejecuto con un ratón, pero cuando lo intento en el iPad con ...
  #1 (permalink)  
Antiguo 06/06/2013, 06:46
 
Fecha de Ingreso: mayo-2013
Ubicación: Madrid
Mensajes: 12
Antigüedad: 9 años, 3 meses
Puntos: 0
No me funciona en la tablet

Buenos días:

Os pongo al final un código que me funciona cuando lo ejecuto con un ratón, pero cuando lo intento en el iPad con el dedo no me funciona, salvo el boton de limpiar.


Código:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Dibujar con JQuery &amp; Canvas</title>
<link rel="stylesheet" type="text/css" href="EstiloT0404.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ga.js"></script>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>
</head>
<body>

<script type="text/javascript">
$(document).ready(function(){
var clic=false;
var xCoord,yCoord="";
var canvas=document.getElementById("can");
var cntx=canvas.getContext("2d");
cntx.strokeStyle="red";
cntx.lineWidth=10;
cntx.lineCap="round";
cntx.fillStyle="#fff";
cntx.fillRect(0,0,canvas.width,canvas.height);

$("#can").mousedown(function(canvas){
clic=true;
cntx.save();
xCoord=canvas.pageX-this.offsetLeft;
yCoord=canvas.pageY-this.offsetTop
});

$(document).mouseup(function(){
clic=false
});

$(document).click(function(){
clic=false
});

$("#can").mousemove(function(canvas){
if(clic==true){
cntx.beginPath();
cntx.moveTo(canvas.pageX-this.offsetLeft,canvas.pageY-this.offsetTop);
cntx.lineTo(xCoord,yCoord);
cntx.stroke();
cntx.closePath();
xCoord=canvas.pageX-this.offsetLeft;
yCoord=canvas.pageY-this.offsetTop
}
});

$("#clr > div").click(function(){
cntx.strokeStyle=$(this).css("background-color");
cntx.lineWidth=10;
});

$("#borrador").click(function(){
cntx.strokeStyle="#fff";
});

$("#borrador2").click(function(){
cntx.strokeStyle="#9ecc3b";
cntx.lineWidth=40;
});

$("#limpiar").click(function(){
cntx.fillStyle="#9ecc3b";
cntx.fillRect(0,0,canvas.width, canvas.height);
})
});
</script>


<canvas id="can" width="500" height="300" ></canvas>
<div id="clr">
<div style="background-color:black;"></div>
<div style="background-color:red;"></div>
<div style="background-color:green;"></div>
<div style="background-color:orange;"></div>
<div style="background-color:#FFFF00;"></div>
<div style="background-color:#F43059;"></div>
<div style="background-color:#ff00ff;"></div>
<div style="background-color:#9ecc3b;"></div>
<div style="background-color:#fbd;"></div>
<div style="background-color:#fff460;"></div>
<div style="background-color:#F43059;"></div>
<div style="background-color:#82B82C;"></div>
<div style="background-color:#0099FF;"></div>
<div style="background-color:#ff00ff;"></div>
<div style="background-color:rgb(128,0,255);"></div>
<div style="background-color:rgb(255,128,0);"></div>
<div style="background-color:rgb(153,254,0);"></div>
<div style="background-color:rgb(18,0,255);"></div>
<div style="background-color:rgb(255,28,0);"></div>
<div style="background-color:rgb(13,54,0);"></div>
</div>
<div id="limpiar">Limpiar</div>
<div id="borrador">Borrador</div>
<div id="borrador2">Borrador Grande</div>
</body>
</html>


Muchas gracias

Etiquetas: tablet
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:44.