javascript - 如何在同一页面中添加 2 个 signature_pad

Question

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

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

这是我现在拥有的(感谢 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);

Answer 1

Here is a short example with clear and save buttons .

主要增加的是:

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 属性，当然还有其他方法可以做到这一点。