@eve-sama/ngx-signature-pad

页:1 简体中文

导言

适合角生态的手写签名插件 suppprt V15.

演示

您可以看到 API 的所有详细方向并演示 这里。在 PC 和 Mobile 模式下有模糊的内容。 PC强调文档,Mobile强调实例.

方向

此工程基于画布插件 签名( p),而画布插件仅具有基本功能,例如 signature canvas我把它封了起来,它有以下特征:

• 为 Angular 提供 API 更合适的样式 .
• 提供本地插件中没有的特性, 如 modify state of signature manually, (中文)revert painting, (中文)fullScreen to sign 诸如来.
• 您可以在运行时间更改配置, 如宽度/ 高度 .

安装

国家预防机制

npm install --save @eve-sama/ngx-signature-pad

线条

yarn add --save @eve-sama/ngx-signature-pad

使用量

应用程序

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { NgxSignaturePadModule } from '@eve-sama/ngx-signature-pad';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // You need to import module of ngx-signature-pad
    NgxSignaturePadModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

应用程序

<ngx-signature-pad
  #signature
  [options]="options"
  (beginSign)="onBeginSign()"
  (endSign)="onEndSign()">
</ngx-signature-pad>

import { Component, ViewChild } from '@angular/core';
import { NgxSignaturePadComponent, NgxSignatureOptions } from '@eve-sama/ngx-signature-pad';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  /** Catch object, call functions via instance object */
  @ViewChild('signature') signature: NgxSignaturePadComponent;

  /** You can see more introduction in the below about NgxSignatureOptions */
  public options: NgxSignatureOptions = {
    backgroundColor: '#F4F5F5',
    width: 570,
    height: 300,
    css: {
      'border-radius': '16px'
    }
  };

  /** The begin event of sign */
  onBeginSign(): void { }

  /** The end event of sign */
  onEndSign(): void { }
}

Ngx 签名选项

实例方法

运行时修改配置

此插件允许您在运行期间修改配置, 只要修改您想要通过的选项 。 注意您不仅可以更改选项的属性 。 因为 OnChanges 在这种情况下不会触发。 您需要重新指定选项 。 例如,初步备选方案如下:

const options: NgxSignatureOptions = {
  penColor: 'rgb(0, 0, 0)', // Black
  width: 300,
  height: 150
};

运行后代码,如果您想要更改笔的颜色,如果您将代码写入下面,则无效.

options.penColor = 'rgb(255, 0, 0)'; // Does not work, because can not trigger OnChanges

你需要重新分配如下.

const options: NgxSignatureOptions = {
  penColor: 'rgb(255, 0, 0)' // Change the black to red
  width: 300,
  height: 150
};