1.0.1 • Published 2 years ago

@blinkmobile/angular-signature-pad v1.0.1

Weekly downloads
257
License
MIT
Repository
github
Last release
2 years ago

blinkmobile / angular-signature-pad npm AppVeyor Status Travis CI Status Greenkeeper badge

AngularJS 1.x component for smooth canvas based signature drawing

This component does not apply any styling, it only places the canvas and allows you to bind your component to the signature pad by exposing the functionality provided by signature_pad. This means you must execute the exposed functions from your own buttons, events etc...

Installation

  1. Install this module, canvas-manipulation and signature_pad using npm

    npm install @blinkmobile/angular-signature-pad @blinkmobile/canvas-manipulation@1.x signature_pad@1.x --save
  2. Add the module to your app

    angular.module('app', [
      'bmSignaturePad',
    ]);
  3. Ensure these three modules are loaded e.g.

    <!DOCTYPE html>
    <html ng-app="app">
    <head>
      <script src="node_modules/signature_pad/dist/signature_pad.js"></script>
      <script src="node_modules/@blinkmobile/canvas-manipulation/dist/canvas-manipulation.js"></script>
      <script src="node_modules/@blinkmobile/angular-signature-pad/dist/angular-signature-pad.js"></script>
    </head>
    <body>
      ...
    </body>
    </html>

Usage

Basics

<!--
  Note the use of CSS to manage the width and height of the component
  instead of managing the width and height of the canvas element
-->
<bm-signature-pad ng-model="$ctrl.signature" style="width:100%;height:100px"></bm-signature-pad>

<button ng-click="$ctrl.signature = undefined">Clear</button>

<img ng-show="$ctrl.signature"
     ng-src="{{ $ctrl.signature }}"></img>

Attributes

All attributes are optional with the exception of ngModel

AttributeValueComments
ng-modelStringReference to bind value of signature pad to. When ngModel is set, crop, image-type and image-encoder attribute values will be used. ngModel is set to a DataUrl.Will be set to undefined if the canvas is emptyIf the value of the crop attribute is truthy, the signature will be cropped of white space before generating a DataUrlOtherwise the DataUrl will contain the entire canvas
optionsObjectAll signature_pad options are valid.
cropExpressionReturn a truthy value if the signature should be cropped of white space when ngModel is set.
image-typeExpressionReturn an image type to use when ngModel is set. See HTMLCanvasElement.toDataUrl() type parameter for options and default
image-encoderExpressionReturn an image encoder to use when ngModel is set. See HTMLCanvasElement.toDataUrl() encoderOptions parameter for options and default
scale-downExpressionReturn a truthy value if the signature should be scaled down when calling the function exposed via resize.
resizeExpressionExposes the resize() function provided by @blinkmobile/canvas-manipulation as $fn. However, the width and height will be set to width and height of the canvas' parent element and the scaleDown argument will be set to the value of the scale-down attribute.

Recommendations

  • Use CSS to manage the width and height of the <bm-signature-pad> element. During intialisation, the dimensions of the <canvas> element will be set to the dimensions of the <bm-signature-pad> element. If the dimensions of <bm-signature-pad> element change for any reason (e.g. browser resize or orientation change on a mobile device) make use of the exposed resize() function which will reset the width and height attributes of the <canvas> element. See the Hosted Example to see this in action. For more details regarding Canvas elements, see Sizing The Canvas

    The displayed size of the canvas can be changed using a stylesheet. The image is scaled during rendering to fit the styled size. If your renderings seem distorted, try specifying your width and height attributes explicitly in the attributes, and not using CSS.

  • If you would like the background of the canvas to be something other than transparent, use CSS to change the background instead of setting the options.backgroundColor. Setting this option will prevent cropping from working correctly.

Example

Note: The examples make use of a resize event on the window object and also $scope.$watch a DOM element property. Both of these practices are valid JavaScript and AngularJS, however, neither are ideal in production circumstances.

For more details on the resize event, see Event Reference: resize:

Since resize events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications.

For more details on $scope.$watch best practices, see Scope $watch Performance Considerations:

Dirty checking the scope for property changes is a common operation in Angular and for this reason the dirty checking function must be efficient. Care should be taken that the dirty checking function does not do any DOM access, as DOM access is orders of magnitude slower than property access on JavaScript object.

Running Example Locally

  1. Install Node 10.x or higher

  2. Clone this repository

    Note: The master branch can contain undocumented or backward compatibility breaking changes. You should checkout the latest release before running the demo.

  3. Install dependencies

    npm install
  4. Start demo

    npm start
  5. Open http://localhost:8080/docs/ in your browser

1.0.2-beta.1

2 years ago

1.0.1

3 years ago

1.0.0

5 years ago