1.最终效果图
2.引入插件
执行命令：npm install angular2-signaturepad --save
3.页面布局
<div style="margin-top: 1rem;">
<ion-item no-lines>
<ion-label><span style="color: red;">*</span>患者签名</ion-label>
</ion-item>
<signature-pad [options]="signaturePadOptionshz" id="signatureCanvashz" placeholder="请手绘签名"></signature-pad>
<ion-row >
<ion-col>
<button ion-button block color="themegreen" (click)="drawClear()"> 签名清除 </button>
</ion-col>
<ion-col>
<button ion-button block color="themegreen" (click)="subClick(recData)"> 提交 </button>
</ion-col>
</ion-row>
</div>
4.页面引用
import { SignaturePad } from 'angular2-signaturepad/signature-pad';
import { Component, ViewChild } from '@angular/core';
@ViewChild(SignaturePad) public signaturePad: SignaturePad;
signatureImagehz: string = '';
signaturePadOptionshz: Object = {
'minWidth': 4,
'canvasWidth': 220,
'canvasHeight': 420
};
ngAfterViewInit() {
this.signaturePad.clear();
this.canvasResize();
}
drawClear() {
this.signaturePad.clear();
this.signatureImagehz = '';
this.conf.signatureImagehz = '';
}
canvasResize() {
this.canvas = document.querySelector('canvas');
this.signaturePad.set('minWidth', 4);
let signaWidth = this.platform.width();
let signaHeigth = this.platform.height();
this.canvas.width = signaWidth;
}
drawComplete() {
if (this.conf.signatureImagehz != '') {
this.showToastMessage("请勿重复保存");
return;
}
this.signatureImagehz = this.signaturePad.toDataURL();
this.conf.signatureImagehz = this.signatureImagehz;
}
5.app.module页面定义
import { SignaturePadModule } from 'angular2-signaturepad';
imports: [
SignaturePadModule,
...
]
6.说明
通过minWidth设置笔锋的粗细，大小可根据自己页面实际大小调整，绘制区域高度通过canvasHeight值进行调整。
