Question

深入来说，当我在chrome mobile（Android）上使用此库时，它给了我这个错误：

未捕获的TypeError：无法读取未定义的属性'clientX' 在SignaturePad._strokeUpdate（signature_pad.umd.js：278）在SignaturePad._strokeEnd（signature_pad.umd.js：302）在HTMLCanvasElement.SignaturePad._handleTouchEnd>（signature_pad.umd.js：196）

经过仔细检查，我发现当该库调用_handleTouchEnd时，TouchEvent是未定义的，因为它试图从targetTouches数组中获取它。

this._handleTouchEnd = function (event) {
    var wasCanvasTouched = event.target === _this.canvas;
    if (wasCanvasTouched) {
        event.preventDefault();
        var touch = event.targetTouches[0];
        _this._strokeEnd(touch);
    }
};

有人可以给我一些帮助吗？我可以使用任何解决方法吗？

这是我的页面实现代码

var wrapperT = document.getElementById("signature-pad-t");
var clearButtonT = wrapperT.querySelector("[data-action=clearT]");
var canvasT = wrapperT.querySelector("canvas");
var signaturePadT = new SignaturePad(canvasT, {backgroundColor: 'rgba(0, 0, 0, 0)'});


clearButtonT.addEventListener("click", function (event) {
    signaturePadT.clear();
    uploadT();
});


function resizeCanvas() {
    var ratioT = Math.max(window.devicePixelRatio || 1, 1);
    canvasT.width = canvasT.offsetWidth * ratioT;
    canvasT.height = canvasT.offsetHeight * ratioT;
    canvasT.getContext("2d").scale(ratioT, ratioT);
    signaturePadT.clear();
}


window.onresize = resizeCanvas;
resizeCanvas();

function uploadT() {
    $.ajax({
        ///...
    });

}

canvasT.addEventListener("mouseup", function (event) {
    if (signaturePadT.isEmpty()) {
        alert("Sign is empty");
    } else {
        document.getElementById("submitBtn").setAttribute("disabled", "disabled");
        var dataURL = signaturePadT.toDataURL();
        uploadT();
    }
});

我做错什么了吗？

手机上的签名板在_handleTouchEnd上给出了Uncaught TypeError

0 个答案: