0

我在我的 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>

会是什么问题？

4

1 回答 1

1

尝试添加：

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

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

用片段编辑：

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>

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

于 2018-03-01T17:13:23.807 回答