LogicFlow 学习笔记——2. LogicFlow 基础 实例

LogicFlow 实例

创建实例

每一个流程设计界面,就是一个 LogicFlow 的实例。

html 复制代码
<template>
  <div id="container"></div>
  <!-- 用于显示 LogicFlow 图表的容器 -->
</template>
<script>
  // 创建 LogicFlow 实例
  const lf = new LogicFlow({
    container: document.getElementById('container')!, // 指定容器元素
    grid: true // 启用网格
  })
</script>

当创建一个实例的时候,我们需要传递初始化LogicFlow实例的配置项。LogicFlow支持非常丰富的初始化配置项,但是只有LogicFlow画布初始化时挂载的DOM节点container参数是必填的。完整的配置项参见LogicFlow API

图数据

在 LogicFlow 里面,我们把流程图看做是由节点和连线组成的图。所以我们采用如下数据结构来表示 LogicFlow 的图数据。

typescript 复制代码
// 定义图形编辑器的初始数据
const data = {
  // 节点数组
  nodes: [
    {
      id: 'node_id_1', // 节点标识
      type: 'rect', // 节点形状类型:矩形
      x: 100, // 节点在画布上的 x 坐标
      y: 100, // 节点在画布上的 y 坐标
      text: { x: 100, y: 100, value: '节点1' }, // 节点的文本及其位置
      properties: {} // 节点的自定义属性
    },
    {
      id: 'node_id_2', // 另一个节点标识
      type: 'circle', // 节点形状类型:圆形
      x: 200, // 节点在画布上的 x 坐标
      y: 300, // 节点在画布上的 y 坐标
      text: { x: 300, y: 300, value: '节点2' }, // 节点的文本及其位置
      properties: {} // 节点的自定义属性
    }
  ],
  // 边数组
  edges: [
    {
      id: 'edge_id', // 边的标识
      type: 'polyline', // 边的类型:多段线
      sourceNodeId: 'node_id_1', // 起始节点
      targetNodeId: 'node_id_2', // 目标节点
      text: { x: 139, y: 200, value: '连线' }, // 边上的文本及其位置
      startPoint: { x: 100, y: 140 }, // 起始点坐标
      endPoint: { x: 200, y: 250 }, // 结束点坐标
      pointsList: [
        { x: 100, y: 140 },
        { x: 100, y: 200 },
        { x: 200, y: 200 },
        { x: 200, y: 250 }
      ], // 折点的列表,定义折线的形状
      properties: {} // 边的自定义属性
    }
  ]
}
  • text可以直接使用字符串,这个时候,如果是节点的文本,LogicFlow 会自动采用节点坐标作为节点文本坐标,如果是连接文本,LogicFlow 会基于不同的连线类型计算一个合适的坐标作为节点坐标。在有些应用场景下,我们文本是可以拖动的,为了保持一致,LogicFlow导出的文本数据都会带上坐标。

  • 目前,在 LogicFlow 内部内置了 line,polyline,bezier三种基础连线,这三种连线都有startPointendPoint数据。但是其中line导出的数据是不会带上pointsList。对于polyLinepointsList表示折线所有的点。对于bezierpointsList 表示['起点', '第一个控制点', '第二个控制点', '终点']

    效果如下所示:

    代码:Example04.vue

  • properties是LogicFlow保留给具体业务场景使用的数据。例如:在审批流场景,我们定义某个节点,这个节点通过了,节点为绿色,不通过节点为红色。那么节点的数据描述可以为:

    json 复制代码
    {
      type: 'apply',
      properties: {
        isPass: true
      }
    }
  • type表示节点或者连线的类型,这里的类型不仅可以是 rectpolyline 这种 LogicFlow 内置的基础类型,也可以是用户基于基础类型自定义的类型。

    如:

    代码:Example03

图渲染

数据直接放入render方法中执行就可以渲染出图了。

typescript 复制代码
lf.render(graphData)
相关推荐
云上艺旅15 小时前
K8S学习之基础七十四:部署在线书店bookinfo
学习·云原生·容器·kubernetes
你觉得20515 小时前
哈尔滨工业大学DeepSeek公开课:探索大模型原理、技术与应用从GPT到DeepSeek|附视频与讲义下载方法
大数据·人工智能·python·gpt·学习·机器学习·aigc
A旧城以西16 小时前
数据结构(JAVA)单向,双向链表
java·开发语言·数据结构·学习·链表·intellij-idea·idea
无所谓จุ๊บ16 小时前
VTK知识学习(50)- 交互与Widget(一)
学习·vtk
FAREWELL0007516 小时前
C#核心学习(七)面向对象--封装(6)C#中的拓展方法与运算符重载: 让代码更“聪明”的魔法
学习·c#·面向对象·运算符重载·oop·拓展方法
吴梓穆17 小时前
UE5学习笔记 FPS游戏制作38 继承标准UI
笔记·学习·ue5
Three~stone17 小时前
MySQL学习集--DDL
数据库·sql·学习
齐尹秦17 小时前
HTML 音频(Audio)学习笔记
学习
念九_ysl17 小时前
基数排序算法解析与TypeScript实现
前端·算法·typescript·排序算法
V---scwantop---信18 小时前
英文字体:大胆都市街头Y2Y涂鸦风格品牌海报专辑封面服装字体 Chrome TM – Graffiti Font
笔记·字体