javascript - 签名板无法在移动设备上使用

Question

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

我在移动设备上测试了演示示例，并且可以正常工作 ( http://szimek.github.io/signature_pad/ )。

我认为我的问题可能是 Canvas 大小调整..在元视口(viewport)中我添加以下内容:

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

它解决了移动设备上 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>

在发生触摸事件时，它会绘制一个大的黑色矩形以确认其有效