Signature Pad in ionic Using Modal

ionic-v1
1

I am trying to implement the SignaturePad plugin in my App using szimek/signature_pad
But the they have implemented using jquery.Now am trying to implement it in Angular js.

I have added required js and css file for canvas in the path.and I am populating the signature pad canvas using modal in ionic.

    /*SignaturePad*/
$ionicModal.fromTemplateUrl('templates/signature.html', {
scope: $scope,
animation: 'slide-in-up'
 }).then(function(modal) {
$scope.modal = modal;
var canvas=angular.element("#signature-pad")
siganturePad = new SignaturePad(canvas);
signaturePad.minWidth = 5;
signaturePad.maxWidth = 10;
signaturePad.penColor = "rgb(66, 133, 244)";

});
$scope.openModal = function() {
$scope.modal.show();

};
$scope.closeModal = function() {
$scope.modal.hide();
};
//Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
 // Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
});
// Execute action on remove modal
 $scope.$on('modal.removed', function() {
  // Execute action
});

But the SignaturePad is not initializing in the modal.How can I implement this? or Are you guys having Someother Plugin for Siganture?

2

Hola! Yo estoy realizando un Plugin para Firma/Signature en Ionic Framework, pero estoy teniendo un desfase en cuanto a la posición del puntero y la línea que se dibuja en el Canvas. Alguien que nos pueda ayudar con esto?

Prueba 1: http://codepen.io/jdnichollsc/pen/cJvLi
Prueba 2: http://codepen.io/jdnichollsc/pen/socfb

También probé este ejemplo http://szimek.github.io/signature_pad/ en un Modal de Ionic pero tengo el mismo error :frowning:

1 Like
3

@jdnichollsc jdnichollsc .Did you fix the problem?

4 
controller('MyController', function ($scope, $state, $stateParams, $rootScope, $ionicModal) {
    var canvas;
    var signaturePad;
    $scope.signature = undefined;
    $scope.showLogoutButton = false;

    $ionicModal.fromTemplateUrl('templates/signatureModal.html', {
        scope: $scope,
        animation: 'slide-in-up'
    }).then(function (modal) {
        $scope.modal = modal;
    });

    $scope.closeSignatureModal = function () {
        $scope.modal.hide();
    };

    $scope.$on('$destroy', function() {
        $scope.modal.remove();
    });

    $scope.showSignatureModal = function () {
        $scope.modal.show();
        // gotta wait until template is injected into dom;
        canvas = document.getElementById('signatureCanvas');
        signaturePad = new SignaturePad(canvas);
    };

    $scope.signed = function () {
        if (signaturePad != undefined){
            $scope.signature = signaturePad.toDataURL("image/png");
            $scope.showLogoutButton = true;
        }
        $scope.modal.hide();
5

@phaggood refer this topic.SignaturePad

6

Try! http://codepen.io/jdnichollsc/pen/socfb

7

used ratio=1.0 to fix the pointer position issue
//var ratio = window.devicePixelRatio || 1;
var ratio = 1.0;
var canvas= document.getElementById(‘signatureCanvas’);
if(canvas) {
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext(‘2d’).scale(ratio, ratio);
}