ionic3中的手写板插件--个性签名、画图等简单玩法(ionic2也通用)

1、通过npm安装包angular2-signaturepad：

 npm install angular2-signaturepad --save，可以使用cnpm 安装，mac可以加入权限sudo 进行安装。

2、app.module.ts中引入插件:

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { SignaturePadModule } from 'angular2-signaturepad';// 签名插件

...//其他

@NgModule({
  declarations: [
  ... //其他页面
    QuestionnairePage,//使用签名功能的页面
  ...
  ],
  imports: [
  ...//其他
    SignaturePadModule,//填入手写板模块
    ...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
   ...//其他
    QuestionnairePage,
    ...
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    HttpServerProvider
  ]
})
export class AppModule {}

3、在要使用签名功能的QuestionnairePage页面使用：
在questionnaire.ts中：

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { SignaturePad } from 'angular2-signaturepad/signature-pad';//引入手写板

@IonicPage()
@Component({
  selector: 'page-questionnaire',
  templateUrl: 'questionnaire.html',
})
export class QuestionnairePage {
  @ViewChild(SignaturePad) public signaturePad: SignaturePad; //第二视图
  signatureImage: string; //定义类型
  signaturePadOptions: Object = {
    'minWidth': 2,
    'canvasWidth': 220,
    'canvasHeight': 120
  };
  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad QuestionnairePage');
  }
  ngAfterViewInit() {
    this.signaturePad.clear();
    this.canvasResize();
  }
  // 清除模板
  drawClear() {
    this.signaturePad.clear();
  }
  canvasResize() {
    let canvas = document.querySelector('canvas');
    this.signaturePad.set('minWidth', 2);
    this.signaturePad.set('canvasWidth', canvas.offsetWidth);
    this.signaturePad.set('canvasHeight', canvas.offsetHeight);
  }
  
  // 完成生成图片
  drawComplete(sign) {
    this.signatureImage = this.signaturePad.toDataURL();
    console.log(this.signatureImage);
  }
}

在questionnaire.html中：

<ion-header>

    <ion-navbar color="primary">
        <ion-title>
            问卷调查
        </ion-title>
    </ion-navbar>

</ion-header>


<ion-content>
  <div class="normal-page">
   <div class="footer">
            <div class="right-sign">
              <span>签名：</span>
              <signature-pad [options]="signaturePadOptions" id="signatureCanvas"></signature-pad>
              <span (click)='drawClear()'>清除</span>
            </div>
            <!-- <div>
              <button (click)='drawComplete()'>显示图片</button>
              <img [src]="signatureImage" *ngIf="signatureImage" />
            </div> -->
            <div class="btn">
              <button class="button" (click)='knows()'>我知道了</button>
            </div>
          </div>
  </div>
</ion-content>

questionnaire.module.ts中：

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { QuestionnairePage } from './questionnaire';
import { SignaturePadModule } from 'angular2-signaturepad';



@NgModule({
  declarations: [
    QuestionnairePage,
  ],
  imports: [
    SignaturePadModule,
    IonicPageModule.forChild(QuestionnairePage),
  ],
})
export class QuestionnairePageModule {}

questionnaire.scss中：

page-questionnaire{
signature-pad {
   canvas {
            border: dashed 1px #cccccc;
            width: 100%; 
            height: 120px;
          }
      }
}

重启ionic3服务：ionic serve,就可以看到成果了