Question

我正在尝试创建一个允许用户在画布上签名的离子应用。我使用signature-pad.js https://github.com/szimek/signature_pad来创建签名。

当我在浏览器上运行应用程序时，它可以完美运行。

然而，当我在Android模拟器上运行应用程序时，当我导航到签名页面时，应用程序会冻结。

以下是签名页面的控制器代码：

(function() {
angular.module('ValShip').controller('signatureCtrl', signatureCtrl);

signatureCtrl.$inject = ['$cordovaFileTransfer','$state', '$stateParams','$ionicPopup', '$log'];

function signatureCtrl($cordovaFileTransfer,$state, $stateParams, $ionicPopup, $log) {

    var vm = this;

    var wrapper = document.getElementById("signature-pad"),
    clearButton = wrapper.querySelector("[data-action=clear]"),
    saveButton = wrapper.querySelector("[data-action=save]"),
    canvas = wrapper.querySelector("canvas"),
    signaturePad;

    window.onresize = resizeCanvas;
    resizeCanvas();

    signaturePad = new SignaturePad(canvas);

    clearButton.addEventListener("click", function (event) {
        signaturePad.clear();
    });

    saveButton.addEventListener("click", function (event) {

        if (signaturePad.isEmpty()) {

            // notify the user that the signature is empty
            $ionicPopup.alert({
                title: 'Signature pad is empty.',
                template: 'Please provide signature first.'
            });

        } else {
            $log.debug('TODO: Send png.');


            // Destination URL 
            var url = "http://foo/upload/upload.php";

             //File for Upload
             var targetPath = signaturePad.toDataURL("image/png", 1.0);

             // File name only
             var filename = ""+$stateParams.id +".png";

             var options = {
              fileKey: "file",
              fileName: filename,
              chunkedMode: false,
              mimeType: "image/png",
              params : {'directory':'upload', 'fileName':filename}
          };

          $cordovaFileTransfer.upload(url, targetPath, options).then(function (result) {
              $log.debug("SUCCESS: " + JSON.stringify(result.response));
          }, function (err) {
              $log.debug("ERROR: " + JSON.stringify(err));
          }, function (progress) {
                  // PROGRESS HANDLING GOES HERE
              });


          signaturePad.clear();

            // notify the user that the signature is empty
            $ionicPopup.alert({
                title: 'Success!',
                template: 'Signature saved.'
            });

            $state.go("app.master-bill", {id: $stateParams.id});
        }
    });

    //PROBLEM IS SOMEWHERE IN HERE!!!!
    function resizeCanvas(){
        var ratio = Math.max(window.devicePixelRatio || 1, 1);
        canvas.width = canvas.offsetWidth * ratio;
        canvas.height = canvas.offsetHeight * ratio;
        canvas.getContext("2d").scale(ratio, ratio);
    }

};
})();

请注意我知道问题在于resizeCanvas（）函数，因为如果我删除它，应用程序不会冻结，但签名的绘制是倾斜的，所以我需要该函数才能工作。

我可以更改什么来使resizeCanvas功能起作用？提前谢谢。

Answer 1

我刚刚在真实设备上测试了我的应用，签名页面运行正常。它只是由于某种原因冻结的模拟器。如果有人在模拟器上知道解决方法，请分享。

调整画布大小会导致模拟器上的离子应用程序冻结

1 个答案: