如何在没有 Jquery 的情况下在 AngularJS 或纯 javascript 中制作签名板？

Question

我正在制作一个移动应用程序，我需要最简单的 javascript 签名板来实现 AngularJS，但我无法在任何地方找到任何资源。

所有插件都使用我拒绝加载的 jquery，因为它是一个移动应用程序，而 jquery 只会使应用程序膨胀。有谁知道我可以使用的教程，或者可以给我基本的指导，我将如何做到这一点，我需要什么元素......我真的很喜欢它！

更新：我刚刚写了一些基本的东西，因为它在这里得到了回答。但它不起作用。任何人都可以识别为什么？我有一个指令，我将其作为元素 () 注入到 html 中。控制台没有返回任何异常。

sig.directive("signatureDirective", function () {
    return {
        template: '<canvas id="canvas" width="500" height="100" style="border: 1px solid #ccc;"></canvas>',
        restrict: 'E',
        link: function (scope, element, attrs) {

            var canvas = $(element);  
            var context = canvas.getContext("2d");           
            var clickX = new Array();
            var clickY = new Array();
            var clickDrag = new Array();
            var paint;

            $(element).addEventListener("mousedown", mouseDown, false);

            $(element).addEventListener("mousemove", mouseXY, false);

            document.body.addEventListener("mouseup", mouseUp, false);

            $(element).addEventListener("touchstart", mouseDown, false);

            $(element).addEventListener("touchmove", mouseXY, true);

            $(element).addEventListener("touchend", mouseUp, false);

            document.body.addEventListener("touchcancel", mouseUp, false);

            function draw() {
                context.clearRect(0, 0, 500, 100); 

                context.strokeStyle = "#000000";  
                context.lineJoin = "miter";       
                context.lineWidth = 2;            

                for (var i = 0; i < clickX.length; i++) {
                    context.beginPath();                               
                    if (clickDrag[i] && i) {
                        context.moveTo(clickX[i - 1], clickY[i - 1]);  
                    } else {
                        context.moveTo(clickX[i] - 1, clickY[i]);      
                    }
                    context.lineTo(clickX[i], clickY[i]);              
                    context.stroke();                                  
                    context.closePath();                               
                }
            }

            function mouseDown(e) {
                var mouseX = e.pageX - this.offsetLeft;
                var mouseY = e.pageY - this.offsetTop;

                paint = true;
                addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
                draw();
            }

            function mouseUp() {
                paint = false;
            }

            function mouseXY(e) {
                if (paint) {
                    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
                    draw();
                }
            }

        }
    };
});

Answer 1

看看canvas 元素。您可以直接操作像素数据并使用画布绘制原始形状，并且作为 HTML 元素，它支持开箱即用所需的所有鼠标操作事件。

<canvas id='signature' width='300' height='50'></canvas>

类似这样的：

var canvas, context;
var pen = {};
canvas = document.getElementById('signature');
context = canvas.getContext('2d');

canvas.addEventListener('mousemove', function(e) {
  pen.x = e.pageX;
  pen.y = e.pageY;
});

canvas.addEventListener('mousedown', function(e) {
  context.fillRect(pen.x, pen.y, 1, 1);
});

// when you're done, you can get a base 64 encoded png version
// of the image data.

context.getImageData();

这是一种非常原始的方法，使用 fillRect 方法来模拟像素。如果您想查看更重的解决方案，可以尝试使用点击点和贝塞尔曲线。

如果您使用的是 Angular，那么您几乎肯定也希望将其包装在一个指令中。

---

编辑

首先，您使用的是 jQuery 和纯 js 的奇怪组合。所有看起来像这样的行都行不通。

$(element).addEventListener("mousedown", mouseDown, false);

应该是这样的：

$(element).on("mousedown", mouseDown, false);

接下来，您似乎正在调用一个名为 addClick 的方法，但实际上并不存在。