# useDraw

**Repository Path**: chenxiangzhi/use-draw

## Basic Information

- **Project Name**: useDraw
- **Description**: 指定一个容器，允许在容器内部中绘制区域，最后返回区域坐标点（Array）
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-02-19
- **Last Updated**: 2024-05-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 效果

![](./preview.gif)

# 操作说明
1. 鼠标左键：加入路径点
2. 鼠标右键：撤销
3. 鼠标移动：动态绘制区域
4. 双击鼠标左键：清除画布
5. 回车：完成绘图


# 使用说明

## 示例
```js
let draw = useDraw();  // 创建实例
draw.init(HtmlElement, Options); // 初始化
```
```js
import useDraw from './useDraw.js';
const el = document.getElementById('test');
let draw = useDraw();
draw.init(el, {
   onComplete: (points) => {
      console.log('points', points);
   }
});
```


## API
实例暴露的方法
| 方法 | 描述 | 示例 |
|----|----|----|
|`init`| 初始化 | `draw.init(HtmlElement, Options)`|
|`destroy`| 销毁 | `draw.destroy()`|
|`getPoints`| 获取当前路径点 | `draw.getPoints()`|
|`drawAreaByPoints`| 传入点绘制区域 | `draw.drawAreaByPoints([{x:200,y:200},{x:300,y:300},{x:200,y:300}]`)

---

`init`方法的`Options`选项
| 选项 | 类型 | 默认值 | 描述 | 示例|
|:---:|:---:|:---:|:---:|:---:|
|`onComplete`| `(points: Array<Point>) => void` | undefined | 绘制完成后的回调函数 | `(points) => { console.log(points) }`|
|`onClear`| `()=>void` | undefined | 清除画布后的回调函数 | `() => { console.log('clear') }`|
|`initPoints`| `Array<Point>` | [] | 初始路径点 | `[{ x: 200, y: 200 }]`|
|`max`|`Number`|4|最大路径点数||
|`beforeComplete`|`(points: Array<Point>) => boolean`|`(points)=>points.length>=3`|判断是否允许断定为绘制完成|||
|`canvasStyle`| `CanvasStyle`| | 区域样式 ||


## Type
```TS
type Point = {
   x: number;
   y: number;
}

type CanvasStyle = {
   lineWidth?: number;// 线条宽度
   strokeStyle?: string; // 线条颜色
   fillStyle?: string; // 填充颜色
   backgroudColor? : string; // 画布填充颜色
}
```