AngularJS 简单签名板指令（无 jQuery）

Question

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

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();
           }
        }
    };
}]);

Answer 1

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

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;
            });
        }
    };
}]);

标记：

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

如果有人可以在这里看到一些错误的代码，请纠正我！