AngularJS简单的签名板指令（无jQuery的） [英] AngularJS Simple Signature Pad Directive (without jQuery)
本文介绍了AngularJS简单的签名板指令（无jQuery的）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
随着计算器我得到了我一个简单的画布上签名指令的帮助。的问题是，它的工作原理与鼠标事件（鼠标按下，鼠标松开，鼠标移动），但不与触摸事件（touchstart，touchmove，touchend）工作。我有ngTouch在我的主要应用模块，并持有该指令在模块中。我希望你能帮助我。这里的code：
VAR SIG = angular.module（'签名'，['ngTouch']）;sig.directive（mjav，['$文件'，函数（$文件）{
返回{
限制：A，
链接：功能（范围，元素）{
变种CTX =元素[0] .getContext（'2D'）; ctx.canvas.width = window.innerWidth - 20;
变种tempCanvas = document.createElement方法（'nanavas'）; //变量决定，如果事情应该在鼠标移动绘制
VAR绘图= FALSE; //当前运动前的最后一个坐标
VAR lastX;
VAR lastY; element.on（'touchstart'，函数（事件）{
如果（event.offsetX！==未定义）{
lastX = event.offsetX;
lastY = event.offsetY;
}其他{
lastX = event.layerX - event.currentTarget.offsetLeft;
lastY = event.layerY - event.currentTarget.offsetTop;
} //开始新行
ctx.beginPath（）; 拉丝= TRUE;
}）;
element.on（'touchmove'，函数（事件）{
如果（图）{
//获取当前鼠标的位置
如果（event.offsetX！==未定义）{
currentX = event.offsetX;
currentY = event.offsetY;
}其他{
currentX = event.layerX - event.currentTarget.offsetLeft;
currentY = event.layerY - event.currentTarget.offsetTop;
} 画（lastX，lastY，currentX，currentY）; //设置当前坐标为持续一年
lastX = currentX;
lastY = currentY;
}
}）; $ document.on（'touchend'，函数（事件）{
//停止绘制
拉丝= FALSE;
}）; //帆布复位
功能复位（）{
元素[0] .WIDTH =元素[0] .WIDTH;
} 函数draw（LX，LY，CX，CY）{
//从线
ctx.moveTo（LX，LY）;
// 至
ctx.lineTo（CX，CY）;
//颜色
ctx.strokeStyle =＃000;
// 画出来
ctx.stroke（）;
}
}
};
}]）;
解决方案
如果有人需要AngularJS一个简单的签名指令这是我想出了中底：
VAR SIG = angular.module（签名，[]）;sig.controller（'signatureCtrl'，['$范围'，函数（$范围）{
$ scope.clearVal = 0;
$ scope.saveVal = 0; $ scope.clear =功能（）{
$ scope.clearVal + = 1; //这个值变动指令清除上下文
} $ scope.saveToImage =功能（）{
$ scope.saveVal = 1; //这个值变动指令保存签名
}
}]）;sig.directive（signatureDir，['$文件'，'$日志，$ rootScope'，函数（$文件，$日志$ rootScope）{
返回{
限制：A，
链接：功能（范围，元素，ATTRS）{
变种CTX =元素[0] .getContext（'2D'）; ctx.canvas.width = window.innerWidth - 30; //当前运动前的最后一个坐标
VAR lastPt; 功能的getOffset（OBJ）{
返回{左：15，最高：116}; //有一个固定偏移
} ATTRS。$观察（价值，功能（newValue）以{
ctx.clearRect（0，0，ctx.canvas.width，ctx.canvas.height）;
}）; ATTRS。$观察（saveVal功能（为newValue，DNID）{
变种的imageData = ctx.canvas.toDataURL（）;
$ rootScope.signatureTemp.push（{'DNID'：DNID，签名：为imageData}）;
}）; element.on（'touchstart'，函数（E）{
亦即preventDefault（）;
ctx.fillRect（e.touches [0] .pageX - 的getOffset（元件）。左，e.touches [0] .pageY - 的getOffset（元件）.TOP，2，2）;
lastPt = {X：e.touches [0] .pageX - 的getOffset（元）。左，Y：e.touches [0] .pageY - 的getOffset（元）.TOP};
}）;
element.on（'touchmove'，函数（E）{
亦即preventDefault（）;
如果（lastPt！= NULL）{
ctx.beginPath（）;
ctx.moveTo（lastPt.x，lastPt.y）;
ctx.lineTo（e.touches [0] .pageX - 的getOffset（元）。左，e.touches [0] .pageY - 的getOffset（元）.TOP）;
ctx.stroke（）;
}
lastPt = {X：e.touches [0] .pageX - 的getOffset（元）。左，Y：e.touches [0] .pageY - 的getOffset（元）.TOP};
}）; element.on（'touchend'，函数（E）{
亦即preventDefault（）;
lastPt = NULL;
}）;
}
};
}]）;
标记：
＆LT; DIV NG控制器=signatureCtrl＆GT;
＆LT; UL类=列表组＆GT;
＆LT; H3风格=填充左：均为15px;＆GT;签署及LT; / H3 GT＆;
＆LT;李班=列表组项＆GT;
＆LT;帆布saveVal ={{saveVal}}VALUE ={{clearVal}}的风格=边界：1px的纯黑色; ID =canvas1宽度=200HEIGHT =200signatureDir＆GT;＆下; /画布＆GT;
＆LT;按钮类=BTN BTN-警告NG点击=清除（）＆GT;清除＆LT; /按钮＆GT;
＆LT;按钮类=BTN BTN-主要NG点击=OK（）＆GT;保存＆LT; /按钮＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
如果任何人都可以看到一些不好的code在这里请大家指正！
With the help of stackoverflow i got me a simple canvas signature directive. The problem is that it works with mouse events (mousedown, mouseup, mousemove) but is not working with touch events (touchstart,touchmove,touchend). I have ngTouch in my main app module and in the module that holds the directive. I hope you can help me. Here's the code:
var sig = angular.module('signature', ['ngTouch']);
sig.directive("mjav", ['$document', function ($document) {
return {
restrict: "A",
link: function (scope, element) {
var ctx = element[0].getContext('2d');
ctx.canvas.width = window.innerWidth - 20;
var tempCanvas = document.createElement('nanavas');
// variable that decides if something should be drawn on mousemove
var drawing = false;
// the last coordinates before the current move
var lastX;
var lastY;
element.on('touchstart', function (event) {
if (event.offsetX !== undefined) {
lastX = event.offsetX;
lastY = event.offsetY;
} else {
lastX = event.layerX - event.currentTarget.offsetLeft;
lastY = event.layerY - event.currentTarget.offsetTop;
}
// begins new line
ctx.beginPath();
drawing = true;
});
element.on('touchmove', function (event) {
if (drawing) {
// get current mouse position
if (event.offsetX !== undefined) {
currentX = event.offsetX;
currentY = event.offsetY;
} else {
currentX = event.layerX - event.currentTarget.offsetLeft;
currentY = event.layerY - event.currentTarget.offsetTop;
}
draw(lastX, lastY, currentX, currentY);
// set current coordinates to last one
lastX = currentX;
lastY = currentY;
}
});
$document.on('touchend', function (event) {
// stop drawing
drawing = false;
});
// canvas reset
function reset() {
element[0].width = element[0].width;
}
function draw(lX, lY, cX, cY) {
// line from
ctx.moveTo(lX, lY);
// to
ctx.lineTo(cX, cY);
// color
ctx.strokeStyle = "#000";
// draw it
ctx.stroke();
}
}
};
}]);
解决方案
If someone will need a simple signature directive for AngularJS this is what I came up with in the end:
var sig = angular.module('signature', []);
sig.controller('signatureCtrl', ['$scope', function ($scope) {
$scope.clearVal = 0;
$scope.saveVal = 0;
$scope.clear = function () {
$scope.clearVal += 1; //On this value change directive clears the context
}
$scope.saveToImage = function () {
$scope.saveVal = 1; //On this value change directive saves the signature
}
}]);
sig.directive("signatureDir", ['$document', '$log', '$rootScope', function ($document, $log, $rootScope) {
return {
restrict: "A",
link: function (scope, element, attrs) {
var ctx = element[0].getContext('2d');
ctx.canvas.width = window.innerWidth - 30;
// the last coordinates before the current move
var lastPt;
function getOffset(obj) {
return { left: 15, top: 116 }; //Got a fixed offset
}
attrs.$observe("value", function (newValue) {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
});
attrs.$observe("saveVal", function (newValue, dnid) {
var imagedata = ctx.canvas.toDataURL();
$rootScope.signatureTemp.push({'dnid':dnid, 'signature':imagedata});
});
element.on('touchstart', function (e) {
e.preventDefault();
ctx.fillRect(e.touches[0].pageX - getOffset(element).left, e.touches[0].pageY - getOffset(element).top, 2, 2);
lastPt = { x: e.touches[0].pageX - getOffset(element).left, y: e.touches[0].pageY - getOffset(element).top };
});
element.on('touchmove', function (e) {
e.preventDefault();
if (lastPt != null) {
ctx.beginPath();
ctx.moveTo(lastPt.x, lastPt.y);
ctx.lineTo(e.touches[0].pageX - getOffset(element).left, e.touches[0].pageY - getOffset(element).top);
ctx.stroke();
}
lastPt = { x: e.touches[0].pageX - getOffset(element).left, y: e.touches[0].pageY - getOffset(element).top };
});
element.on('touchend', function (e) {
e.preventDefault();
lastPt = null;
});
}
};
}]);
Markup:
<div ng-controller="signatureCtrl">
<ul class="list-group">
<h3 style="padding-left: 15px;">Signature</h3>
<li class="list-group-item">
<canvas saveVal="{{ saveVal }}" value="{{ clearVal }}" style="border: 1px solid black;" id="canvas1" width="200" height="200" signatureDir></canvas>
<button class="btn btn-warning" ng-click="clear()">Clear</button>
<button class="btn btn-primary" ng-click="ok()">Save</button>
</li>
</ul>
</div>
If anyone can see some bad code in here please correct me!
这篇关于AngularJS简单的签名板指令（无jQuery的）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
