javascript - Canvas SignaturePad 无法在 Mobile Phonegap 应用程序 (Android) 上清除

Question

我们的应用程序具有在便笺簿上绘制签名的功能。我们正在使用由 szimek 创建的签名板并使用 Ionic AngularJS 框架。

用例描述

此人点击一个按钮，系统打开一个模态屏幕，然后显示签名板。用户可以清除和保存图像。当他保存并再次打开签名板(通过按下按钮)时，会显示之前绘制的图像，用户可以向其中添加内容。

问题

我们遇到的问题是在 Android 设备上。当用户绘制图像并返回到签名 View 时，它会显示之前绘制的图像，但当用户清除它时它不会消失。它确实“清除”了它，因为在保存它之后，它保存了一个空图像。它几乎就像它显示缓存的图像一样。我们希望屏幕在按下“清除”按钮后清除任何图像。

在删除 Canvas 的过程中，Android 无法正确执行某些操作。在每个其他测试设备(iPad、桌面上的浏览器)中，它似乎工作正常。

代码

模态打开

这一切都始于 orderView.html。在那里我分配了一个点击事件来打开带有签名板的模态屏幕:

<ion-item ng-click="openModal('app/components/order/signature/signaturepadView.html', $event)">
                    <div class="signature padding" ng-switch="_signatureImage || '_undefined_'">
                        <img ng-switch-when="_undefined_" ng-src="assets/img/signature_placeholder.png" alt="" />
                        <img ng-switch-default ng-src="{{_signatureImage}}" alt="" />
                    </div>
                </ion-item>

ionic 模态代码:

// Ionic Modal
    $ionicModal.fromTemplateUrl('modal', {
        scope: $scope,
        animation: 'slide-in-up'
    }).then(function (modal) {
        $scope.modal = modal;
    });
    $scope.openModal = function (include, $event) {
        $event.stopPropagation();
        $scope.include = include;
        $scope.modal.show();
    };
    $scope.closeModal = function () {
        $scope.modal.hide();
        $scope._signatureImage = OrderService.getSignatureImage();
    };

    // Cleanup the modal when we're done with it!
    $scope.$on('$destroy', function () {
        $scope.modal.remove();
    });

signatureView.html

这是 signatureView.html 文件中的代码。

<ion-modal-view class="modal" ng-controller="SignatureCtrl">
    <ion-pane>
        <ion-header-bar class='bar-stable'>
            <h1 class='title'> Signature </h1>
            <ion-header-buttons side="left">
                <button class="button signature-back-button" ng-click="closeModal()"><i class="icon ion-ios-arrow-back"></i> Back</button>     
            </ion-header-buttons>
        </ion-header-bar>
        <ion-content class='has-header' scroll='false'>
            <canvas id='signatureCanvas'></canvas>
            <div class='button-bar'>
                <a class='button button-positive' ng-click='clearCanvas()'>Clear</a>
                <a class='button button-balanced' ng-click='saveCanvas(); closeModal()'>Save</a>
            </div>
            <br>
        </ion-content>
    </ion-pane>
</ion-modal-view>

signatureController.js

该函数正在 signatureController.js 中处理:

angular.module('directory.signatureController', [])

    .controller('SignatureCtrl', function ($scope, OrderService) {
        var canvas = document.getElementById('signatureCanvas');
        resizeCanvas();
        var signaturePad = new SignaturePad(canvas);
        signaturePad.backgroundColor = "white";

        signaturePad.minWidth = 2;
        signaturePad.maxWidth = 4.5;

        $scope.clearCanvas = function () {
            signaturePad.clear();
        }

        $scope.saveCanvas = function () {
            var sigImg = signaturePad.toDataURL();
            $scope.signature = sigImg;
            OrderService.setSignatureImage(sigImg);
        }

        function resizeCanvas() {
            var ratio = window.devicePixelRatio || 1;
            canvas.width = window.innerWidth; //document.width is obsolete
            canvas.height = window.innerHeight - 96; //document.height is obsolete
        };
    });

signature_pad.js

从这里我建议在 signature_pad.js 中查找代码。我认为问题出在 clear 函数中，因此我可以链接到签名文件中的 clear 函数。 For the full code here a link to his github.

SignaturePad.prototype.clear = function () {
    var ctx = this._ctx,
        canvas = this._canvas;

    ctx.fillStyle = this.backgroundColor;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    this._reset();
}; 

帮助

请帮助我们，如果这个问题的格式太模糊或需要详细说明，请告诉我，我会进行编辑。

Answer 1

在之前的所有测试中

signaturePad.backgroundColor = "white";

不需要。我们添加了它，之后没有测试这是否是解决方案。经过今天早上的简短测试后，设置 SignaturePad 背景颜色似乎可以解决此问题。

所以我们的问题的答案已经在我们的代码中了。考虑一下这个问题因此解决了。