{"id":15015292,"url":"https://github.com/lusase/linedrawer","last_synced_at":"2025-08-25T01:10:57.879Z","repository":{"id":143886155,"uuid":"159140778","full_name":"lusase/lineDrawer","owner":"lusase","description":"A Graphic Drawing Tool Based on Fabric.js ","archived":false,"fork":false,"pushed_at":"2023-09-13T03:39:54.000Z","size":1225,"stargazers_count":3,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-15T11:56:24.935Z","etag":null,"topics":["arrow","canvas","charts","drawer","fabric","line"],"latest_commit_sha":null,"homepage":"https://lusase.github.io/?url=http%3A%2F%2F47.94.153.220%2FlineDrawer%2Ftest%2Findex.html","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lusase.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-26T09:08:10.000Z","updated_at":"2023-09-01T10:19:49.000Z","dependencies_parsed_at":null,"dependency_job_id":"f4563cd3-f78e-4356-bce1-92d482aaaf3e","html_url":"https://github.com/lusase/lineDrawer","commit_stats":{"total_commits":108,"total_committers":3,"mean_commits":36.0,"dds":0.2962962962962963,"last_synced_commit":"b186e7b5c3ebbd393ff6fe553a978fed39856a8b"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/lusase/lineDrawer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lusase%2FlineDrawer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lusase%2FlineDrawer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lusase%2FlineDrawer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lusase%2FlineDrawer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lusase","download_url":"https://codeload.github.com/lusase/lineDrawer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lusase%2FlineDrawer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265617009,"owners_count":23798945,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["arrow","canvas","charts","drawer","fabric","line"],"created_at":"2024-09-24T19:46:43.286Z","updated_at":"2025-07-17T14:33:37.355Z","avatar_url":"https://github.com/lusase.png","language":"TypeScript","readme":"# [lineDrawer.js](https://github.com/lusase/lineDrawer)\r\n\u003e **A Graphic Drawing Tool Based on Fabric.js**\r\n\r\n[编辑页预览](https://lusase.github.io?url=http%3A%2F%2F47.94.153.220%2FlineDrawer%2Ftest%2Findex.html)\r\n\r\n## 用于绘制和显示流向图\r\n\r\n![image](https://github.com/lusase/lineDrawer/blob/master/doc/img1.png)\r\n\r\n![image](https://github.com/lusase/lineDrawer/blob/master/doc/img2.png)\r\n\r\n![image](https://github.com/lusase/lineDrawer/blob/master/doc/img3.png)\r\n\r\n## 用法\r\n\r\n### 安装\r\n\u003e npm install linedrawer\r\n\r\n\u003chr\u003e\r\n\r\n### 使用\r\n\r\n- lineDrawer\r\n  - [示例](#示例)\r\n  - [API](#API)\r\n  - [旧版示例](#旧版示例)\r\n  - [旧版API](#旧版API)\r\n\r\n#### 示例\r\n```ts\r\n// 引入绘画类\r\nimport {GraphicDrawer} from 'linedrawer'\r\n// 初始化\r\nconst g = new GraphicDrawer\u003cGraphicData\u003e('#canvas', {\r\n  // 是否可编辑\r\n  editable: false,\r\n  // 设置背景\r\n  bgUrl: 'https://www.someurl.com/someimg.png'\r\n})\r\n\r\n// 通过数据向画布中加入多边形\r\ng.addData({\r\n  drawType: 'polygon',\r\n  group: '分组信息',\r\n  graphics: [{\r\n    id: '图形的id',\r\n    name: '图形的名称',\r\n    evented: true, // 是否相应事件\r\n    fill: '#fff000', // 填充颜色\r\n    // 归一化坐标, 相对于画布的宽高\r\n    path: [{x: 0.3, y: 0.1}, {x: 0.2, y: 0.3}, {x: 0.5, y: 0.4}, {x: 0.4, y: 0.15}],\r\n    // 自定义元素携带的数据\r\n    data: {},\r\n  }]\r\n})\r\n\r\n// 通过数据向画布中加入曲线\r\ng.addData({\r\n  drawType: 'line',\r\n  group: '分组信息',\r\n  graphics: [{\r\n    id: '图形的id',\r\n    name: '图形的名称',\r\n    evented: true, // 是否相应事件\r\n    stroke: '#fff000', // 线条颜色\r\n    strokeWidth: 10, // 线条宽度\r\n    // 归一化坐标, 相对于画布的宽高\r\n    path: [{x: 0.3, y: 0.1}, {x: 0.2, y: 0.3}, {x: 0.5, y: 0.4}, {x: 0.4, y: 0.15}],\r\n    // 自定义元素携带的数据\r\n    data: {},\r\n  }]\r\n})\r\n\r\n// 加入静态的元素如 image\r\ng.addStaticData({\r\n  group: 'image',\r\n  graphics: [{\r\n    id: '5',\r\n    type: 'image',\r\n    bg: './icon.png',\r\n    name: '1',\r\n    width: 50,\r\n    height: 50,\r\n    x: 0.5,\r\n    y: 0.5\r\n  }]\r\n})\r\n\r\n// 元素创建时触发的事件\r\ng.on('graph.create', (e) =\u003e {\r\n  // do something\r\n})\r\n\r\n\r\n```\r\n#### API\r\n- GraphicDrawer\r\n  - 属性\r\n    - drawType 'polygon' | 'rectangle'(计划中) | 'circle'(计划中) | 'line'\r\n    - currentGraphic 编辑状态下选中的图形\r\n    - graphicMap 绘制图形集合\r\n    - staticGraphicMap 静态图形集合\r\n  - 方法\r\n    - showGraphics 显示分组下的图形\r\n      - 参数 groups 要显示的分组, 不填则为全部显示\r\n    - hideGraphics 隐藏分组下的图形\r\n      - 参数 groups 要显示的分组, 不填则为全部显示\r\n    - setConfig 更改设置\r\n      - 参数 config 类型为 [GraphicDrawerConfig](#GraphicDrawerConfig)\r\n    - setDrawType 更改绘画类型\r\n      - 参数 drawType \r\n    - cleanGraphics 清除画布上所有的图形\r\n    - addData 通过数据向画布中添加图形\r\n      - 参数 data 类型为 [DataType](#DataType)\r\n    - addStaticData 通过数据向画布中添加静态的图形\r\n      - 参数 data 类型为 [StaticDataType](#StaticDataType)\r\n    - getData 获取当前画布上可绘制图形的数据\r\n      - 返回类型为 [ReturnDataType](#ReturnDataType)\r\n\r\n\r\n\r\n##### GraphicDrawerConfig\r\n  ``` ts\r\n  interface GraphicDrawerConfig extends SketchConfig {\r\n    fill?: string\r\n    fills?: string[]\r\n  }\r\n  ```\r\n\r\n##### DataType\r\n```ts\r\ninterface DataType\u003cT = any\u003e {\r\n  drawType: DrawType\r\n  group?: string\r\n  graphics: (GraphicCfg \u0026 {\r\n    data?: T\r\n  })[]\r\n}\r\n```\r\n##### StaticDataType\r\n```ts\r\ninterface StaticDataType {\r\n  group?: string\r\n  graphics: StaticGraphCfg[]\r\n}\r\ntype StaticGraphCfg = {\r\n  id?: string\r\n  type: 'image' | 'rect' | 'circle'\r\n  name?: string\r\n  evented?: boolean\r\n  fill?: string\r\n  stroke?: string\r\n  strokeWidth?: number\r\n  group?: string\r\n  bg?: string | HTMLImageElement\r\n  x?: number\r\n  y?: number\r\n  width?: number\r\n  height?: number\r\n  radius?: number\r\n  textStyle?: SketchConfig['textStyle']\r\n}\r\n```\r\n##### ReturnDataType\r\n```ts\r\ntype ReturnDataType = {\r\n  drawType: DrawType, \r\n  graphics: {\r\n    id: string, \r\n    name: string, \r\n    path: {x: number, y: number}[], \r\n    group: string, \r\n    data: any\r\n  }[]\r\n}\r\n```\r\n\r\n#### 旧版示例\r\n```\r\n    import LineDrawer from 'linedrawer'\r\n\r\n    // 用于展示\r\n    new LineDrawer('canvasId', {\r\n            formatter(line) {\r\n              return `\u003cspan class=\"dot\" style=\"background: ${line.stroke}\"\u003e\u003c/span\u003e ${toPercent(line.percent)}`\r\n            },\r\n            pathOpacity: 0.7\r\n          }, data)\r\n\r\n    // 用于绘图\r\n    new LineDrawer('canvasId', {\r\n        lineStroke: '#fff',\r\n        strokeWidth: 2,\r\n        editable: true,\r\n        pathOpacity: 0.5\r\n    })\r\n\r\n```\r\n\r\n#### 旧版API\r\n\r\n\u003e 构造函数\r\n```\r\n    new LineDrawer(id : String, config: Object, data: Array|String)\r\n        id: canvas元素的id\r\n        config: 配置\r\n            strokeWidth: 线宽, 默认为1\r\n            lineStroke: 线条初始化颜色, 默认黑色,\r\n                        支持颜色字符串数组, 如果为颜色数组,\r\n                        则新画的线的颜色依次自动取值\r\n            arrowRadius: 箭头大小, 默认6\r\n            editable: 是否可编辑, 默认false不可编辑\r\n            formatter: 函数, 返回html字符串用于控制tooltip显示的内容, 接受一个参数, 为当前path的配置对象\r\n            hasShadow: 线条是否显示阴影, 默认为false 不显示\r\n            pathOpacity: 线条透明度, 默认为1 不透明\r\n        data: 用于回显的数据\r\n                格式为 类似\r\n                [{\r\n                  \"strokeWidth\": 2,\r\n                  \"stroke\": \"#ff0\",\r\n                  \"dots\": [\r\n                    [\r\n                      0.51875,\r\n                      0.1375\r\n                    ],\r\n                    [\r\n                      0.425,\r\n                      0.4125\r\n                    ]\r\n                  ],\r\n                  \"id\": 0\r\n                }]\r\n```\r\n\r\n\u003e 方法\r\n\r\n```\r\n        load(data: Array| String) 加载数据\r\n        reload(data: Array| String| undefined) 重新加载数据\r\n        newEmptyLine() 新建空线条\r\n        getLinesInfo() 获取绘制线条数据\r\n        configCurrentPath(config) 配置当前线条\r\n        on(type, cb)\r\n        off(type, cb)\r\n        dispose() 销毁\r\n```\r\n\u003e 事件\r\n\r\n```\r\n     'focus.dot' 控制点被选中\r\n     'focus.path' 线条被选中\r\n     'del.dot' 控制点被删除\r\n     'add.line' 增加新线条\r\n```\r\n\r\n\u003e 操作\r\n\r\n```\r\n    ctrl + 左击 新建线条\r\n    ctrl + z 删除点\r\n    delete 删除选中的线\r\n```\r\n\r\n\r\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flusase%2Flinedrawer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flusase%2Flinedrawer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flusase%2Flinedrawer/lists"}