1. 安装

参考前面《安装》

2. 导入画布类

  1. // 导入绘画引擎
  2. import { Topology } from 'topology-core';

3. 引用第三方图形库

  1. // 使用第三方图形库
  3. // 1. 先导入注册函数
  4. import { registerNode } from 'topology-core/middles';
  6. // 2. 导入图形库图形及其相关元素
  7. import {
  8.   flowData,
  9.   flowDataAnchors,
  10.   flowDataIconRect,
  11.   flowDataTextRect,
  12.   flowSubprocess,
  13.   flowSubprocessIconRect,
  14.   flowSubprocessTextRect,
  15.   flowDb,
  16.   flowDbIconRect,
  17.   flowDbTextRect,
  18.   flowDocument,
  19.   flowDocumentAnchors,
  20.   flowDocumentIconRect,
  21.   flowDocumentTextRect,
  22.   flowInternalStorage,
  23.   flowInternalStorageIconRect,
  24.   flowInternalStorageTextRect,
  25.   flowExternStorage,
  26.   flowExternStorageAnchors,
  27.   flowExternStorageIconRect,
  28.   flowExternStorageTextRect,
  29.   flowQueue,
  30.   flowQueueIconRect,
  31.   flowQueueTextRect,
  32.   flowManually,
  33.   flowManuallyAnchors,
  34.   flowManuallyIconRect,
  35.   flowManuallyTextRect,
  36.   flowDisplay,
  37.   flowDisplayAnchors,
  38.   flowDisplayIconRect,
  39.   flowDisplayTextRect,
  40.   flowParallel,
  41.   flowParallelAnchors,
  42.   flowComment,
  43.   flowCommentAnchors
  44. } from 'topology-flow-diagram';
  46. // 3. 向引擎注册图形库图形及其相关元素
  47. registerNode('flowData', flowData, flowDataAnchors, flowDataIconRect, flowDataTextRect);
  48. registerNode('flowSubprocess', flowSubprocess, null, flowSubprocessIconRect, flowSubprocessTextRect);
  49. registerNode('flowDb', flowDb, null, flowDbIconRect, flowDbTextRect);
  50. registerNode('flowDocument', flowDocument, flowDocumentAnchors, flowDocumentIconRect, flowDocumentTextRect);
  51. // ...
  53. // 下面是简单的注册函数介绍，详情请参考api文档
  54. // registerNode: 注册一个自定义图形节点node.
  55. // name - node名称.
  56. // drawFn - node渲染函数。传入canvas ctx和node数据，自己决定如何绘画node
  57. // anchorsFn - 计算node的锚点，如果为null，表示使用缺省计算锚点方法
  58. // iconRectFn - 计算node的图标区域，如果为null，表示使用缺省计算图标区域方法
  59. // textRectFn - 计算node的文字区域，如果为null，表示使用缺省计算文字区域方法
  60. // force - 如果已经存在同名node，是否覆盖.
  61. export function registerNode(
  62.   name: string,
  63.   drawFn: (ctx: CanvasRenderingContext2D, node: Node) => void,
  64.   anchorsFn?: (node: Node) => void,
  65.   iconRectFn?: (node: Node) => void,
  66.   textRectFn?: (node: Node) => void,
  67.   force?: boolean
  68. );
  71. 4. 初始化画布实例
  72. const canvas = new Topology('topology-canvas', canvasOptions)
  73. canvas.open({nodes:[], lines:[]})

4. webpack编译

参考 https://github.com/le5le-com/topology-demo-es6

4.1 安装依赖库

参考 https://github.com/le5le-com/topology-demo-es6/blob/master/package.json

4.2 配置wepback

参考 https://github.com/le5le-com/topology-demo-es6/blob/master/webpack.config.js
其中：output.filename: ‘topology.js’ 为编译后生成的文件

4.3 index.html中引入
参考 https://github.com/le5le-com/topology-demo-es6/blob/master/index.html