zk-draw/README.md

canvas绘制AI数据的一个工具类

## 项目描述

#### 提供一个绘制各种AI数据的一个工具函数
## 特性
- 1. 使用UMD规范node React Vue 原生js都可以使用这个包 只是在node中无法生成canvas图表
- 2. 图表的绘制抛弃Table+canvas的方式 全部采用canvas进行绘制
- 3. 针对不同设备(移动端)可以根据deviceWidth Ratio等进行transform: scale(Number)进行缩放适配(canvas最小缩放不能低于0.3)

## 使用方法
```shell
npm install zk-draw --save 
```

### 或者使用script引入
```javascript
<srcipt type="text/javascript" src="canvas_tool.js"></script>
<srcipt type="text/javascript" >
    console.log(window); //window上会暴露有canvas_tool的方法
</script>
```
```javascript
import  zkDraw from 'zk-draw';

// 或者直接使用功能函数
import { drawReact } from 'zk-draw'
// 默认导出的是一个对象内置有
/**
 * version: String,　// 版本号
 * fnList: Array, // 支持的功能函数名称 可以直接 import { fnName } from 'zk-draw'使用
 * fnName: Function // 功能函数　　fnName只是代指
 * /
```
## 已经提供的功能
```javascript
// 绘制矩形框体   已测试
// ctx为Canvas画笔对象 points为框体数据[1, 2, 3,4]左上右下四个点 option为画笔配置Canvas的参数
zkDraw.drawReact(ctx, points, option);
// 或者
drawReact(ctx, points, option);

// 绘制圆
drawArc(ctx, start, radius, option)

// 绘制图片
drawImage(ctx, imgsrc, option)

// 绘制直线
drawLine(ctx, start, end, option)

// 绘制骨架
drawStone(ctx, pose, option)

// 绘制文本
drawText(ctx, text, x, y, option)
```
## Example
![ST图](./example/lALPDgtYt0zMmHPNAWbNA6g_936_358.png)
![canvas框](./example/canvas_tool.png)
## 计划新增内容
- 1. ST的图表生成 (已经支持)

- 2. 人脸特征点

- 3. 面部朝向

- 4. 计划增加动态图表 配合lengend动态切换图表

- 5. 图表增加水印功能和单独的图片导出功能