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,就可以看到成果了

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

体会一下hop-by-hop逐跳头中的路由器告警选项(Router Alert Option)的玩法
君不见浙江温州皮鞋湿,下雨进水不会胖! 说实话,IP协议的逐跳选项用的真不是很多,但是却必不可少. 在IPv4中,它作为一个普通的IP选项塞入变长的IPv4头中,加以必须被路由器处理之约束. 在IPv ...
天地伟业tiandy如何连手机_如何在一张照片中表现两个时间体系——手机摄影的高级玩法...
在我们的神话体系中关于时间有这样一个说法--天上过一天就相当于地上过一年,就是说天地之间的时间运行速度是不同的. 我们看一下上面这张照片,可能有些朋友会说"这有什么啊,不就是一个慢门效果么. ...
抖音修改签名服务器,抖音怎么修改个性签名抖音经典热门个签句子大全
现在抖音成为了每个年轻人必备软件,在填写个人资料的时候,个性签名就显得十分的重要了,好的个签能让人记忆犹新.那么抖音怎么修改个性签名?经典热门个签句子有哪些?下面我们小编带来介绍. 抖音怎么修改个性签 ...
VB个性签名——在图片上写字
本文将通过"个性签名"这样一个简单的例子,来说明如何在图片上输出文字. 步骤一: 新建一个项目,控件只有两个:一个窗体,一个PictureBox. 步骤二: 修改窗体BorderS ...
android 微信朋友圈头像,微信进阶玩法，这样设置朋友圈和头像，个性又好看
今日分享:微信头像.昵称.个性签名新玩法适用系统:安卓.苹果对于很多人来说,微信的使用已经融入了生活的方方面面,现在大部分人都使用微信来联络感情,平时加了一个新的微信好友,我们初步了解一个微信朋友 ...
uniapp 小程序 APP 实现手写板签名画图 canvas 保存为图片格式
文章目录 uniapp 小程序 APP 实现手写板签名画图 canvas 保存为图片格式一.手写板 1.H5代码 2.JS代码总结 uniapp 小程序 APP 实现手写板签名画图 can ...
教你使用 Reflector中的Reflexil插件反编译.NET，修复Help Viewer v2.0 - Error: .cab未经Microsoft签名
教你使用 Reflector中的Reflexil插件反编译.NET,修复Help Viewer v2.0 - Error: Cab was not signed 1. 下载.NET Reflecto并 ...
php生成个性签名,怎么巧妙添加个性签名
求教:如何巧妙添加个性签名如何在一个PHP语言写的论坛上加上个性签名,前提是论坛管理把个性签名禁了.有没有什么办法在个性签名栏加个图片或者文字什么的呢? ------解决方案------------ ...
php个性签名,如何在discuz论坛帖子的个性签名前后插_php
几日前,一个朋友问我在discuz论坛中如何像动网一样在每楼帖子的末尾添加广告代码,因为在默认的帖子下方广告代码里添加高度稍高和宽度稍宽的代码都不美观.当时因为时间仓促,没有解决.刚刚有点时间,就顺便 ...

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

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

最新文章

热门文章