File tree Expand file tree Collapse file tree 6 files changed +152
-0
lines changed Expand file tree Collapse file tree 6 files changed +152
-0
lines changed Original file line number Diff line number Diff line change @@ -68,6 +68,58 @@ function clearUserDrawing(args) {
6868exports .clearUserDrawing = clearUserDrawing;
6969```
7070
71+ ## Angular:
72+ ``` javascript
73+ import {Component , ElementRef , ViewChild } from ' @angular/core' ;
74+ import {registerElement } from " nativescript-angular/element-registry" ;
75+
76+ registerElement (" DrawingPad" , () => require (" nativescript-drawingpad" ).DrawingPad );
77+
78+ @Component ({
79+ selector: ' drawing-pad-example' ,
80+ template: `
81+ <ScrollView>
82+ <StackLayout>
83+ <DrawingPad #DrawingPad
84+ height="400"
85+ id="drawingPad"
86+ penColor="#ff4081" penWidth="3">
87+ </DrawingPad>
88+
89+ <StackLayout orientation="horizontal">
90+ <Button text="Get Drawing" (tap)="getMyDrawing()"></Button>
91+ <Button text="Clear Drawing" (tap)="clearMyDrawing()"></Button>
92+ </StackLayout>
93+ </StackLayout>
94+ </ScrollView>
95+ `
96+ })
97+ export class DrawingPadExample {
98+
99+ @ViewChild (" DrawingPad" ) DrawingPad: ElementRef;
100+
101+ getMyDrawing (args ) {
102+ // get reference to the drawing pad
103+ let pad = this .DrawingPad .nativeElement ;
104+
105+ // then get the drawing (Bitmap on Android) of the drawingpad
106+ let drawingImage;
107+ pad .getDrawing ().then (function (data ) {
108+ console .log (data);
109+ drawingImage = data;
110+ }, function (err ) {
111+ console .log (err);
112+ });
113+ }
114+
115+ clearMyDrawing (args ) {
116+ var pad = this .DrawingPad .nativeElement ;
117+ pad .clearDrawing ();
118+ }
119+ }
120+ ```
121+
122+
71123## Attributes
72124** penColor - (color string)** - * optional*
73125
Original file line number Diff line number Diff line change 1+ import { Component } from "@angular/core" ;
2+ import { DrawingPadExample } from "./drawing-pad.component.ts" ;
3+
4+ @Component ( {
5+ selector : "app" ,
6+ template : `
7+ <StackLayout>
8+ <drawing-pad-example></drawing-pad-example>
9+ </StackLayout>
10+ `
11+ } )
12+
13+ export class App {
14+
15+ }
Original file line number Diff line number Diff line change 1+ import { Component , ElementRef , ViewChild } from '@angular/core' ;
2+ import { registerElement } from "nativescript-angular/element-registry" ;
3+
4+ registerElement ( "DrawingPad" , ( ) => require ( "nativescript-drawingpad" ) . DrawingPad ) ;
5+
6+ @Component ( {
7+ selector : 'drawing-pad-example' ,
8+ template : `
9+ <ScrollView>
10+ <StackLayout>
11+ <DrawingPad #DrawingPad
12+ height="400"
13+ id="drawingPad"
14+ penColor="#ff4081" penWidth="3">
15+ </DrawingPad>
16+
17+ <StackLayout orientation="horizontal">
18+ <Button text="Get Drawing" (tap)="getMyDrawing()"></Button>
19+ <Button text="Clear Drawing" (tap)="clearMyDrawing()"></Button>
20+ </StackLayout>
21+ </StackLayout>
22+ </ScrollView>
23+ `
24+ } )
25+ export class DrawingPadExample {
26+
27+ @ViewChild ( "DrawingPad" ) DrawingPad : ElementRef ;
28+
29+ getMyDrawing ( args ) {
30+ // get reference to the drawing pad
31+ let pad = this . DrawingPad . nativeElement ;
32+
33+ // then get the drawing (Bitmap on Android) of the drawingpad
34+ let drawingImage ;
35+ pad . getDrawing ( ) . then ( function ( data ) {
36+ console . log ( data ) ;
37+ drawingImage = data ;
38+ } , function ( err ) {
39+ console . log ( err ) ;
40+ } ) ;
41+ }
42+
43+ clearMyDrawing ( args ) {
44+ var pad = this . DrawingPad . nativeElement ;
45+ pad . clearDrawing ( ) ;
46+ }
47+ }
Original file line number Diff line number Diff line change 1+ import { nativeScriptBootstrap } from "nativescript-angular/application" ;
2+ import { App } from "./App" ;
3+
4+ nativeScriptBootstrap ( App ) ;
Original file line number Diff line number Diff line change 1+ {
2+ "nativescript" : {
3+ "id" : " org.nativescript.signaturepad" ,
4+ "main" : " main.js" ,
5+ "tns-ios" : {
6+ "version" : " 2.0.0"
7+ },
8+ "tns-android" : {
9+ "version" : " 2.0.0"
10+ }
11+ },
12+ "dependencies" : {
13+ "@angular/common" : " 2.0.0-rc.1" ,
14+ "@angular/compiler" : " 2.0.0-rc.1" ,
15+ "@angular/core" : " 2.0.0-rc.1" ,
16+ "@angular/router-deprecated" : " 2.0.0-rc.1" ,
17+ "@angular/platform-browser" : " 2.0.0-rc.1" ,
18+ "@angular/platform-browser-dynamic" : " 2.0.0-rc.1" ,
19+ "@angular/platform-server" : " 2.0.0-rc.1" ,
20+ "nativescript-angular" : " ^0.1.1" ,
21+ "nativescript-drawingpad" : " file:.." ,
22+ "tns-core-modules" : " latest"
23+ },
24+ "devDependencies" : {
25+ "nativescript-dev-typescript" : " ^0.3.2"
26+ }
27+ }
Original file line number Diff line number Diff line change 28282929 "url" : " https://github.com/bradmartin"
3030 },
31+ "contributors" : [
32+ {
33+ "name" : " Leo Caseiro" ,
34+ 35+ "url" : " https://github.com/leocaseiro"
36+ },
37+ ],
3138 "license" : " Apache-2.0" ,
3239 "bugs" : {
3340 "url" : " https://github.com/bradmartin/nativescript-drawingpad/issues"
You can’t perform that action at this time.
0 commit comments