# waterMark

**Repository Path**: ibestservices/water-mark

## Basic Information

- **Project Name**: waterMark
- **Description**: waterMark是一个基于鸿蒙开发的水印库，在页面上添加特定的文字或图案作为水印，可用于防止信息盗用。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2024-02-20
- **Last Updated**: 2024-08-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WaterMark

## 简介

waterMark是一个基于鸿蒙开发的水印库，在页面上添加特定的文字或图案作为水印，可用于防止信息盗用。

## 组件库
当前水印组件已集成至组件库[iBest-UI](https://ibestui.ibestservices.com/)，后续不再维护当前组件，请访问[iBest-UI](https://ibestui.ibestservices.com/)组件库查看 https://github.com/ibestservices/ibest-ui


## 下载安装

`ohpm install @ibestservices/water_mark`

OpenHarmony ohpm 环境配置等更多内容，请参考[如何安装 OpenHarmony ohpm 包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.md)

## 需要权限
无

## 引入
`import WaterMark from '@ibestservices/water_mark'`

## 代码演示

### 文字水印
![文字水印](./library/static/images/text-water-mark.png)
```typescript
WaterMark({
  text: 'ibestservices'
}){
  // your custom component
  Text(`安徽百得思维信息科技有限公司`)
    .fontSize(50)
    .fontWeight(FontWeight.Bold)
}
```

### 图片水印
![图片水印](./library/static/images/img-water-mark.png)
```typescript
WaterMark({
  imageUrl: 'xxx.png',
}){
  // your custom component
  Text(`安徽百得思维信息科技有限公司`)
    .fontSize(50)
    .fontWeight(FontWeight.Bold)
}
```

## API

### Props
| 参数             | 说明                                                         | 类型   | 默认值       |
| ---------------- | ------------------------------------------------------------ | ------ | ------------ |
| waterMarkWidth   | 单个图片水印的宽度（文字水印可忽略该参数）                   | number | 100          |
| waterMarkHeight  | 单个图片水印的高度（文字水印可忽略该参数）                   | number | 100          |
| waterMarkOpacity | 水印的透明度 0~1                                             | number | 0.3          |
| gapX             | 水印之间的水平间隔                                           | number | 0            |
| gapY             | 水印之间的垂直间隔                                           | number | 0            |
| rotateDeg        | 水印的旋转角度                                               | number | -22          |
| imageUrl         | 水印的图片链接                                               | string | ''           |
| text             | 文字水印的内容（文字水印优先级高于图片水印，如果同时传了`text`和`imageUrl`那么显示的将会是`text`的内容） | string | ''           |
| fontSize         | 文字水印的大小                                               | number | 30           |
| fontFamily       | 文字字体                                                     | string | 'sans-serif' |
| fontColor        | 文字颜色                                                     | string | '#000'       |
| waterMarkZIndex  | 水印的z-index                                                | number | -1           |


### Slots

| 名称        | 说明                                                         |
| ----------- | ------------------------------------------------------------ |
| defaultSlot | 该插槽推荐使用[`尾随闭包初始化组件`](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/arkts-builderparam-0000001524416541-V3#section95615504245) |


## 约束与限制
在下述版本验证通过：
```text
DevEco Studio 3.1.1 Release
构建版本：3.1.0.501, built on June 20, 2023
Build #DS-223.8617.56.36.310501
Runtime version: 17.0.6+10-b829.5 x86_64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.

API 9 STAGE
```


## 开源协议
本项目基于 Apache License 2.0，请自由地享受和参与开源。

## 仓库地址
https://gitee.com/ibestservices/water-mark

## 已知问题
1. `@Prop`的默认值eslint校验报错，其实是能用的，等待官方修复。