有多个工作签名面板

Question

我的表格需要三个人签名。我最初把它设置为由一个人签名，但发现我需要三个人。我不能让这三个人都工作。

帆布容器：

<div class="rowElem">
    <div id="container2">
    </div>
</div> 
<div class="rowElem">
    <div id="container3">
    </div>
</div>
<div class="rowElem">
    <div id="container4">
    </div>
</div> 

使用Javascript：

<script>


       (function (ns) {
    "use strict";

    ns.SignatureControl = function (options) {
        var containerId = options && options.canvasId || "container2",
            callback = options && options.callback || {},
            label = options && options.label || "Teacher Signature",
            cWidth = options && options.width || "300px",
            cHeight = options && options.height || "300px",
            btnClearId,
            canvas,
            ctx;

        function initCotnrol() {
            createControlElements();
            wireButtonEvents();
            canvas = _("signatureCanvas");
            canvas.addEventListener("mousedown", pointerDown, false);
            canvas.addEventListener("mouseup", pointerUp, false);
            ctx = canvas.getContext("2d");            
        }

        function createControlElements() {            
            var signatureArea = document.createElement("div"),
                labelDiv = document.createElement("div"),
                canvasDiv = document.createElement("div"),
                canvasElement = document.createElement("canvas"),
                buttonsContainer = document.createElement("div"),
                buttonClear = document.createElement("button");

            labelDiv.className = "signatureLabel";
            labelDiv.textContent = label;

            canvasElement.id = "signatureCanvas";
            canvasElement.clientWidth = cWidth;
            canvasElement.clientHeight = cHeight;
            canvasElement.style.border = "solid 2px black";
            canvasElement.style.background = "white";

            buttonClear.id = "btnClear";
            buttonClear.textContent = "Clear Signature Panel";

            canvasDiv.appendChild(canvasElement);
            buttonsContainer.appendChild(buttonClear);

            signatureArea.className = "signatureArea";
            signatureArea.appendChild(labelDiv);
            signatureArea.appendChild(canvasDiv);
            signatureArea.appendChild(buttonsContainer);

            _(containerId).appendChild(signatureArea);
        }

        function pointerDown(evt) {
            ctx.beginPath();
            ctx.moveTo(evt.offsetX, evt.offsetY);
            canvas.addEventListener("mousemove", paint, false);
        }

        function pointerUp(evt) {
            canvas.removeEventListener("mousemove", paint);
            paint(evt);
        }

        function paint(evt) {
            ctx.lineTo(evt.offsetX, evt.offsetY);
            ctx.stroke();
        }

        function wireButtonEvents() {
            var btnClear = _("btnClear");
            btnClear.addEventListener("click", function () {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
            }, false);
        }

        function getSignatureImage() {
            return ctx.getImageData(0, 0, canvas.width, canvas.height).data;
        }

        return {
            init: initCotnrol,
            getSignatureImage: getSignatureImage
        };
    }
})(this.ns = this.ns || {});

这是启动器脚本：

    function teacherSig() {
            var signature = new ns.SignatureControl({ containerId: 'container2', callback: function () {
                } 
            });
            signature.init();
            _('btnClear').className = "greyishBtn";
        }

        window.addEventListener('DOMContentLoaded', teacherSig, false);
</script>

“_”是另一个文件中为document.getElementById设置的变量 - 我已经知道它有效，我在所有的js文件中使用它。

我尝试复制启动器脚本并更改函数名称/元素名称，但它没有任何好处。

任何帮助将不胜感激。

如果有人知道更好的方法，我也可以试试。我在这个项目上的时间不多了，这是客户最终添加的内容。如果有人知道另一个解决方案，一个插件或多个任何东西，我也会对此持开放态度。

Answer 1

当你要求一个更好的方法来做这件事我想建议你使用easyCanvasJS来设置大多数非平凡的东西，但允许你像往常一样使用上下文和画布。

ONLINE FIDDLE HERE

对于三个签名框，您需要做的就是以下内容（保留原始HTML代码，如帖子所示：

/// setup three canvases referencing parent Id and setting size:
var ez1 = new easyCanvas('container2', 350, 100),
    ez2 = new easyCanvas('container3', 350, 100),
    ez3 = new easyCanvas('container4', 350, 100);

/// common handler when mouse is held down, this = current easyCanvas instance
ez1.onmousemove =  ez2.onmousemove =  ez3.onmousemove = function(x, y) {
    /// instead of this.ctx.moveTo etc.. :
    this.strokeLine(this.prevX, this.prevY, x, y);
}

现在你有三个盒子可以登录。 strokeLine是用于绘制线的简写函数，prevX/Y存储在easyCanvas实例内部，x和y已经相对于画布进行了修正。

（要访问画布，您只需参考ez.canvas和上下文ez.ctx或ez.context）。

为了演示，我在HTML中添加了一些保存按钮，允许您将画布保存为图像：

save1.addEventListener('click', function(){download(ez1,1)}, false);
save2.addEventListener('click', function(){download(ez2,2)}, false);
save3.addEventListener('click', function(){download(ez3,3)}, false);

function download(ez, index) {
    /// show a save dialog with filename to save image here as png
    ez.download('Signature' + index + '.png');
}

如果您在内部需要数据，则可以执行以下操作：

ez.canvas.toDataURL();

而是针对每个实例。

更新 - 例如：在单个保存按钮上执行：

function saveSignatures() {

    var sig1 = ez1.canvas.toDataURL();
    var sig2 = ez2.canvas.toDataURL();
    var sig3 = ez3.canvas.toDataURL();

    saveByAjax(sig1, sig2, sig3); // some ajax function to save the data
}

免责声明：easyCanvas for JavaScript由我自己制作，免费并在GPL-3.0下获得许可。