Skip to content

Commit 11b85a4

Browse files
OriginRingOriginRing
authored
feat(module:watermark): add watermark component (#7857)
* feat(module:watermark): add watermark component * feat(module:watermark): add watermark component test * feat(module:watermark): color demo use ngx-color * feat(module:watermark): modify the DOM structure
1 parent d54b3b4 commit 11b85a4

24 files changed

+969
-0
lines changed

‎.github/CODEOWNERS

+1
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ components/pipes/** @chensimeng
6969
components/image/** @stygian-desolator
7070
components/qr-code/** @OriginRing
7171
components/cron-expression/** @OriginRing
72+
components/water-mark/** @OriginRing
7273

7374
# The `components/core/*` owners
7475
components/core/config/** @hullis

‎components/components.less

+1
Original file line numberDiff line numberDiff line change
@@ -64,3 +64,4 @@
6464
@import './image/style/entry.less';
6565
@import './cron-expression/style/entry.less';
6666
@import './qr-code/style/entry.less';
67+
@import './water-mark/style/entry.less';

‎components/water-mark/demo/basic.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 0
3+
title:
4+
zh-CN: 基本
5+
en-US: Basic
6+
---
7+
8+
## zh-CN
9+
10+
最简单的用法。
11+
12+
## en-US
13+
14+
The most basic usage.

‎components/water-mark/demo/basic.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'nz-demo-water-mark-basic',
5+
template: `
6+
<nz-water-mark nzContent="NG Ant Design">
7+
<div style="height: 500px"></div>
8+
</nz-water-mark>
9+
`
10+
})
11+
export class NzDemoWaterMarkBasicComponent {}

‎components/water-mark/demo/custom.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 3
3+
title:
4+
zh-CN: 自定义配置
5+
en-US: Custom configuration
6+
---
7+
8+
## zh-CN
9+
10+
通过自定义参数配置预览水印效果。
11+
12+
## en-US
13+
14+
Preview the watermark effect by configuring custom parameters.

‎components/water-mark/demo/custom.ts

+191
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
2+
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
3+
4+
import { ColorEvent } from 'ngx-color/color-wrap.component';
5+
6+
import { FontType } from 'ng-zorro-antd/water-mark';
7+
8+
@Component({
9+
selector: 'nz-demo-water-mark-custom',
10+
template: `
11+
<div style="display: flex;">
12+
<nz-water-mark
13+
[nzContent]="content"
14+
[nzRotate]="rotate"
15+
[nzZIndex]="zIndex"
16+
[nzGap]="gap"
17+
[nzOffset]="offset"
18+
[nzFont]="font"
19+
>
20+
<p nz-typography style="z-index: 10; position:relative;">
21+
The light-speed iteration of the digital world makes products more complex. However, human consciousness and
22+
attention resources are limited. Facing this design contradiction, the pursuit of natural interaction will be
23+
the consistent direction of Ant Design.
24+
</p>
25+
<p nz-typography style="z-index: 10; position:relative;">
26+
Natural user cognition: According to cognitive psychology, about 80% of external information is obtained
27+
through visual channels. The most important visual elements in the interface design, including layout, colors,
28+
illustrations, icons, etc., should fully absorb the laws of nature, thereby reducing the user&apos;s cognitive
29+
cost and bringing authentic and smooth feelings. In some scenarios, opportunely adding other sensory channels
30+
such as hearing, touch can create a richer and more natural product experience.
31+
</p>
32+
<p nz-typography style="z-index: 10; position:relative;">
33+
Natural user behavior: In the interaction with the system, the designer should fully understand the
34+
relationship between users, system roles, and task objectives, and also contextually organize system functions
35+
and services. At the same time, a series of methods such as behavior analysis, artificial intelligence and
36+
sensors could be applied to assist users to make effective decisions and reduce extra operations of users, to
37+
save users&apos; mental and physical resources and make human-computer interaction more natural.
38+
</p>
39+
<img
40+
style="z-index: 30; position:relative; width: 100%; max-width: 800px;"
41+
src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ"
42+
alt="示例图片"
43+
/>
44+
</nz-water-mark>
45+
<nz-divider nzType="vertical"></nz-divider>
46+
<form nz-form nzLayout="vertical" [formGroup]="validateForm">
47+
<nz-form-item>
48+
<nz-form-label>Content</nz-form-label>
49+
<nz-form-control>
50+
<input nz-input type="text" formControlName="content" />
51+
</nz-form-control>
52+
</nz-form-item>
53+
<nz-form-item>
54+
<nz-form-label>Color</nz-form-label>
55+
<nz-form-control>
56+
<div
57+
class="theme-pick-wrap"
58+
nz-popover
59+
[nzPopoverTrigger]="'click'"
60+
nzPopoverOverlayClassName="theme-color-content"
61+
[nzPopoverContent]="colorTpl"
62+
>
63+
<div class="theme-pick" [ngStyle]="{ background: color }"></div>
64+
</div>
65+
<ng-template #colorTpl>
66+
<color-sketch [color]="color" (onChangeComplete)="changeColor($event)"></color-sketch>
67+
</ng-template>
68+
</nz-form-control>
69+
</nz-form-item>
70+
<nz-form-item>
71+
<nz-form-label>FontSize</nz-form-label>
72+
<nz-form-control>
73+
<nz-slider formControlName="fontSize"></nz-slider>
74+
</nz-form-control>
75+
</nz-form-item>
76+
<nz-form-item>
77+
<nz-form-label>zIndex</nz-form-label>
78+
<nz-form-control>
79+
<nz-slider formControlName="zIndex"></nz-slider>
80+
</nz-form-control>
81+
</nz-form-item>
82+
<nz-form-item>
83+
<nz-form-label>Rotate</nz-form-label>
84+
<nz-form-control>
85+
<nz-slider [nzMin]="-180" [nzMax]="180" formControlName="rotate"></nz-slider>
86+
</nz-form-control>
87+
</nz-form-item>
88+
<nz-form-item>
89+
<nz-form-label>Gap</nz-form-label>
90+
<nz-form-control>
91+
<nz-input-number formControlName="gapX"></nz-input-number>
92+
<nz-input-number formControlName="gapY"></nz-input-number>
93+
</nz-form-control>
94+
</nz-form-item>
95+
<nz-form-item>
96+
<nz-form-label>Offset</nz-form-label>
97+
<nz-form-control>
98+
<nz-input-number formControlName="offsetX"></nz-input-number>
99+
<nz-input-number formControlName="offsetY"></nz-input-number>
100+
</nz-form-control>
101+
</nz-form-item>
102+
</form>
103+
</div>
104+
`,
105+
styles: [
106+
`
107+
nz-water-mark {
108+
flex: 1 1 auto;
109+
}
110+
111+
nz-divider {
112+
height: auto;
113+
margin: 0 20px;
114+
}
115+
116+
form {
117+
flex: 0 0 280px;
118+
}
119+
120+
nz-input-number {
121+
margin-right: 12px;
122+
width: 40%;
123+
}
124+
125+
.theme-pick-wrap {
126+
padding: 4px;
127+
background: rgb(255, 255, 255);
128+
border-radius: 2px;
129+
box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px;
130+
display: inline-block;
131+
cursor: pointer;
132+
}
133+
134+
.theme-pick {
135+
width: 80px;
136+
height: 16px;
137+
border-radius: 2px;
138+
}
139+
`
140+
]
141+
})
142+
export class NzDemoWaterMarkCustomComponent implements OnInit {
143+
validateForm!: UntypedFormGroup;
144+
content: string = 'NG Ant Design';
145+
color: string = 'rgba(0,0,0,.15)';
146+
font: FontType = {
147+
color: 'rgba(0,0,0,.15)',
148+
fontSize: 16
149+
};
150+
zIndex: number = 11;
151+
rotate: number = -22;
152+
gap: [number, number] = [100, 100];
153+
offset: [number, number] = [50, 50];
154+
155+
constructor(private fb: UntypedFormBuilder, private cdr: ChangeDetectorRef) {}
156+
157+
ngOnInit(): void {
158+
this.validateForm = this.fb.group({
159+
content: ['NG Ant Design'],
160+
fontSize: [16],
161+
zIndex: [11],
162+
rotate: [-22],
163+
gapX: [100],
164+
gapY: [100],
165+
offsetX: [50],
166+
offsetY: [50]
167+
});
168+
169+
this.validateForm.valueChanges.subscribe(item => {
170+
this.content = item.content;
171+
this.font = {
172+
fontSize: item.fontSize,
173+
color: this.color
174+
};
175+
this.zIndex = item.zIndex;
176+
this.rotate = item.rotate;
177+
this.gap = [item.gapX, item.gapY];
178+
this.offset = [item.offsetX, item.offsetY];
179+
this.cdr.markForCheck();
180+
});
181+
}
182+
183+
changeColor(value: ColorEvent): void {
184+
this.color = value.color.hex;
185+
this.font = {
186+
fontSize: this.validateForm.get('fontSize')?.value,
187+
color: value.color.hex
188+
};
189+
this.cdr.markForCheck();
190+
}
191+
}

‎components/water-mark/demo/image.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 2
3+
title:
4+
zh-CN: 图片水印
5+
en-US: Image watermark
6+
---
7+
8+
## zh-CN
9+
10+
通过 `nzImage` 指定图片地址。为保证图片高清且不被拉伸，请设置 width 和 height, 并上传至少两倍的宽高的 logo 图片地址。
11+
12+
## en-US
13+
14+
Specify the image address via `nzImage`. To ensure that the image is high definition and not stretched, set the width and height, and upload at least twice the width and height of the logo image address.

‎components/water-mark/demo/image.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'nz-demo-water-mark-image',
5+
template: `
6+
<nz-water-mark
7+
[nzWidth]="212"
8+
[nzHeight]="32"
9+
nzImage="https://img.alicdn.com/imgextra/i3/O1CN01UR3Zkq1va9fnZsZcr_!!6000000006188-55-tps-424-64.svg"
10+
>
11+
<div style="height: 500px"></div>
12+
</nz-water-mark>
13+
`
14+
})
15+
export class NzDemoWaterMarkImageComponent {}

‎components/water-mark/demo/module

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { NzWaterMarkModule } from 'ng-zorro-antd/water-mark';
2+
import { NzTypographyModule } from 'ng-zorro-antd/typography';
3+
import { NzFormModule } from 'ng-zorro-antd/form';
4+
import { NzInputModule } from 'ng-zorro-antd/input';
5+
import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
6+
import { NzSliderModule } from 'ng-zorro-antd/slider';
7+
import { NzDividerModule } from 'ng-zorro-antd/divider';
8+
import { NzPopoverModule } from 'ng-zorro-antd/popover';
9+
import { ColorSketchModule } from "ngx-color/sketch";
10+
11+
export const moduleList = [ NzWaterMarkModule, NzTypographyModule, NzFormModule, NzInputModule, NzInputNumberModule, NzSliderModule, NzDividerModule, NzPopoverModule, ColorSketchModule ];

‎components/water-mark/demo/multi-line.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 1
3+
title:
4+
zh-CN: 多行水印
5+
en-US: Multi-line watermark
6+
---
7+
8+
## zh-CN
9+
10+
通过 `nzContent` 设置 字符串数组 指定多行文字水印内容。
11+
12+
## en-US
13+
14+
Use `nzContent` to set a string array to specify multi-line text watermark content.

‎components/water-mark/demo/multi-line.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'nz-demo-water-mark-multi-line',
5+
template: `
6+
<nz-water-mark [nzContent]="['Angular', 'NG Ant Design']">
7+
<div style="height: 500px"></div>
8+
</nz-water-mark>
9+
`
10+
})
11+
export class NzDemoWaterMarkMultiLineComponent {}

‎components/water-mark/doc/index.en-US.md

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
category: Components
3+
type: Other
4+
cols: 1
5+
title: WaterMark
6+
cover: https://img.alicdn.com/imgextra/i3/O1CN0194FGAd1FlrwQShfR8_!!6000000000528-0-tps-952-502.jpg
7+
---
8+
9+
Add specific text or patterns to the page.
10+
11+
## When To Use
12+
13+
- Use when the page needs to be watermarked to identify the copyright.
14+
- Suitable for preventing information theft.
15+
16+
```ts
17+
import { NzWaterMarkModule } from 'ng-zorro-antd/water-mark';
18+
```
19+
20+
## API
21+
22+
### nz-water-mark
23+
24+
| Property | Description | Type | Default |
25+
| ----------- | ------------------------------------------------------------------------------------------------- | -------------------- | ------------------------ |
26+
| `nzContent` | Watermark text content | `string ｜ string[]` | - |
27+
| `nzWidth` | The width of the watermark, the default value of `nzContent` is its own width | `number` | 120 |
28+
| `nzHeight` | The height of the watermark, the default value of `nzContent` is its own height | `number` | 64 |
29+
| `nzRotate` | When the watermark is drawn, the rotation Angle, unit `°` | `number` | -22 |
30+
| `nzZIndex` | The z-index of the appended watermark element | `number` | 9 |
31+
| `nzImage` | Image source, it is recommended to export 2x or 3x image, high priority (support base64 format) | `string` | - |
32+
| `nzFont` | Text style | `FontType` | FontType |
33+
| `nzGap` | The spacing between watermarks | `[number, number]` | [100, 100] |
34+
| `nzOffset` | The offset of the watermark from the upper left corner of the container. The default is `nzGap/2` | `[number, number]` | [nzGap[0]/2, nzGap[1]/2] |
35+
36+
### FontType
37+
38+
| Property | Description | Type | Default |
39+
| ------------ | ----------- | ------------------------------------- | --------------- |
40+
| `color` | font color | `string` | rgba(0,0,0,.15) |
41+
| `fontSize` | font size | `number` | 16 |
42+
| `fontWeight` | font weight | `normal ｜ light ｜ weight ｜ number` | normal |
43+
| `fontFamily` | font family | `string` | sans-serif |
44+
| `fontStyle` | font style | `none ｜ normal ｜ italic ｜ oblique` | normal |
45+
46+
## FAQ
47+
48+
### Handle abnormal image watermarks
49+
50+
When using an image watermark and the image loads abnormally, you can add `nzContent` at the same time to prevent the watermark from becoming invalid.
51+
52+
```ts
53+
<nz-water-mark
54+
[nzWidth]="212"
55+
[nzHeight]="32"
56+
nzContent="NG Ant Design"
57+
nzImage="https://img.alicdn.com/imgextra/i3/O1CN01UR3Zkq1va9fnZsZcr_!!6000000006188-55-tps-424-64.svg"
58+
>
59+
<div style="height: 500px"></div>
60+
</nz-water-mark>
61+
```

0 commit comments

Comments
 (0)