2013-11-29 1 views
4

ИСПОЛЬЗОВАНИЕ HTML5, Cordova 3.1, Canvas, Javascript Я делаю одно приложение, в котором с помощью холста я сделал подпись подушечка, которая работает отлично в эмуляторе, но когда я пытаюсь запустить в устройстве Android, то две подписи коврик подходит, пожалуйста, помогите мне, что ошибка я сделал в кодированииИспользование Canvas Signature pad, который я создал в эмуляторе, работает отлично, но в Android-устройстве идет две подписи.

в HTML5: -

<canvas id='newSignature'> </canvas> 

в JS: -

var canvas = document.getElementById('newSignature'); 
    var context = canvas.getContext("2d"); 
    canvas.width = 276; 
    canvas.height = 180; 
    context.fillStyle = "#fff"; 
    context.strokeStyle = "#444"; 
    context.lineWidth = 1.5; 
    context.lineCap = "round"; 
    context.fillRect(0, 0, canvas.width, canvas.height); 
    Add event listener for `click` events. 
    canvas.addEventListener('click', function(event) { 
    alert("hello can vas"); 


    var disableSave = true; 
var pixels = []; 
var cpixels = []; 
var xyLast = {}; 
var xyAddLast = {}; 
var calculate = false; 
{ 
    function remove_event_listeners() { 
     canvas.removeEventListener('mousemove', on_mousemove, false); 
     canvas.removeEventListener('mouseup', on_mouseup, false); 
     canvas.removeEventListener('touchmove', on_mousemove, false); 
     canvas.removeEventListener('touchend', on_mouseup, false); 

     document.body.removeEventListener('mouseup', on_mouseup, false); 
     document.body.removeEventListener('touchend', on_mouseup, false); 
    } 

    function get_coords(e) { 
     var x, y; 

     if (e.changedTouches && e.changedTouches[0]) { 
      var offsety = canvas.offsetTop || 0; 
      var offsetx = canvas.offsetLeft || 0; 

      x = e.changedTouches[0].pageX - offsetx; 
      y = e.changedTouches[0].pageY - offsety; 
     } else if (e.layerX || 0 == e.layerX) { 
      x = e.layerX; 
      y = e.layerY; 
     } else if (e.offsetX || 0 == e.offsetX) { 
      x = e.offsetX; 
      y = e.offsetY; 
     } 

     return { 
      x: x, 
      y: y 
     }; 
    }; 

    function on_mousedown(e) { 
     e.preventDefault(); 
     e.stopPropagation(); 

     canvas.addEventListener('mouseup', on_mouseup, false); 
     canvas.addEventListener('mousemove', on_mousemove, false); 
     canvas.addEventListener('touchend', on_mouseup, false); 
     canvas.addEventListener('touchmove', on_mousemove, false); 
     document.body.addEventListener('mouseup', on_mouseup, false); 
     document.body.addEventListener('touchend', on_mouseup, false); 
     empty = false; 
     var xy = get_coords(e); 
     context.beginPath(); 
     pixels.push('moveStart'); 
     context.moveTo(xy.x, xy.y); 
     pixels.push(xy.x, xy.y); 
     xyLast = xy; 
    }; 

    function on_mousemove(e, finish) { 
     e.preventDefault(); 
     e.stopPropagation(); 
     var xy = get_coords(e); 
     var xyAdd = { 
      x: (xyLast.x + xy.x)/2, 
      y: (xyLast.y + xy.y)/2 
     }; 
     if (calculate) { 
      var xLast = (xyAddLast.x + xyLast.x + xyAdd.x)/3; 
      var yLast = (xyAddLast.y + xyLast.y + xyAdd.y)/3; 
      pixels.push(xLast, yLast); 
     } else { 
      calculate = true; 
     } 
     context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y); 
     pixels.push(xyAdd.x, xyAdd.y); 
     context.stroke(); 
     context.beginPath(); 
     context.moveTo(xyAdd.x, xyAdd.y); 
     xyAddLast = xyAdd; 
     xyLast = xy; 

    }; 

    function on_mouseup(e) { 
     remove_event_listeners(); 
     disableSave = false; 
     context.stroke(); 
     pixels.push('e'); 
     calculate = false; 
    }; 
} 
    canvas.addEventListener('touchstart', on_mousedown, false); 
    canvas.addEventListener('mousedown', on_mousedown, false); 

}, false); 

ответ

2

Как ваш вопрос, который вы работаете в холсте, хотите захватить подпись пользователя, используя событие touchmove. для подписи цели вы можете использовать этот плагин https://github.com/thomasjbradley/signature-pad

, как вы хотите использовать Кордову и Jquery мобильного ...

, то вы должны изменить одну varible в плагине файле

$.fn.signaturePad.defaults={ 
//drawIt : '.drawIt a' actula code remove anchor tag 

drawIt : '.drawIt'  you can use where you want in any canvas 
};