Skip to content

Commit

Permalink
feat: 水印
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sanqi9675
Sanqi9675 committed Dec 26, 2023
1 parent a22d870 commit 1b37564
Show file tree
Hide file tree
Showing 6 changed files with 17 additions and 17 deletions.
3 changes: 2 additions & 1 deletion packages/quark-react/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ import DropdownItem, {
DropdownItemOption,
DropdownItemProps,
} from "./dropdown-item";

import WaterMark from "./watermark";
export {
ActionSheet,
Badge,
Expand Down Expand Up @@ -175,4 +175,5 @@ export {
DropdownItemInstance,
DropdownItemOption,
DropdownItemProps,
WaterMark,
};
4 changes: 2 additions & 2 deletions packages/quarkd/src/watermark/doc-react.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@ this.$refs.watermark.setText(["quark-design", "A component library"]);
| width | watermark width | `string` or `number` | `120` |
| height | watermark height | `string` or `number` | `64` |
| rotate | The rotation angle when drawing the watermark,unit ° | `string` or `number` | `-22` |
| fontSize | text size | `string` or `number` | `14` |
| fontColor | text color | `string` | `rgba(0, 0, 0, .15)` |
| fontsize | text size | `string` or `number` | `14` |
| fontcolor | text color | `string` | `rgba(0, 0, 0, .15)` |
| gapx | horizontal spacing between watermarks | `string` or `number` | `24` |
| gapy | vertical spacing between watermarks | `string` or `number` | `48` |

Expand Down
4 changes: 2 additions & 2 deletions packages/quarkd/src/watermark/doc-react.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@ this.$refs.watermark.setText(["quark-design", "A component library"]);
| width | 水印宽度 | `string` or `number` | `120` |
| height | 水印高度 | `string` or `number` | `64` |
| rotate | 水印绘制时，旋转的角度，单位 ° | `string` or `number` | `-22` |
| fontSize | 文字大小 | `string` or `number` | `14` |
| fontColor | 文字颜色 | `string` | `rgba(0, 0, 0, .15)` |
| fontsize | 文字大小 | `string` or `number` | `14` |
| fontcolor | 文字颜色 | `string` | `rgba(0, 0, 0, .15)` |
| gapx | 水印之间的水平间距 | `string` or `number` | `24` |
| gapy | 水印之间的垂直间距 | `string` or `number` | `48` |

Expand Down
6 changes: 3 additions & 3 deletions packages/quarkd/src/watermark/doc.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import "quarkd/lib/watermark";
### Adjust the watermark spacing

```html
<quark-watermark text="quark-design" gapY="24" gapX="48" />
<quark-watermark text="quark-design" gapy="24" gapx="48" />
```

### Multiline text watermark
Expand All @@ -50,8 +50,8 @@ this.$refs.watermark.setText(["quark-design", "A component library"]);
| width | watermark width | `string` or `number` | `120` |
| height | watermark height | `string` or `number` | `64` |
| rotate | The rotation angle when drawing the watermark,unit ° | `string` or `number` | `-22` |
| fontSize | text size | `string` or `number` | `14` |
| fontColor | text color | `string` | `rgba(0, 0, 0, .15)` |
| fontsize | text size | `string` or `number` | `14` |
| fontcolor | text color | `string` | `rgba(0, 0, 0, .15)` |
| gapx | horizontal spacing between watermarks | `string` or `number` | `24` |
| gapy | vertical spacing between watermarks | `string` or `number` | `48` |

Expand Down
4 changes: 2 additions & 2 deletions packages/quarkd/src/watermark/doc.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@ this.$refs.watermark.setText(["quark-design", "A component library"]);
| width | 水印宽度 | `string` or `number` | `120` |
| height | 水印高度 | `string` or `number` | `64` |
| rotate | 水印绘制时，旋转的角度，单位 ° | `string` or `number` | `-22` |
| fontSize | 文字大小 | `string` or `number` | `14` |
| fontColor | 文字颜色 | `string` | `rgba(0, 0, 0, .15)` |
| fontsize | 文字大小 | `string` or `number` | `14` |
| fontcolor | 文字颜色 | `string` | `rgba(0, 0, 0, .15)` |
| gapx | 水印之间的水平间距 | `string` or `number` | `24` |
| gapy | 水印之间的垂直间距 | `string` or `number` | `48` |

Expand Down
13 changes: 6 additions & 7 deletions packages/quarkd/src/watermark/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,9 @@ export interface Props {
width?: number | string;
height?: number | string;
rotate?: number;
zIndex?: number;
image?: string;
fontSize?: number | string;
fontColor?: string;
fontsize?: number | string;
fontcolor?: string;
text?: string;
gapx?: number;
gapy?: number;
Expand Down Expand Up @@ -44,10 +43,10 @@ class QuarkWaterMark extends QuarkElement {
@property({
type: Number,
})
fontSize? = 14;
fontsize? = 14;

@property()
fontColor?: string = "rgba(0, 0, 0, .15)";
fontcolor?: string = "rgba(0, 0, 0, .15)";

@property()
image?: string;
Expand Down Expand Up @@ -78,7 +77,7 @@ class QuarkWaterMark extends QuarkElement {
const canvas = document.createElement("canvas");
const ratio = window.devicePixelRatio;
const ctx = canvas.getContext("2d");
const fontSize = this.fontSize * ratio;
const fontSize = this.fontsize * ratio;

const canvasWidth = `${(this.gapx + this.width) * ratio}px`;
const canvasHeight = `${(this.gapy + this.height) * ratio}px`;
Expand Down Expand Up @@ -116,7 +115,7 @@ class QuarkWaterMark extends QuarkElement {
ctx.translate(markWidth / 2, markHeight / 2);
ctx.rotate((Math.PI / 180) * this.rotate);
ctx.font = `${fontSize}px normal normal`;
ctx.fillStyle = this.fontColor;
ctx.fillStyle = this.fontcolor;
if (Array.isArray(this.content)) {
this.content.forEach((item, index) =>
ctx.fillText(item, 0, index * fontSize)
Expand Down

0 comments on commit 1b37564

Please sign in to comment.