Question

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

我在移动设备上测试演示示例并运行（http://szimek.github.io/signature_pad/）。

我认为我的问题可能是画布调整大小.. 在meta视口中，我添加了这个：

<wrapper>
  <drop-down>
     <drop-down-el>first</drop-down-el>
     <drop-down-el>second</drop-down-el>
  </drop-down>
</wrapper>

我的jquery代码是：

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

我的HTML代码：

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

它会出现什么问题？

Answer 1

尝试添加：

['0', '0']  ['0', '1'] ['0', '2'] ['0', '3']

它解决了手机画布上的一些问题：

使用代码段编辑：

＆＃13;

import itertools

for r in itertools.product('0123456789', repeat=2):
    print list(r)

＆＃13;

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

＆＃13;

在触摸事件时绘制一个大的黑色矩形以确认它是否有效

javascript - 签名板不适用于移动设备

1 个答案: