如何调整angular2-signaturepad的大小答案

【问题标题】：How to resize angular2-signaturepad如何调整angular2-signaturepad的大小
【发布时间】：2020-02-29 22:53:18
【问题描述】：

我需要动态更改签名板的宽度。我该怎么做？

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

(angular2-signaturepad)

【问题讨论】：

标签： angular typescript signaturepad

【解决方案1】：

试试这个

在您的 TS 中：

@ViewChild('signatureDiv') signatureDiv: ElementRef;
@HostListener('window:resize', ['$event'])
onResize(event) {
    this.handleSignatureCanvasSize(); //handle the resizing of signature pad canvas on resizing screen
}

ngAfterViewInit() {
    this.handleSignatureCanvasSize(); //handle the resizing of signature pad canvas on different screens
}

handleSignatureCanvasSize() {
    //handle the resizing of signature pad canvas on resizing screen
    const canvas = document.querySelector("canvas");
    const tempWidth = String(this.signatureDiv.nativeElement.clientWidth);
    const widthCanvas = tempWidth.concat("px");
    canvas.setAttribute("width", widthCanvas);
}

在您的 HTML 中添加参考：

                                <div class="signature-container" #signatureDiv align="center">
                                    <signature-pad [options]="signaturePadOptions" (onEndEvent)="drawComplete()">
                                    </signature-pad>
                                </div>

【讨论】：

【解决方案2】：

我今天在 Angular 11 上实现了这个。这个答案建立在 Markomar 的答案之上。希望这可以避免一些人头疼。简而言之，由于一些奇怪的下划线，我不得不使用 queryPad() 方法手动设置画布大小。我在我喜欢大小的元素上使用了模板变量 (#form)，并使用 AfterViewInit 而不是 OnInit，因此它可以正确初始化。

@ViewChild('form') formElement: ElementRef;

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

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

【讨论】：

不错，3.0.4，它说无法读取未定义的宽度，它试图访问的是画布而不是 _canvas。

【解决方案3】：

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();
}

【讨论】：

我遇到了同样的问题，签名板在调整大小时变白了，感谢以上内容，拯救了我的一天！
我认为这个答案不再适用于版本 3.*。

【解决方案4】：

你可以试试这个：

input signature ng-model="signatureOne"></input>
<input signature ng-model="signatureTwo

【讨论】：