JavaScript — панель подписи не работает на мобильном телефоне

Question

JavaScript — панель подписи не работает на мобильном телефоне

Я реализую панель подписи (https://github.com/szimek/signature_pad) в моем проекте Laravel. Он отлично работает на рабочем столе.
Когда я пытаюсь использовать это в мобильном телефоне, я ничего не могу нарисовать.

Я тестирую демо-пример на мобильном и работает (http://szimek.github.io/signature_pad/)

Я думаю, что моя проблема может быть с изменением размера холста ..
В окне просмотра мета я добавляю это:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

Мой код jquery таков:

var wrapper = document.getElementById("signature-pad");

var canvas = wrapper.querySelector("canvas");
var signaturePad = new SignaturePad(canvas, {
backgroundColor: 'rgb(255, 255, 255)'
});

// Adjust canvas coordinate space taking into account pixel ratio,
// to make it look crisp on mobile devices.
// This also causes canvas to be cleared.
function resizeCanvas() {
// When zoomed out to less than 100%, for some very strange reason,
// some browsers report devicePixelRatio as less than 1
// and only part of the canvas is cleared then.
var ratio =  Math.max(window.devicePixelRatio || 1, 1);

// This part causes the canvas to be cleared
canvas.width = $('#signature-pad').width();
canvas.height = '250';
canvas.getContext("2d").scale(ratio, ratio);

signaturePad.clear();
}

window.onresize = resizeCanvas;
resizeCanvas();

И мой HTML-код:

      <div id="signature-pad" class="signature-pad">
<div class="signature-pad--body">
<canvas width="100%"></canvas>
</div>
<div class="signature-pad--footer">
<div class="description">Sign above</div>

</div>
</div>

Что это за проблема?

0

javascript php signaturepad

Решение

По вопросам рекламы [email protected]

Accepted Answer

Попробуйте добавить:

canvas.addEventListener( 'touchstart', onTouchStart, false);

Это решило некоторые проблемы с canvas на мобильных устройствах:

Отредактировано с фрагментом:

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');


can.addEventListener( 'touchstart', onTouchStart, false);

function onTouchStart(e) {
ctx.fillRect(0,0,300,300);

}

<canvas id="canvas1" width="500" height="500">
</canvas>

1

Другие решения

Других решений пока нет …

Источник