如何在同一頁面中添加2個signature_pad

Question

我正在嘗試使用此演示http://szimek.github.io/signature_pad和代碼https://github.com/szimek/signature_pad將2個簽名字段放在同一頁面中。

如何將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

這是一個帶有清除和保存按鈕的簡短示例 。

主要增加的是：

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屬性，但是當然還有其他方法可以做到這一點。