2

我正在尝试将 2 个签名字段放在同一页面中，使用此演示http://szimek.github.io/signature_pad和https://github.com/szimek/signature_pad上的代码。

如何将 2 个签名板放在同一页面中，每个板都有 2 个清晰按钮和 1 个保存按钮？保存按钮应该显示一个警报，其中包含一个错误消息，说明哪个 pad 是空的，或者如果两个 pad 都已签名，则会显示成功消息。

这是我现在所拥有的（感谢 szimek）：http: //jsfiddle.net/szimek/ps65Q/

HTML：

var wrapper1 = document.getElementById("signature-pad-1"),
    canvas1 = wrapper1.querySelector("canvas"),
    signaturePad1;

var wrapper2 = document.getElementById("signature-pad-2"),
    canvas2 = wrapper2.querySelector("canvas"),
    signaturePad2;


function resizeCanvas(canvas) {
    var ratio =  window.devicePixelRatio || 1;
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
}

resizeCanvas(canvas1);
signaturePad1 = new SignaturePad(canvas1);

resizeCanvas(canvas2);
signaturePad2 = new SignaturePad(canvas2);

JS：

var wrapper1 = document.getElementById("signature-pad-1"),
    canvas1 = wrapper1.querySelector("canvas"),
    signaturePad1;

var wrapper2 = document.getElementById("signature-pad-2"),
    canvas2 = wrapper2.querySelector("canvas"),
    signaturePad2;


function resizeCanvas(canvas) {
    var ratio =  window.devicePixelRatio || 1;
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
}

resizeCanvas(canvas1);
signaturePad1 = new SignaturePad(canvas1);

resizeCanvas(canvas2);
signaturePad2 = new SignaturePad(canvas2);
4

1 回答 1

2

这是一个带有清除和保存按钮的简短示例。

主要的补充是：

HTML - 为按钮添加元素。这些可以放在您喜欢的任何地方，只需确保为它们提供唯一的 ID，因为这是您将在 JavaScript 代码中访问它们的方式。

<button id="clear1">Clear</button>
<button id="clear2">Clear</button>
<button id="save">Save</button>

JS - 添加清除和保存功能，并设置onclick您刚刚制作的按钮的属性以调用这些功能。

function clear1() {
    signaturePad1.clear();
}
function clear2() {
    signaturePad2.clear();
}
function save() {
    if (signaturePad1.isEmpty() || signaturePad2.isEmpty())
        alert("Error: Please sign both pads!");
    else
        alert("Success!");
}

$("#clear1").click(clear1);
$("#clear2").click(clear2);
$("#save").click(save);

看起来您已经在使用 jQuery，所以我用它来设置 onclick 属性，但当然还有其他方法可以做到这一点。

于 2015-09-16T20:48:31.217 回答