I'm making a mobile app and I need the simplest possible signature pad for javascript for implementing with AngularJS but I cant find any resources anywhere.
All the plugins use jquery which I refuse to load since it's a mobile app and jquery would just bloat the app. Does anyone know of a tutorial I could use or could give me basic directions how would I do this, what elements do i need... I'd really appriciate it!
UPDATE: I just wrote something basic as it was answered here. But it doesn't work. Can anyone indentifiy why? I have a directive that i inject into html as an element (). Console is not returning any exceptions.
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();
}
}
}
};
});
I'm making a mobile app and I need the simplest possible signature pad for javascript for implementing with AngularJS but I cant find any resources anywhere.
All the plugins use jquery which I refuse to load since it's a mobile app and jquery would just bloat the app. Does anyone know of a tutorial I could use or could give me basic directions how would I do this, what elements do i need... I'd really appriciate it!
UPDATE: I just wrote something basic as it was answered here. But it doesn't work. Can anyone indentifiy why? I have a directive that i inject into html as an element (). Console is not returning any exceptions.
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();
}
}
}
};
});
- You may not want to use a jQuery plugin for this, but you could read a jQuery plugin's code to see how it works... – nnnnnn Commented Feb 27, 2014 at 13:29
- This question is a bit broad. Read up on canvas. What browser support are you expecting? – Madara's Ghost Commented Feb 27, 2014 at 13:29
- nnnnn: good idea, i will do that but I'm here asking on SO because it usually takes less time if someone teaches you something or if you're reading the code on your own. Second Rikudo: I'm expecting it to work on cordova,chrome,firefox. I dont care about IE. – Zoneh Commented Feb 27, 2014 at 13:33
1 Answer
Reset to default 5Take a look at the canvas element. You can directly manipulate the pixel data and draw primitive shapes with a canvas and as a HTML element, it supports all of the mouse manipulation events that you will need out of the box.
<canvas id='signature' width='300' height='50'></canvas>
Something like this:
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();
This is a pretty primitive way of doing it, using the fillRect method to simulate pixels. If you wanted to look at heavier solutions, you could try doing something with click points and bezier curves.
If you're using Angular, then you'll almost certainly want to wrap this up in a directive as well.
EDIT
First off, you're using a strange mix of jQuery and plain js. All of the lines that look like this, won't work.
$(element).addEventListener("mousedown", mouseDown, false);
Should look like this:
$(element).on("mousedown", mouseDown, false);
Next off, you seem to be calling a method called addClick which isn't actually there.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745055072a4608613.html
评论列表（0条）