如何调整angular2-signaturepad的大小
How to resize angular2-signaturepad
我需要动态更改签名板的宽度。我该怎么做?
<signature-pad class="signature w-50-p" id="sign_canvas" fxFlexAlign.xs="center"></signature-pad>
你可以试试这个:
input signature ng-model="signatureOne"></input>
<input signature ng-model="signatureTwo
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();
}
我今天 Angular 11 日实现了这个。这个答案建立在 Markomar 的答案之上。希望这可以减轻一些人的头痛。简而言之,由于一些奇怪的下划线,我不得不使用 queryPad() 方法手动设置 canvas 大小。我在我喜欢大小的元素上使用了模板变量 (#form),并使用 AfterViewInit 而不是 OnInit,因此它正确初始化了。
@ViewChild('form') formElement: ElementRef;
resizeSignature() {
this.signature.queryPad()._canvas.width = this.formElement?.nativeElement.offsetWidth;
}
ngAfterViewInit(): void { this.resizeSignature(); }
试试这个
在你的 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>
我需要动态更改签名板的宽度。我该怎么做?
<signature-pad class="signature w-50-p" id="sign_canvas" fxFlexAlign.xs="center"></signature-pad>
你可以试试这个:
input signature ng-model="signatureOne"></input>
<input signature ng-model="signatureTwo
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();
}
我今天 Angular 11 日实现了这个。这个答案建立在 Markomar 的答案之上。希望这可以减轻一些人的头痛。简而言之,由于一些奇怪的下划线,我不得不使用 queryPad() 方法手动设置 canvas 大小。我在我喜欢大小的元素上使用了模板变量 (#form),并使用 AfterViewInit 而不是 OnInit,因此它正确初始化了。
@ViewChild('form') formElement: ElementRef;
resizeSignature() {
this.signature.queryPad()._canvas.width = this.formElement?.nativeElement.offsetWidth;
}
ngAfterViewInit(): void { this.resizeSignature(); }
试试这个
在你的 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>