Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(watermark): 水印支持多行文字 #2746

Merged
merged 1 commit into from
Dec 19, 2023
Merged

feat(watermark): 水印支持多行文字 #2746

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions packages/nutui-taro-demo/src/exhibition/pages/watermark/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,15 @@
<img :src="src" alt="" />
<nut-watermark :full-page="false" font-color="#fa2c19" content="nut-ui"></nut-watermark>
</nut-cell>
<h2>多行水印</h2>
<nut-cell class="wrap wrap2">
<nut-watermark
:full-page="false"
:gap-y="24"
font-color="#fa2c19"
:content="['nut-ui', 'water-mark']"
></nut-watermark>
</nut-cell>
</Demo>
</template>
<script setup lang="ts">
Expand Down
11 changes: 11 additions & 0 deletions src/packages/__VUE/watermark/demo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,15 @@
<img :src="src" alt="" />
<nut-watermark :full-page="false" font-color="#fa2c19" content="nut-ui"></nut-watermark>
</nut-cell>
<h4>{{ translate('title3') }}</h4>
<nut-cell class="wrap wrap2">
<nut-watermark
:full-page="false"
:gap-y="24"
font-color="#fa2c19"
:content="['nut-ui', 'water-mark']"
></nut-watermark>
</nut-cell>
</div>
</template>
<script setup lang="ts">
Expand All @@ -28,12 +37,14 @@ const translate = useTranslate({
'zh-CN': {
basic: '基础用法',
title2: '局部用法',
title3: '多行水印',
btn1: '文字水印',
btn2: '图片水印'
},
'en-US': {
basic: 'Basic Usage',
title2: 'Part Usage',
title3: 'Multiline Watermark',
btn1: 'Text Watermark',
btn2: 'Image Watermark'
}
Expand Down
32 changes: 31 additions & 1 deletion src/packages/__VUE/watermark/doc.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,36 @@ const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d0497

:::

### Multiline Watermark

The content attribute is passed into a string array, showing a multi-line watermark

:::demo

```vue
<template>
<nut-cell class="wrap">
<nut-watermark
:full-page="false"
:gap-y="24"
font-color="#fa2c19"
:content="['nut-ui', 'water-mark']"
></nut-watermark>
</nut-cell>
</template>
<script setup></script>
<style>
.wrap {
width: 100%;
height: 240px;
display: block;
background: #fff;
}
</style>
```

:::

## API

### Props
Expand All @@ -108,7 +138,7 @@ const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d0497
| image-width | Width of image | number | `120` |
| image-height | Height of image | number | `64` |
| z-index | Z-index of the appended watermark element | number | `2000` |
| content | Watermark text content | string | - |
| content | Watermark text content | string | string[] | - |
| font-color | Watermark text color | string | `rgba(0, 0, 0, .15)` |
| font-size | Watermark text font size | string \| number | `16` |
| gap-x | Horizontal spacing between watermarks | number | `24` |
Expand Down
32 changes: 31 additions & 1 deletion src/packages/__VUE/watermark/doc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,36 @@ const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d0497

:::

### 多行水印

content属性传入string数组，展示的则是多行水印

:::demo

```vue
<template>
<nut-cell class="wrap">
<nut-watermark
:full-page="false"
:gap-y="24"
font-color="#fa2c19"
:content="['nut-ui', 'water-mark']"
></nut-watermark>
</nut-cell>
</template>
<script setup></script>
<style>
.wrap {
width: 100%;
height: 240px;
display: block;
background: #fff;
}
</style>
```

:::

## API

### Props
Expand All @@ -110,7 +140,7 @@ const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d0497
| image-width | 图片宽度 | number | `120` |
| image-height | 图片高度 | number | `64` |
| z-index | 追加的水印元素的 z-index | number | `2000` |
| content | 水印文字内容 | string | - |
| content | 水印文字内容 | string | string[] | - |
| font-color | 水印文字颜色 | string | `rgba(0, 0, 0, .15)` |
| font-size | 文字大小 | string \| number | `16` |
| gap-x | 水印之间的水平间距 | number | `24` |
Expand Down
30 changes: 30 additions & 0 deletions src/packages/__VUE/watermark/doc.taro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,36 @@ const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d0497

:::

### 多行水印

content属性传入string数组，展示的则是多行水印

:::demo

```vue
<template>
<nut-cell class="wrap">
<nut-watermark
:full-page="false"
:gap-y="24"
font-color="#fa2c19"
:content="['nut-ui', 'water-mark']"
></nut-watermark>
</nut-cell>
</template>
<script setup></script>
<style>
.wrap {
width: 100%;
height: 240px;
display: block;
background: #fff;
}
</style>
```

:::

## API

### Props
Expand Down
10 changes: 8 additions & 2 deletions src/packages/__VUE/watermark/index.taro.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export default create({
default: 64
},
content: {
type: String,
type: [String, Array<string>],
default: ''
},
fontColor: {
Expand Down Expand Up @@ -202,7 +202,13 @@ export default create({
const markSize = Number(fontSize) * ratio;
ctx.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}`;
ctx.fillStyle = fontColor;
ctx.fillText(content, 0, 0);
if (Array.isArray(content)) {
content.map((item, index) => {
ctx.fillText(item, 0, (index - 1) * markSize);
});
} else {
ctx.fillText(content, 0, 0);
}
ctx.restore();
state.base64Url = canvas.toDataURL();
};
Expand Down
11 changes: 8 additions & 3 deletions src/packages/__VUE/watermark/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export default create({
default: 64
},
content: {
type: String,
type: [String, Array<string>],
default: ''
},
fontColor: {
Expand Down Expand Up @@ -148,8 +148,13 @@ export default create({
const markSize = Number(fontSize) * ratio;
ctx.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}`;
ctx.fillStyle = fontColor;

ctx.fillText(content, 0, 0);
if (Array.isArray(content)) {
content.map((item, index) => {
ctx.fillText(item, 0, (index - 1) * markSize);
});
} else {
ctx.fillText(content, 0, 0);
}
ctx.restore();
state.base64Url = canvas.toDataURL();
}
Expand Down