# er-canvas
**Repository Path**: JackStarCoder/er-canvas
## Basic Information
- **Project Name**: er-canvas
- **Description**: ER图来表示表与表之间字段的映射关系
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-14
- **Last Updated**: 2024-03-22
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# er-canvas
一个无第三方依赖，使用canvas实现的简单数据库表关系图绘制工具
# 预览
# 安装
```
npm i -d er-canvas
```
# 使用
## webpack
```js
import 'er-canvas/dist/index.css';
import ErCanvas from 'er-canvas';
let er = new ErCanvas(document.querySelector('#app'), {
width: 1600,
height: 1200,
onContextmenu(e, target) {
console.log(target);
},
onSelectLine(line) {
console.log(line)
},
onSelectTable(table) {
console.log(table)
},
tables: [{
id: 'frb',
name: '用户表',
fields: Array(20).fill(1).map((t, i) => {
return {
id: 'frbfield' + i,
name: '字段' + i,
};
}),
top: 0,
left: 0,
width: 100,
height: 100,
}, {
id: 'cyb',
name: '信息表',
fields: [
{
id: 'cybfield1',
name: '字段1',
},
{
id: 'cybfield2',
name: '字段2',
},
],
top: 0,
left: 300,
width: 100,
height: 100,
}],
lines: [{
form: 'frbfield1',
to: 'cybfield1',
}],
})
```
## 浏览器
```html
```
## 打包部署
- 打包方式: npm pack
- 部署方式: npm install