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...
-
Install this module, canvas-manipulation and signature_pad using npm
npm install @blinkmobile/angular-signature-pad @blinkmobile/[email protected] [email protected] --save -
Add the module to your app
angular.module('app', [ 'bmSignaturePad', ]);
-
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>
<!--
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>All attributes are optional with the exception of ngModel
| Attribute | Value | Comments |
|---|---|---|
ng-model |
String | Reference 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 |
options |
Object | All signature_pad options are valid. |
crop |
Expression | Return a truthy value if the signature should be cropped of white space when ngModel is set. |
image-type |
Expression | Return an image type to use when ngModel is set. See HTMLCanvasElement.toDataUrl() type parameter for options and default |
image-encoder |
Expression | Return an image encoder to use when ngModel is set. See HTMLCanvasElement.toDataUrl() encoderOptions parameter for options and default |
scale-down |
Expression | Return a truthy value if the signature should be scaled down when calling the function exposed via resize. |
resize |
Expression | Exposes 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. |
-
Use CSS to manage the
widthandheightof 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 exposedresize()function which will reset thewidthandheightattributes of the<canvas>element. See the Hosted Example to see this in action. For more details regarding Canvas elements, see Sizing The CanvasThe 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
canvasto be something other than transparent, use CSS to change the background instead of setting theoptions.backgroundColor. Setting this option will prevent cropping from working correctly.
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.
-
Install Node 10.x or higher
-
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.
-
Install dependencies
npm install -
Start demo
npm start -
Open http://localhost:8080/docs/ in your browser