角形签名纸

角组件 szimek/ 签名( p)。 。 。 .

现在支持角力22! 由独立组件和现代Angular信号API所建.

安装

npm install @almothafar/angular-signature-pad --save

执行

• 现场直播
• 来源

用法实例

API 与 API 相同 szimek/ 签名( p)。 。 。 .

选项如下 szimek/ 签名( p) 增加以下内容:

• 帆布宽度( px)
• 画布高度( px)

提供上述选项是为了避免从您的组件直接访问DOM来调整画布大小.

import { Component, viewChild } from '@angular/core';
import { SignaturePadComponent, NgSignaturePadOptions } from '@almothafar/angular-signature-pad';

@Component({
  selector: 'app-signature',
  standalone: true,
  imports: [SignaturePadComponent],
  template: `
    <signature-pad
      [options]="signaturePadOptions"
      (drawStart)="drawStart($event)"
      (drawEnd)="drawComplete($event)"
      (drawClear)="drawCleared()" />
  `
})
export class SignaturePadPage {

  public signaturePad = viewChild(SignaturePadComponent);

  public signaturePadOptions: NgSignaturePadOptions = { // passed through to szimek/signature_pad constructor
    minWidth: 5,
    canvasWidth: 500,
    canvasHeight: 300
  };

  ngAfterViewInit() {
    // this.signaturePad() is now available
    this.signaturePad().set('minWidth', 5); // set szimek/signature_pad options at runtime
    this.signaturePad().clear(); // invoke functions from szimek/signature_pad API
  }

  drawComplete(event: MouseEvent | Touch) {
    // will be notified of szimek/signature_pad's onEnd event
    console.log('Completed drawing', event);
    console.log(this.signaturePad().toDataURL());
  }

  drawStart(event: MouseEvent | Touch) {
    // will be notified of szimek/signature_pad's onBegin event
    console.log('Start drawing', event);
  }

  drawCleared() {
    // will be notified when clear() is called on the pad
    console.log('Pad cleared');
  }
}

从v9.x到v10.x的迁移

角地二十二相辅. 对等依赖范围保持不变(Angular) >=20.0.0),因此Angular 20/21上已有的v9消费者继续工作——没有API更改. 图书馆现在从Angular 22工具链起航,并且完全无区相容. 升级不需要修改代码.

从v8.x到v9.x的迁移

角19号投下 ——目前最小的同级依赖是Angular 20.0.0+.

drawEnd 不再发出 null {\fn华文楷体\fs16\1che0e0e0}安全. 如果你正在检查一个 null 事件发生时 drawEnd 处理器以检测清除后, 切换到新的专用 drawClear 输出 :

在(v8.x)之前:

<signature-pad (drawEnd)="onDrawEnd($event)"></signature-pad>

onDrawEnd(event: MouseEvent | Touch | null) {
  if (!event) {
    // pad was cleared
  }
}

在(v9.x)之后:

<signature-pad (drawEnd)="onDrawEnd($event)" (drawClear)="onDrawCleared()" />

onDrawEnd(event: MouseEvent | Touch) { }

onDrawCleared() {
  // pad was cleared
}

options 现在是一个 model() 信号,允许可选双向绑定:

<!-- one-way (as before) -->
<signature-pad [options]="myOptions" />

<!-- two-way (new) -->
<signature-pad [(options)]="myOptions" />

从v6.x迁移到v7.x

在v7.x中,该组件现在是独立的. 更新您的导入 :

在(v6.x)之前:

import { AngularSignaturePadModule } from '@almothafar/angular-signature-pad';

@NgModule({
  imports: [AngularSignaturePadModule]
})

在(v7.x)之后:

import { SignaturePadComponent } from '@almothafar/angular-signature-pad';

@Component({
  standalone: true,
  imports: [SignaturePadComponent]
})

或者如果你还在使用NgModule:

import { SignaturePadComponent } from '@almothafar/angular-signature-pad';

@NgModule({
  imports: [SignaturePadComponent]
})