javascript - 签名板在移动设备上不起作用

Question

我在我的 laravel 项目中实现了签名板 (https://github.com/szimek/signature_pad)。它在桌面上运行良好。 当我尝试在移动设备中使用它时，我无法绘制任何东西。

我在移动设备上测试了演示示例并且工作正常 (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>

会是什么问题？

Answer 1

尝试添加：

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

它解决了移动端画布的一些问题：

用 sn-p 编辑：

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>

它在触摸事件时绘制一个大的黑色矩形以确认它工作