javascript - signaturepad - Usando la almohadilla Canvas Signature que he creado en el emulador, funciona bien, pero en el dispositivo Android vienen dos paneles de firmas.

signature pad php

Question

Utilizando HTML5, Cordova 3.1, Canvas, Javascript Estoy haciendo una aplicación en la que con el canvas de ayuda hice un bloc de firmas que funciona bien en el emulador pero cuando estoy tratando de ejecutar en un dispositivo Android, entonces vienen dos libretas de firmas por favor ayúdenme qué error cometí en la codificación

En HTML5: -

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

En 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);

Answer 1

Como su pregunta está trabajando en el lienzo, quiere capturar la firma del usuario mediante el evento touchmove. para fines de firma, puede usar este complemento https://github.com/thomasjbradley/signature-pad

como quieras usar cordova y Jquery mobile ...

entonces tienes que cambiar una varible en el archivo de complemento

$.fn.signaturePad.defaults={
//drawIt : ''.drawIt a'' actula code remove anchor tag
drawIt : ''.drawIt'' you can use where you want in any canvas
};