在Vue中使用logicFlow绘制流程图并自定义连接锚点

原创 已于 2024-12-20 09:48:25 修改 · 1.9k 阅读 · 11 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
于 2024-10-11 10:43:18 首次发布

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

本文记录了使用logicFlow绘制流程图时的一些重要步骤和流程。

`

一、命令安装

命令安装
通过使用 npm、yarn、pnpm 进行安装。

npm install @logicflow/core --save
# 插件包（不使用插件时不需要引入）
npm install @logicflow/extension --save

二、引入

1.引入库

代码如下（示例）：

<script>
  import LogicFlow from "@logicflow/core";
  import "@logicflow/core/lib/style/index.css";
  // import "@logicflow/core/dist/style/index.css"; // 2.0版本前的引入方式

2.节点数据和边数据以及初始化流程图容器

代码如下（示例）：

const theme={
  rect: {
    fill: "#409eff",//矩形的填充背景色
    // strokeDasharray: "10, 1",
    // className: "custom-cls",
    radius: 30//矩形圆角
  },
  nodeText:{//节点文字样式
    color:'#fff'
  },
  edgeText: {//边文字样式
    // textWidth: 60,
    // overflowMode: "autoWrap",
    color:'#000'
    // background: {
    //   fill: "#919810"
    // }
  },
}
//绘制流程图
const init=(data:any)=>{
  const lf = new LogicFlow({
        container: drawContiner.value,
        grid: false,
        stopScrollGraph: true, // 禁止鼠标滚动移动画布
        stopMoveGraph: true, // 禁止拖动画布
        stopZoomGraph: true,// 禁止缩放
        isSilentMode :true,
        style:theme,//自定义画布一些样式属性
      });
      lf.clearData()
      lf.render(data);//渲染节点和边数据
}

设置节点数据

//流程图logicFlow节点
const nodes:any=ref([
  
])
//监听窗口变化，绘制流程图
window.addEventListener('resize',function(){
    initNode()
})
//节点 大小
const nodeWidth=ref(100)
const nodeHeight=ref(50)
const smallNodeWidth=ref(100)
const smallNodeHeight=ref(50)
//流程图节点赋值
const initNode=()=>{
    //按节点数进行节点位置设置
  totalWidth.value=drawContiner.value.offsetWidth//画布宽度
  let xData=totalWidth.value/(flowData.value.length+1)//每个节点所占的宽度
  console.log(xData,totalWidth.value,flowData.value.length)
  //审批节点大小
  nodeWidth.value=120*(totalWidth.value/1150)>120?120*(totalWidth.value/1150):120//根据窗口改变节点的大小
  nodeHeight.value=50*(totalWidth.value/1150)>50?50*(totalWidth.value/1150):50
  //开始结束节点大小
  smallNodeWidth.value=100*(totalWidth.value/1150)>100?100*(totalWidth.value/1150):100
  smallNodeHeight.value=50*(totalWidth.value/1150)>50?50*(totalWidth.value/1150):50
//绘制前先清空
nodes.value=[]
//开始节点和送审节点
  nodes.value.push({
    id:'node0',
    type:'rect',
    x: xData/2,
    y: 50,
    width: 100,
    height: 50,
    text: '开始',
    properties: {
        // statu: 'pass', // 业务属性
        width: smallNodeWidth.value, // 大于80再根据窗口大小变化
        height: smallNodeHeight.value,
        radius: 5,
        style: {
          // 样式属性
          strokeWidth: 2,
          stroke:'#67C23A',
          fill:'rgb(135, 211, 123)'
        },
      },
    
  })
//添加流程节点
  flowData.value.forEach((item:any,index:any)=>{
    const node={
          id: 'node'+(index+1),
          type: 'rect',
          x: xData*(index+1)+xData/2,
          y: 125*(index+1),
          text: '审批',
          properties: {
        width: nodeWidth.value, // 形状属性
        height: nodeHeight.value,
        // shadow:{
        //     color: 'rgba(0, 0, 0, 0.5)',
        //   blur: 10,
        //   offsetX: 5,
        //   offsetY: 5,
        // },
        boxShadow: '4px 4px 10px rgba(0, 0, 0, 0.3)', // 添加阴影
        radius: 5,
        style: {
          // 样式属性
          strokeWidth: 2,
          stroke: '#409eff',  // 边框颜色
          fill:'rgb(129, 190, 255)',
          shadowColor: 'rgba(0, 0, 0, 0.3)', // 阴影颜色
        shadowBlur: 10, // 阴影模糊程度
        shadowOffsetX: 5, // 阴影相对于物体的X轴偏移量
        shadowOffsetY: 5, // 阴影相对于物体的Y轴偏移量
            // lineWidth: 20,  // 边框宽度
          // fill:'green'
        },
      },
        }
        nodes.value.push(node)
        // lf.addNode(node)
  })
//添加结束节点
  nodes.value.push({
    id: 'node'+nodes.value.length,
          type: 'rect',
          x: xData*(nodes.value.length-1)+xData/2,
          y: 125*(nodes.value.length),
          text: '结束',
          properties: {
        width: smallNodeWidth.value, // 形状属性
        height: smallNodeHeight.value,
        radius: 5,
        style: {
          // 样式属性
          strokeWidth: 2,
          stroke:'#F56C6C',
          fill:'rgb(254, 163, 163)'
        },
      },
  })
  console.log(nodes.value)
//设置连接线
initEdge()
//     const data={nodes:nodes.value,edges:edges.value}
//     console.log(data)
//   init(data)
//   drawContiner.value.style.height = `${150*(nodes.value.length)}px`;
}

设置边数据以及如何设置连接锚点

//设置连接线
//设置连接线
const initEdge=()=>{
    totalWidth.value=drawContiner.value.offsetWidth
    let xData=totalWidth.value/(flowData.value.length+1)
//添加节点之间的连线
    //先清空连接线
    edges.value=[]
    //连接开始和送审节点
    edges.value.push({
          id: 'egdeS',
          sourceNodeId: 'node0',
          targetNodeId: 'node1',
          type: 'polyline',
          startPoint: {
            x:xData/2,
            y: 50+smallNodeHeight.value/2,
            },
            endPoint: {
                x: xData+xData/2-nodeWidth.value/2,
                y: 125,
            },
            pointsList: [
            {
                x:xData/2,
                y:50+smallNodeHeight.value/2,
            },
            {
                x:xData/2,
                y:  125,
            },
            {
                x: xData+xData/2-nodeWidth.value/2,
                y: 125,
            },
            ],
          properties: {
            style:{
              stroke:'green'
            }
          },
          text: '送审',
    }),
    //连接流程节点之间的连线
  flowData.value.forEach((item:any,index:any)=>{
  //第一个节点驳回连线直接连接结束节点
    if(item.returnFlag=='1'&&index<1&&flowData.value.length>1){
        const edge={
        id: 'edgeb'+index,
        sourceNodeId: 'node'+(index+1),
        targetNodeId: 'node'+(nodes.value.length-1),
        startPoint: {//连线起点
            x:xData*(index+1)+xData/2,
            y: 125*(index+1)+nodeHeight.value/2,
            },
            endPoint: {//连线终点
            //   x: xData*(index)+100+60,
              x:xData*(nodes.value.length-2)+xData/2-smallNodeWidth.value/2,
              y: 125*(nodes.value.length-1),
            },
            pointsList: [
            {
                x:xData*(index+1)+xData/2,
            y: 125*(index+1)+nodeHeight.value/2,
            },
              {//连线转折点
                x:xData*(index+1)+xData/2,
                y: 125*(nodes.value.length-1),
              },
              // {
              //   x:xData*(index),
              //   y: 150*(index+1),
              // },
              {
                x:xData*(nodes.value.length-2)+xData/2-smallNodeWidth.value/2,
              y: 125*(nodes.value.length-1),
            },
            ],
        properties: {
        style:{
            stroke:'red'
            }
        },
        type: 'polyline',
        text: '驳回',
    }
    edges.value.push(edge)
    }
    if(item.returnFlag=='1'&&index>=1){//逐级驳回连线
    const edge={
        id: 'edgeb'+index,
        sourceNodeId: 'node'+(index+1),
        targetNodeId: 'node'+(index+0),
        startPoint: {//连线起点
            x:xData*(index+1)+xData/2-nodeWidth.value/2,
            y: 125*(index+1)-nodeHeight.value/2,
            },
            endPoint: {//连线终点
            //   x: xData*(index)+100+60,
              x:xData*(index)+xData/2+nodeWidth.value/2,
              y: 125*(index),
            },
            pointsList: [
            {
                x:xData*(index+1)+xData/2,
            y: 125*(index+1)-smallNodeHeight.value/2,
            },
              {//连线转折点
                x:xData*(index+1)+xData/2,
                y: 125*(index),
              },
              // {
              //   x:xData*(index),
              //   y: 150*(index+1),
              // },
              {
                x:xData*(index)+xData/2+nodeWidth.value/2,
                y: 125*(index),
            },
            ],
        properties: {
        style:{
            stroke:'red'
            }
        },
        type: 'polyline',
        text: '驳回',
    }
    edges.value.push(edge)
  }
    if(index+1==flowData.value.length){//最后一个节点和结束节点之间的联系
        const edge={
            id: 'edge'+index,
            sourceNodeId: 'node'+(index+1),
            targetNodeId: 'node'+(index+2),
            type: 'polyline',
            text: '通过/驳回',
            properties: {
            style:{
                stroke:'green'
            }
            },
    }
    edges.value.push(edge)
    // lf.addEdge(edge)
    }else{//其它连线（审批通过连线）
    const edge={
        id: 'edge'+index,
        sourceNodeId: 'node'+(index+1),
        targetNodeId: 'node'+(index+2),
        type: 'polyline',
        text: '通过',
        startPoint: {
            x:xData*(index+1)+xData/2,
            y:125*(index+1)+nodeHeight.value/2,
            },
            endPoint: {
              x: xData*(index+2)+xData/2-nodeWidth.value/2,
              y: 125*(index+1),
            },
            pointsList: [
            {
            x:xData*(index+1)+xData/2,
            y: 125*(index+1)+nodeHeight.value/2,
            },
              {
                x:xData*(index+1)+xData/2,
                y: 125*(index+2),
              },
              // {
              //   x:xData*(index),
              //   y: 150*(index+1),
              // },
              {
                x: xData*(index+2)+xData/2-nodeWidth.value/2,
              y: 125*(index+2),
            },
            ],
        properties: {
        style:{
            stroke:'green'
            }
          },
    }
    edges.value.push(edge)
    // lf.addEdge(edge)
    }
    
  })
  console.log(edges.value)
  let data={nodes:nodes.value,edges:edges.value}
    console.log(data)
    nextTick(()=>{
        if(flowData.value.length>0){
            init(data)
        }else{
            data={nodes:[],edges:[]}
            init(data)
        }
    })
//   根据流程节点数调整画布高度
  drawContiner.value.style.height = `${125*(nodes.value.length)}px`;
}

流程图效果

在这里插入图片描述

总结

以上就是今天要讲的内容，关于logicFlow的初始化，容器设置，样式设置，以及节点的设置和边的设置，以及边的锚点的设置。

重点：如何设置连接锚点

需设置起始锚点，终点和转折点，这几个点通常和起始节点和终点节点的坐标有关。
比如起始节点的
上方锚点的横坐标为起始节点的横坐标，纵坐标为起始节点纵坐标减掉起始节点的高度的一半
下方锚点的横坐标为起始节点的横坐标，纵坐标为起始节点纵坐标加上起始节点的高度的一半
左边锚点的横坐标为起始节点的横坐标减掉节点的宽度的一半，纵坐标为起始节点纵坐标
右边锚点的横坐标为起始节点的横坐标加上节点的宽度的一半，纵坐标为起始节点纵坐标
终点坐标同理
转折点坐标一般横坐标为起始锚点的横坐标，纵坐标为终点锚点的纵坐标

 startPoint: {//起始点，用于自定义起始锚点，而不是用默认锚点
            x:xData/2-40,//起始节点的下方锚点横坐标，（就是起始节点横坐标）
            y: 50+25,//起始节点的下方锚点纵坐标（起始节点纵坐标加上起始节点高度的一半）
            },
            endPoint: {//终点，用于自定义终点锚点，而不是用默认锚点
                x: xData+xData/2-40-60,
                y: 150,
            },
            pointsList: [
            {//起始锚点，跟上边起始点锚点坐标一样
                x:xData/2-40,
                y: 50+25,
            },
            {//转折点，折线的转折点坐标，
                x:xData/2-40,
                y:  150,
            },
            {//终点锚点跟上边终点锚点坐标一样
                x: xData+xData/2-40-60,
                y: 150,
            },
            ],
标签
#vue.js #流程图 #前端
LogicFlow 学习笔记——10. LogicFlow 进阶 边
lt5227的博客
06-17 2618
本篇博客介绍了如何利用 Vue 组件来自定义 LogicFlow 中的边，实现在边上添加任意 Vue 组件，并通过样式隐藏原有边来重新绘制。同时，文章提到了如何保存锚点信息以及如何给边添加动画效果，使流程图更具交互性和视觉吸引力。此外，博客还提供了一个详细的样例，展示了在项目中如何配置和使用 JSX，以及如何在 LogicFlow 中实现这些自定义功能。
五、LogicFlow 创建自定义节点并实现节点拖拽
赵花花的博客
09-06 4510
LogicFlow 创建自定义节点，并实现左侧菜单拖拽节点到右侧画布
logicflow+vue流程可视化开箱即用demo模板
08-12
logicflow+vue流程可视化开箱即用demo模板
LogicFlow自定义边（Edge）
实用型前端技术布道
01-05 2075
LogicFlow 是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow支持前端研发自定义开发各种逻辑编排场景，如流程图、ER图、BPMN流程等。在工作审批配置、机器人逻辑编排、无代码平台流程配置都有较好的应用。
logicflow_vue_demo
04-05
logicflow_vue_demo 逻辑流的vue应用实例逻辑流程详细内容参照 功能 实例中包含的功能实现： 画布 快捷操作 官员面板 官员自定义 官员菜单 图形下载 画布：src / components / LF.vuesrc / components / registerNode官方面板：src / components / NodePanel.vue 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
vue + LogicFlow 实现流程图展示
qq_44242707的博客
03-27 6546
本文介绍了在Vue项目中使用LogicFlow实现流程图展示的解决方案。针对低代码平台需求，作者从配置端获取流程图json数据，通过分析节点和连线信息转换为LogicFlow所需格式。文章详细说明了安装配置、运行问题排查（如preact和mobx版本冲突），以及关键实现步骤：包括挂载LogicFlow实例、自定义节点样式、处理流程json数据转换等。特别展示了如何继承HtmlNode类创建自定义节点组件，并解决了Vue样式隔离问题。该方案实现了在展示完整流程图的同时，高亮显示执行历史路线的功能。
LogicFlow（Vue3）
temie的博客
06-09 8360
官方文档 步骤1 //LogicFlow npm install @logicflow/core --save //LogicFlow组件 npm install @logicflow/extension --save 快速上手 参考官网案例 // 创建容器 <div id="container"></div> // 准备数据 const data = { // 节点 nodes: [ {id: 21, type: 'rect',x: 100,y: 200,text
vue整合logicflow
最新发布
qq_62408075的博客
11-21 4403
,methods: {init(){//el-icon-delete是element图标 icon-delete是自定义属性title: "清空画板",text: "清空画板",console.log('清空画板')})},</script>/*铺满剩余空间*/</style>//自定义and节点// 提供节点 svg dom// 提供节点的样式//自定义业务节点// 提供节点。
vue使用logicflow实现流程图
qq_51721168的博客
08-26 3737
LogicFlow是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow支持前端自定义开发各种逻辑编排场景，如流程图、ER图、BPMN流程等。在工作审批流配置、机器人逻辑编排、无代码平台流程配置都有较好的应ten。
lf-approval-vue：LogicFlow for Vue的批准示例
02-26
lf-approval-vue 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
LogicFlow:流程可视化的前端框架
03-08
逻辑流 LogicFlow是一种流程可视化的前端框架，提供了一系列流程图交互，编辑所必需的功能和简单灵活的例程自定义，插件等扩展机制，方便我们快速在业务系统内部满足类流程图的需求。 特性 :bullseye:专业的 专注于业务流程可视化的解决方案 :rocket:快速建造 提供配套能力（undo /对齐线/键盘）快速构建流程图编辑器，提升研发效率 :hammer_and_wrench:高拓展性 提供自定义能力和插件能力，助力定制化的业务场景 使用 安装 # npm $ npm install @logicflow/core --save # yarn $ yarn add @logicflow/core 代码示例 // 创建容器 < div xss=removed> < / div > // 准备数据 const data = { // 节点 nodes : [ { id : 21 , type :
使用logicflow流程图实例
yao136的专栏
02-22 3503
需要使用流程引擎开发项目，没有使用flowable、activiti这类的国外流程引擎，想使用国内的引擎二次开发，缺少单例模式的流程画图程序，都是vue、react、angluer的不适合，从网上找了antx6、logicflow、bpmn.js。感觉最容易使用的是logicflow，所以翻模了官方示例（官方使用的react）。
LogicFlow自定义业务节点
实用型前端技术布道
01-04 4252
LogicFlow 是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow支持前端研发自定义开发各种逻辑编排场景，如流程图、ER图、BPMN流程等。在工作审批配置、机器人逻辑编排、无代码平台流程配置都有较好的应用。
流程图 LogicFlow
qq_41985405的博客
10-10 4643
官方文档：https://site.logic-flow.cn/tutorial/get-started
前端绘制流程图、泳道图
byebukesi的博客
07-11 4738
使用magicFlow插件绘制。原生HTML页面也可以，vue或react前端框架也可以，官网有详细安装方法，本文章后面也会详细说明。
LogicFlow 学习笔记——4. LogicFlow 基础 边 Edge
lt5227的博客
06-13 3444
本篇博客详细介绍了如何在 LogicFlow 中使用和自定义边（Edge）。文章首先解释了内置的边类型，如直线、折线和贝塞尔曲线，并提供了具体的代码示例。随后，文章探讨了基于继承的自定义边的创建方法，包括自定义样式和文本位置。此外，还介绍了如何动态生成特定节点间边的类型的高级技巧。
LogicFlow 学习笔记——1. 初步使用 LogicFlow
lt5227的博客
06-12 8660
LogicFlow 是一个开源的前端流程图编辑器和工作流引擎，旨在帮助开发者和业务人员在网页端创建、编辑和管理复杂的业务流程和工作流。本文详细介绍了如何新建一个前端项目来编写 LogicFlow 的样例代码，使用 Vite + Vue + TypeScript 的技术栈，包括项目初始化、安装必要的依赖、配置路径别名、设置 Vue Router 和 Element-Plus、创建和配置页面、渲染 LogicFlow 节点和边、自定义节点和边的样式，以及使用插件扩展功能。
Vue3中使用LogicFlow实现简单流程图以及节点/边的配置
小阮的笔记本
11-07 6625
Vue3使用LogicFlow实现流程图，拖拽节点、自定义节点、自定义快捷键、动态配置项、表单验证...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值