zk-draw

项目描述

提供一个绘制各种AI数据的一个工具函数

特性

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

使用方法

npm install zk-draw --save 

或者使用script引入

<srcipt type="text/javascript" src="canvas_tool.js"></script>
<srcipt type="text/javascript" >
    console.log(window); //window上会暴露有canvas_tool的方法
</script>

import  zkDraw from 'zk-draw';
 
// 或者直接使用功能函数
import { drawReact } from 'zk-draw'
// 默认导出的是一个对象内置有
/**
 * version: String,　// 版本号
 * fnList: Array, // 支持的功能函数名称 可以直接 import { fnName } from 'zk-draw'使用
 * fnName: Function // 功能函数　　fnName只是代指
 * /

已经提供的功能

// 绘制矩形框体   已测试
// 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

计划新增内容

• 1. ST的图表生成 (已经支持)
• 1. 人脸特征点
• 1. 面部朝向
• 1. 计划增加动态图表 配合lengend动态切换图表
• 1. 图表增加水印功能和单独的图片导出功能