zarm
Version:
基于 React 的移动端UI库
239 lines (219 loc) • 8.06 kB
Markdown
# WaterMark 水印
## 基本用法
```jsx
import { useRef, useState } from 'react';
import { List, Input, Radio, Switch, Slider, WaterMark } from 'zarm';
const UNILINE_TEXT = '众安科技';
const MULTI_LINE_TEXT = [UNILINE_TEXT, 'ZhongAnTech'];
const WATERMARK_IMAGE_URL = 'https://zarm.design/images/logo.1a6cfc30.svg';
const DEFAULT_PROPS = {
text: UNILINE_TEXT,
mode: 'interval',
monitor: true,
markStyle: {
opacity: 0.15,
},
textStyle: {
textAlign: 'left',
},
imageStyle: {
width: 37.5,
height: 37.5,
},
};
const Demo = () => {
const [props, updateProps] = useState(DEFAULT_PROPS);
const [contain, setContain] = useState(false);
const setProps = (data = {}) => {
updateProps({
...props,
...data,
});
};
const isMultiline = Array.isArray(props.text);
const content = (
<List>
<List.Item
suffix={
<Radio.Group
value={!!props.image}
compact
type="button"
onChange={(value) => setProps({ image: value ? WATERMARK_IMAGE_URL : null })}
>
<Radio value={false}>文字</Radio>
<Radio value={true}>图片</Radio>
</Radio.Group>
}
>
水印类型
</List.Item>
{props.image ? (
<>
<List.Item title="图片地址">
<Input
rows={2}
type="text"
value={props.image}
placeholder="请输入图片地址"
onChange={(event) => setProps({ image: event.target.value })}
/>
</List.Item>
<List.Item title="图片宽度">
<Input
type="number"
value={props.imageStyle.width}
onChange={(event) =>
setProps({
imageStyle: {
...props.imageStyle,
width: event.target.value,
},
})
}
/>
</List.Item>
<List.Item title="图片高度">
<Input
type="number"
value={props.imageStyle.height}
onChange={(event) =>
setProps({
imageStyle: {
...props.imageStyle,
height: event.target.value,
},
})
}
/>
</List.Item>
</>
) : (
<>
<List.Item
suffix={
<Radio.Group
value={isMultiline}
compact
type="button"
onChange={(value) => setProps({ text: value ? MULTI_LINE_TEXT : UNILINE_TEXT })}
>
<Radio value={false}>单行</Radio>
<Radio value={true}>多行</Radio>
</Radio.Group>
}
>
文字水印
</List.Item>
<List.Item title="水印文案">
<Input
rows={isMultiline ? 3 : 1}
type="text"
value={isMultiline ? props.text.join('\n') : props.text}
placeholder="请输入水印文案"
onChange={(event) =>
setProps({
text: isMultiline ? event.target.value.split('\n') : event.target.value,
})
}
/>
</List.Item>
<List.Item
suffix={
<Radio.Group
value={props.textStyle.textAlign}
compact
type="button"
onChange={(value) => setProps({ textStyle: { textAlign: value } })}
>
<Radio value="left">居左</Radio>
<Radio value="center">居中</Radio>
<Radio value="right">居右</Radio>
</Radio.Group>
}
>
对齐方式
</List.Item>
</>
)}
<List.Item
suffix={
<Radio.Group
value={props.mode}
compact
type="button"
onChange={(value) => setProps({ mode: value })}
>
<Radio value="repeat">重复展示</Radio>
<Radio value="interval">错行展示</Radio>
</Radio.Group>
}
>
渲染模式
</List.Item>
<List.Item title="透明度">
<Slider
value={props.markStyle.opacity * 100}
onChange={(value) => setProps({ markStyle: { opacity: value / 100 } })}
/>
</List.Item>
<List.Item
title="保护模式"
suffix={
<Switch checked={props.monitor} onChange={(value) => setProps({ monitor: value })} />
}
description="监听水印变化，防止被篡改"
/>
<List.Item
title="包裹容器"
suffix={<Switch checked={contain} onChange={(value) => setContain(value)} />}
/>
</List>
);
return (
<>
{!contain && content}
<WaterMark {...props}>{contain && content}</WaterMark>
</>
);
};
ReactDOM.render(<Demo />, mountNode);
```
## API
| 属性 | 类型 | 默认值 | 说明 |
| :--------- | :----------------- | :--------- | :--------------------------------------------------- |
| mode | repeat \| interval | 'interval' | 展示模式，interval 表示错行展示 |
| text | string \| string[] | - | 水印文本, 为数组时表示多行水印 |
| image | string | - | 图片源，建议导出 2 倍或 3 倍图，优先使用图片渲染水印 |
| textStyle | TextStyle | - | 文本样式 |
| markStyle | MarkStyle | - | 水印样式 |
| imageStyle | ImageStyle | - | 图片样式 |
| monitor | boolean | true | 是否开启监视模式 |
## MarkStyle
| 属性 | 类型 | 默认值 | 说明 |
| :--------- | :----- | :----- | :----------------------------------- |
| width | number | 120 | 单个水印宽度 |
| height | number | 64 | 单个水印高度 |
| opacity | number | 0.15 | 水印不透明度 |
| rotate | number | -22 | 旋转的角度 |
| zIndex | number | 2000 | 样式层级 |
| gapX | number | 24 | 水印之间的水平间距 |
| gapY | number | 48 | 水印之间的垂直间距 |
| offsetLeft | number | 0 | 水印在 canvas 画布上绘制的水平偏移量 |
| offsetTop | number | 0 | 水印在 canvas 画布上绘制的垂直偏移量 |
## TextStyle
| 属性 | 类型 | 默认值 | 说明 |
| :----------- | :--------------- | :----------- | :----------------- |
| color | string | '#000' | 设置字体颜色 |
| fontSize | number | 14 | 设置字体大小 |
| fontWeight | string \| number | 300 | 设置字体粗细 |
| fontStyle | string | 'normal' | 规定字体样式 |
| fontFamily | string | 'sans-serif' | 设置水印文字的字体 |
| fontVariant | string | 'normal' | 规定字体变体 |
| textAlign | string | 'left' | 水印文字的对齐方式 |
| textBaseline | string | 'alphabetic' | 绘制文本的文本基线 |
## ImageStyle
| 属性 | 类型 | 默认值 | 说明 |
| :----- | :----- | :----- | :------- |
| width | number | 120 | 图片宽度 |
| height | number | 64 | 图片高度 |