angular - Wie man angular2-signaturepad in der Größe ändert

Ich muss die Breite des Unterschriftenfelds dynamisch ändern. Wie kann ich das tun?

<signature-pad class="signature w-50-p" id="sign_canvas" fxFlexAlign.xs="center"></signature-pad>

(angular2-signaturepad)

Antwort #1

html :

<signature-pad fxFlex="1 1 50" (window:resize)="resizeSignaturePad()"
                         class="signature" 
                         id="sign_canvas" fxFlexAlign.xs="center"></signature-pad>

ts :

resizeSignaturePad() {
    this.signaturePad.set('canvasWidth', document.getElementById("sign_canvas").offsetWidth);
    this.signaturePad.clear();
}

Antwort #2

Ich habe dies heute in Angular 11 implementiert. Diese Antwort baut auf Markomars Antwort auf. Hoffentlich erspart dies jemandem Kopfschmerzen. Kurz gesagt, ich musste die Canvas-Größe manuell mit der queryPad()-Methode einstellen wegen eines seltsamen Unterstrichs. Ich habe eine Template-Variable (#form) auf einem Element verwendet, dessen Größe mir gefiel, und AfterViewInit statt OnInit benutzt, damit es korrekt initialisiert wurde.

@ViewChild('form') formElement: ElementRef;

resizeSignature() {
    this.signature.queryPad()._canvas.width = this.formElement?.nativeElement.offsetWidth;
}

ngAfterViewInit(): void { this.resizeSignature(); }