Tema: [APORTE] Mano alzada, canvas.
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 22/07/2016, 15:41
xerifandtomas
 
Fecha de Ingreso: octubre-2010
Ubicación: España
Mensajes: 1.007
Antigüedad: 13 años, 6 meses
Puntos: 123
Información [APORTE] Mano alzada, canvas.
Hace algunos dias en uno de mis proyectos me pidieron crear un formulario que tras ser rellenado el cliente debía firmar a mano alzada en la tablet o teléfono del operario.

Os dejo un ejemplo de esta parte donde poder dibujar a mano alzada por medio de un canvas, por si alguno os puede venir bien.


Es importante establecer los atributos width y height del canvas directamente y no hacerlo mediante css ya que no hacen referencia al estilo, si no al tamaño del lienzo. <canvas>.

Podeis copiar y pegar el ejemplo guardandolo como .php para verlo en funcionamiento.

Ejemplo:
Código Javascript: 
Ver original
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>Ejemplo canvas mano alzada</title>
  7. <style type="text/css">
  8. .centrador{
  9.   box-sizing: border-box;
  10.   display: block;
  11.   width: 100%;
  12.   margin: 0 0 auto;
  13.   margin-top: 15px;
  14.   text-align: center;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19.  
  20. <div class='centrador'>
  21.   <canvas id='canvas' width="200" height="200" style='border: 1px solid #CCC;'>
  22.     <p>Tu navegador no soporta canvas</p>
  23.   </canvas>
  24. </div>
  25. <div class='centrador'>
  26.   <form id='formCanvas' method='post' action='#' ENCTYPE='multipart/form-data'>
  27.     <button type='button' onclick='LimpiarTrazado()'>Borrar</button>
  28.     <button type='button' onclick='GuardarTrazado()'>Guardar</button>
  29.     <input type='hidden' name='imagen' id='imagen' />
  30.   </form>
  31. </div>
  32.  
  33. <script type="text/javascript">
  34. /* Variables de Configuracion */
  35. var idCanvas='canvas';
  36. var idForm='formCanvas';
  37. var inputImagen='imagen';
  38. var estiloDelCursor='crosshair';
  39. var colorDelTrazo='#555';
  40. var colorDeFondo='#fff';
  41. var grosorDelTrazo=2;
  42.  
  43. /* Variables necesarias */
  44. var contexto=null;
  45. var valX=0;
  46. var valY=0;
  47. var flag=false;
  48. var imagen=document.getElementById(inputImagen); 
  49. var anchoCanvas=document.getElementById(idCanvas).offsetWidth;
  50. var altoCanvas=document.getElementById(idCanvas).offsetHeight;
  51. var pizarraCanvas=document.getElementById(idCanvas);
  52.  
  53. /* Esperamos el evento load */
  54. window.addEventListener('load',IniciarDibujo,false);
  55.  
  56. function IniciarDibujo(){
  57.   /* Creamos la pizarra */
  58.   pizarraCanvas.style.cursor=estiloDelCursor;
  59.   contexto=pizarraCanvas.getContext('2d');
  60.   contexto.fillStyle=colorDeFondo;
  61.   contexto.fillRect(0,0,anchoCanvas,altoCanvas);
  62.   contexto.strokeStyle=colorDelTrazo;
  63.   contexto.lineWidth=grosorDelTrazo;
  64.   contexto.lineJoin='round';
  65.   contexto.lineCap='round';
  66.   /* Capturamos los diferentes eventos */
  67.   pizarraCanvas.addEventListener('mousedown',MouseDown,false);
  68.   pizarraCanvas.addEventListener('mouseup',MouseUp,false);
  69.   pizarraCanvas.addEventListener('mousemove',MouseMove,false);
  70.   pizarraCanvas.addEventListener('touchstart',TouchStart,false);
  71.   pizarraCanvas.addEventListener('touchmove',TouchMove,false);
  72.   pizarraCanvas.addEventListener('touchend',TouchEnd,false);
  73.   pizarraCanvas.addEventListener('touchleave',TouchEnd,false);
  74. }
  75.  
  76. function MouseDown(e){
  77.   flag=true;
  78.   contexto.beginPath();
  79.   valX=e.pageX-posicionX(pizarraCanvas); valY=e.pageY-posicionY(pizarraCanvas);
  80.   contexto.moveTo(valX,valY);
  81. }
  82.  
  83. function MouseUp(e){
  84.   contexto.closePath();
  85.   flag=false;
  86. }
  87.  
  88. function MouseMove(e){
  89.   if(flag){
  90.     contexto.beginPath();
  91.     contexto.moveTo(valX,valY);
  92.     valX=e.pageX-posicionX(pizarraCanvas); valY=e.pageY-posicionY(pizarraCanvas);
  93.     contexto.lineTo(valX,valY);
  94.     contexto.closePath();
  95.     contexto.stroke();
  96.   }
  97. }
  98.  
  99. function TouchMove(e){
  100.   e.preventDefault();
  101.   if (e.targetTouches.length == 1) { 
  102.     var touch = e.targetTouches[0]; 
  103.     MouseMove(touch);
  104.   }
  105. }
  106.  
  107. function TouchStart(e){
  108.   if (e.targetTouches.length == 1) { 
  109.     var touch = e.targetTouches[0]; 
  110.     MouseDown(touch);
  111.   }
  112. }
  113.  
  114. function TouchEnd(e){
  115.   if (e.targetTouches.length == 1) { 
  116.     var touch = e.targetTouches[0]; 
  117.     MouseUp(touch);
  118.   }
  119. }
  120.  
  121. function posicionY(obj) {
  122.   var valor = obj.offsetTop;
  123.   if (obj.offsetParent) valor += posicionY(obj.offsetParent);
  124.   return valor;
  125. }
  126.  
  127. function posicionX(obj) {
  128.   var valor = obj.offsetLeft;
  129.   if (obj.offsetParent) valor += posicionX(obj.offsetParent);
  130.   return valor;
  131. }
  132.  
  133. /* Limpiar pizarra */
  134. function LimpiarTrazado(){
  135.   contexto=document.getElementById(idCanvas).getContext('2d');
  136.   contexto.fillStyle=colorDeFondo;
  137.   contexto.fillRect(0,0,anchoCanvas,altoCanvas);
  138. }
  139.  
  140. /* Enviar el trazado */
  141. function GuardarTrazado(){
  142.   imagen.value=document.getElementById(idCanvas).toDataURL('image/png');
  143.   document.forms[idForm].submit();
  144. }
  145. </script>
  146.  
  147.  
  148. <?php if (isset($_POST['imagen'])) { ?>
  149. <div class='centrador'>
  150.     <img src="<?php echo $_POST['imagen'];?>" border="1">
  151. </div>
  152. <?php } ?>
  153.  
  154. </body>
  155. </html>
__________________
Unset($vida['malRollo']);