From your command prompt/termial go to your app's root folder and execute:
ns plugin add @nativescript-community/drawingpad
tns plugin add nativescript-drawingpad
Android | iOS |
---|---|
Android | iOS |
---|---|
gcacace/android-signaturepad | SignatureView |
Blog post using Angular - http://tylerablake.com/nativescript/2019/05/02/capturing-signatures.html
<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:DrawingPad="@nativescript-community/drawingpad" loaded="pageLoaded">
<ActionBar title="NativeScript-DrawingPad" />
<ScrollView>
<StackLayout>
<DrawingPad:DrawingPad
height="400"
id="drawingPad"
penColor="{{ penColor }}" penWidth="{{ penWidth }}" />
</StackLayout>
</ScrollView>
</Page>
import { Frame, ImageSource } from '@nativescript/core';
import { DrawingPad } from '@nativescript-community/drawingpad';
// To get the drawing...
public getMyDrawing() {
const drawingPad = Frame.topmost().getViewById('myDrawingPad');
drawingPad.getDrawing().then((res) => {
console.log(res);
// At this point you have a native image (Bitmap on Android or UIImage on iOS)
// so lets convert to a NS Image using the ImageSource
const img = new ImageSource(res); // this can be set as the `src` of an `Image` inside your NSapplication now.
// now you might want a base64 version of the image
const base64imageString = image.toBase64String('jpg'); // if you need it as base64
});
}
// If you want to clear the signature/drawing...
public clearMyDrawing() {
const drawingPad = Frame.topmost().getViewById('myDrawingPad');
drawingPad.clearDrawing();
}
import { Component, ElementRef, ViewChild } from '@angular/core';
import { registerElement } from '@nativescript/angular';
import { ImageSource } from '@nativescript/core';
import { DrawingPad } from '@nativescript-community/drawingpad';
registerElement('DrawingPad', () => DrawingPad);
@Component({
selector: 'drawing-pad-example',
template: `
<ScrollView>
<StackLayout>
<DrawingPad
#DrawingPad
height="400"
id="drawingPad"
penColor="#ff4081"
penWidth="3"
>
</DrawingPad>
<StackLayout orientation="horizontal">
<Button text="Get Drawing" (tap)="getMyDrawing()"></Button>
<Button text="Clear Drawing" (tap)="clearMyDrawing()"></Button>
</StackLayout>
</StackLayout>
</ScrollView>
`
})
export class DrawingPadExample {
@ViewChild('DrawingPad') DrawingPad: ElementRef;
getMyDrawing(args) {
// get reference to the drawing pad
const pad = this.DrawingPad.nativeElement;
// then get the drawing (Bitmap on Android) of the drawingpad
let drawingImage;
pad.getDrawing().then((data) => {
console.log(data);
// At this point you have a native image (Bitmap on Android or UIImage on iOS)
// so lets convert to a NS Image using the ImageSource
const image = new ImageSource(data); // this can be set as the `src` of an `Image` inside your NS
drawingImage = image; // to set the src of an Image if needed.
// now you might want a base64 version of the image
const base64imageString = image.toBase64String('jpg'); // if you need it as base64
console.log('::IMG_BASE64::', base64imageString);
},
(err) => {
console.log(err);
}
);
}
clearMyDrawing(args) {
const pad = this.DrawingPad.nativeElement;
pad.clearDrawing();
}
}
penColor - (Color) - optionalProperty to specify the pen (stroke) color to use.
penWidth - (int) - optionalProperty to specify the pen (stroke) width to use.
clearOnLongPress - (boolean = true) - optional iOS OnlyGets/sets whether a long press will clear the view.
getDrawing() - Promise (returns image if successful)
getDrawingAsBase64(format?: "png" | "jpg" | "jpeg") - Promise (returns image as base64 string if successful)
clearDrawing() - clears the drawing from the DrawingPad view.
getDrawingSvg() - Promise (returns a Scalable Vector Graphics document)
NativeScript 可以使用 Javascript,CSS, XML 创建真正的 Native 跨平台应用,支持 iOS Android,NativeScript 将您的跨平台代码翻译成目标平台的代码。 UI 使用 XML 描述,CSS 样式,在编译时将 UI 转化成本地原生代码,最终得到正在的 Native 原生应用。 Telerik 公开了用于创建安卓、iOS和Windows Unive
NativeScript Command-Line Interface The NativeScript CLI lets you create, build, and deploy NativeScript-based apps on iOS and Android devices. Get it using: npm install -g nativescript What is Native
NativeScript-Snackbar �� �� �� NativeScript plugin for Material Design SnackBar component. Installation: NativeScript 7+:tns plugin add @nstudio/nativescript-snackbar NativeScript version prior to 7:t
Nativescript-Ripple This plugin aims to bring a native (or close to native) ripple implementation on Android and iOS. The android version uses a RippleDrawable and conserves the previous background, a
NativeScript-FloatingActionButton NativeScript plugin for Material Design Floating Action Button UI component. Installation Nativescript 7+: ns plugin add @nstudio/nativescript-floatingactionbutton Na
NativeScript CardView A NativeScript plugin to provide an XML widget to implement the Material Design CardView component. Installation NativeScript 7+: ns plugin add @nstudio/nativescript-cardview Nat