我正在制作一个移动应用程序，我需要最简单的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();
}
}
}
};
});
看一下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实际上并不存在的方法。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句