Capture Drawings and Signatures in a NativeScript app

Brad Martin

NativeScript

Angular

Using the NativeScript-DrawingPad plugin in a NativeScript app you can create a drawing pad. This is great for capturing signatures or any touch drawing on the device.

We'll start by adding the plugin using the tns plugin add command. The name of the plugin is nativescript-drawingpad.

With the plugin installed, the first thing we need to do is declare the xml namespace for the view component. We're going to say dpad, and then you just reference the module which is nativescript-drawingpad. This allows us to use the view component on our page.

Here we'll go ahead and just add a stack-layout. Inside of the stack-layout we're going to add the drawing pad.

Now this right here is the class that is actually in the module. We're going to give this an ID of mydrawing, then we're going to set two unique properties on the drawingpad -- pen-color, we'll just do it to a shade of blue, and pen-width, which sets the stroke width of the drawing, and we'll use 7. We'll also just hard code a height here for the example of 250.

The next thing we need to do is we're going to add a button, so that when we tap the button we can actually convert this drawing into an image using one of the function that the drawingpad exposes.

We'll call the button getDrawing, and the tap event will also refer to the method called getDrawing. We can go a step further and have an image here. We'll just say drawingimage as the id, so when we tap the button we'll get the actual drawing converted to an image, and then we're going to set the source of this image.

First thing, is we're going to import from the nativescript-drawingpad plugin. We just get the drawing pad class, and we're also going to import a NativeScript module, the UIFrame.

We're only going to import the top-most function, and this will allow us to get the activity frame inside of our application, which will allow us to get the view components by their IDs with a nice helper method. We're going to declare a function that we call getDrawing, which is tied to the getDrawing button here, which will fire when we tap it. When we tap this button, what we want to do is get the drawing that we will write in here and convert it to an image, and output that as the source on the image tag that we added to the interface.

First, let's go ahead and get the drawingpad, so we'll say let dpad is equal to, and this is where the UIFrame module will come to help, we'll say topmost GetViewByID and call it mydrawing. We can set this to the type as drawingpad. We'll just say myimage, and again, topmost getViewByID and we called it drawingimage.

Now that we have the drawingpad and the image, we can actually just get the drawing using the getDrawing method provided from the drawingpad. It returns a promise, and the result is typically a bitmap which is the native image component.

What we want to do when we get the image result here in the promise, is to set it equal to our image source. We'll set the source property equal to the result. Now we'll just create a drawing here, and tap the button which should fire off the getDrawing function. Then we're going to set the image source. There you see the image has been set to what the drawing is.

Capture Drawings and Signatures in a NativeScript app

You must be a Pro Member to view code