Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Multiple lines of text in watermark

Browse Source
This commit is contained in:
Adina Țeudan 2020-12-10 18:32:36 +02:00
parent da2803f446
commit e31e749aec
2 changed files with 25 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
View File

@ -24,7 +24,7 @@
<form [formGroup]="configForm" (keyup)="configChanged()">
<div class="red-input-group">
<label translate="Text"></label>
<input formControlName="text" name="text" type="text" />
<textarea formControlName="text" name="text" type="text" rows="3"></textarea>
</div>
<div class="red-input-group">
<label translate="Color"></label>

48
apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.ts
View File

@ -16,8 +16,8 @@ import { debounce } from '../../../utils/debounce';
export class WatermarkScreenComponent implements OnInit {
private _instance: WebViewerInstance;
private _initialConfig = {
text: 'Watermark',
color: '#000',
text: 'Watermark\nWatermark line 2\nWatermark line3',
color: '#000000',
opacity: 50
};
@ -69,12 +69,11 @@ export class WatermarkScreenComponent implements OnInit {
instance.docViewer.on('documentLoaded', () => {
this.viewReady = true;
this._drawWatermark();
this._changeDetectorRef.detectChanges();
});
this._disableElements();
this._drawWatermark();
this._instance.loadDocument(`${window.location.origin}/assets/pdftron/sample.pdf`);
});
}
@ -84,28 +83,24 @@ export class WatermarkScreenComponent implements OnInit {
}
private _drawWatermark() {
this._instance.docViewer.setWatermark({
// Draw diagonal watermark in middle of the document
diagonal: {
fontSize: 25, // or even smaller size
fontFamily: 'sans-serif',
color: 'red',
opacity: 50, // from 0 to 100
text: 'Watermark'
}
});
}
const lines = this.configForm.get('text').value.split('\n');
const fontSize = 40;
const lineHeight = fontSize + 10;
@debounce()
public configChanged() {
this._instance.docViewer.setWatermark({
// Draw diagonal watermark in middle of the document
diagonal: {
fontSize: 30,
fontFamily: 'sans-serif',
color: this.configForm.get('color').value,
opacity: this.configForm.get('opacity').value, // from 0 to 100
text: this.configForm.get('text').value
custom: (ctx, pageNumber, pageWidth, pageHeight) => {
ctx.fillStyle = this.configForm.get('color').value;
ctx.font = `${fontSize}pt Arial`;
ctx.globalAlpha = this.configForm.get('opacity').value / 100;
for (let idx = 0; idx < lines.length; ++idx) {
ctx.save();
ctx.translate(pageWidth / 2 - (lineHeight * (lines.length - 1)) / 4, pageHeight / 2 - (lineHeight * lines.length) / 2);
ctx.rotate(-Math.PI / 4);
ctx.translate(-40, 0);
ctx.fillText(lines[idx], 0, idx * lineHeight);
ctx.restore();
}
}
});
@ -113,6 +108,11 @@ export class WatermarkScreenComponent implements OnInit {
this._instance.docViewer.updateView([0], 0);
}
@debounce()
public configChanged() {
this._drawWatermark();
}
public save() {
this._initialConfig = {
...this.configForm.getRawValue()