AngularJS 简单签名板指令(无 jQuery) [英] AngularJS Simple Signature Pad Directive (without jQuery)

问题描述

在 stackoverflow 的帮助下，我得到了一个简单的画布签名指令.问题是它适用于鼠标事件(mousedown、mouseup、mousemove)但不适用于触摸事件(touchstart、touchmove、touchend).我的主应用程序模块和包含指令的模块中都有 ngTouch.我希望你能帮助我.代码如下:

var sig = angular.module('signature', ['ngTouch']);sig.directive("mjav", ['$document', function ($document) {返回 {限制:A"，链接:功能(范围，元素){var ctx = element[0].getContext('2d');ctx.canvas.width = window.innerWidth - 20;var tempCanvas = document.createElement('nanavas');//决定是否应该在 mousemove 上绘制某物的变量var 绘图 = 假；//当前移动前的最后一个坐标var lastX;var lastY;element.on('touchstart', function (event) {如果(event.offsetX ！== 未定义){lastX = event.offsetX;lastY = event.offsetY;} 别的 {lastX = event.layerX - event.currentTarget.offsetLeft;lastY = event.layerY - event.currentTarget.offsetTop;}//开始新行ctx.beginPath();绘图 = 真；});element.on('touchmove', function (event) {如果(绘图){//获取当前鼠标位置如果(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 = 当前X；lastY = 当前Y；}});$document.on('touchend', function (event) {//停止绘制绘图 = 假；});//画布重置功能重置(){element[0].width = element[0].width;}函数绘制(lX，lY，cX，cY){//行从ctx.moveTo(lX, lY);//到ctx.lineTo(cX, cY);//颜色ctx.strokeStyle = "#000";//画出来ctx.stroke();}}};}]);

解决方案

如果有人需要一个简单的 AngularJS 签名指令，这就是我最后想到的:

var sig = angular.module('signature', []);sig.controller('signatureCtrl', ['$scope', function ($scope) {$scope.clearVal = 0;$scope.saveVal = 0;$scope.clear = function () {$scope.clearVal += 1;//在这个值改变指令清除上下文}$scope.saveToImage = 函数 () {$scope.saveVal = 1;//在这个值改变指令上保存签名}}]);sig.directive("signatureDir", ['$document', '$log', '$rootScope', function ($document, $log, $rootScope) {返回 {限制:A"，链接:函数(范围、元素、属性){var ctx = element[0].getContext('2d');ctx.canvas.width = window.innerWidth - 30;//当前移动前的最后一个坐标var lastPt;函数 getOffset(obj) {返回{左:15，顶部:116}；//得到一个固定的偏移量}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 = 空；});}};}]);

标记:

<ul class="list-group"><h3 style="padding-left: 15px;">签名</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()">清除</button><button class="btn btn-primary" ng-click="ok()">保存</button>

如果有人在这里看到一些不好的代码，请纠正我！

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屋！