# signature-panel

**Repository Path**: chinasoft_ohos/signature-panel

## Basic Information

- **Project Name**: signature-panel
- **Description**: 实现的一个简单的绘图面板，可以用作手写签名，可以涂鸦。实现了画笔颜色、线宽、背景颜色的切换。
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-08-31
- **Last Updated**: 2021-08-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## signature-panel绘图面板

简介：实现的一个简单的绘图面板，可以用作手写签名，可以涂鸦。实现了画笔颜色、线宽、背景颜色的切换。

##### 项目结构：

![image-20210831151459924](https://i.loli.net/2021/08/31/k4Upi9xbRVE3czH.png)

##### 效果展示：

![ac72a484-f192-434e-8ee1-a3a5045a5362](https://i.loli.net/2021/08/31/vSC8js1lKx4wm2E.gif)

##### 使用示例：

1. 下载组件代码到本地, 添加到你的项目中

2. 通过element导入canvasComp组件

   ```hml
   <element src="../../common/component/canvasComp.hml"></element>
   ```

3. 使用自定义组件

   ```hml
   <div class="container">
       <canvascomp></canvascomp>
   </div>
   ```

##### 参数说明：

|      参数      | 类型  |  默认值  | 是否必填 |                             说明                             |
| :------------: | :----: | :-----: | :------------: | :------------------------------------------: |
|   fill-color   | string | #FFFFFF |    否    |                          画布背景色                          |
|  stroke-color  | string | #000000 |    否    |                           画笔颜色                           |
| picture-format | string | png |    否    |                       用于指定图像格式                       |
|    line-cap    | string | butt |    否    | 线条的端点样式，可选值为：butt（默认）：线端点以方形结束；round：线端点以圆形结束；square：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。 |
|   line-width   | number | 4 |    否    |                      设置绘制线条的宽度                      |

#####  License：

MulanPSL2, See the [LICENSE](https://gitee.com/chinasoft_ohos/signature-panel/blob/master/LICENSE) file for details.