六、LogicFlow 自定义业务边 Edge

前言

经过前面的文章讲解，目前已经实现了节点拖拽到画布中，并且也实现了节点之间的基础连线，到这里也算是入了门，接下来继续探究新学习新的功能，以满足新的需求，那么这一章就会学习如何更改两节点之间的连线问题，让线条变得更加好看，更加的形象生动，增加用户在使用过程中的体验。

边的介绍

根据官方介绍当前支持如下三种内置边：

直线(line)
直角折线(polyline)
贝塞尔曲线(bezier)

边引入方式

javascript">// 直线
import { LineEdge, PolylineEdgeModel } from "@logicflow/core";
// 折线
import { PolylineEdge, PolylineEdgeModel } from "@logicflow/core";
// 贝塞尔曲线
import { BezierEdge, BezierEdgeModel } from "@logicflow/core";

改造边（线）

基于之前的配置，mock两个节点和边的数据，如下所示：

在这里插入图片描述

实现效果如下：

在这里插入图片描述

然后我们这次的目标就是通过修改边的一些属性来优化连线的样式，让其变得更加的好看舒适，符合系统的整体视觉效果。

自定义边目录介绍

在合适的位置创建曲线文件，我这里还是跟创建自定义节点同一目录层级，如下所示：

在这里插入图片描述

这次需要改动的就是上图中圈起来的文件，这里按照引入的顺序简单介绍一下：

Edges 自定义的线条
Register.js 注册线条
index.vue 引入并使用线条

创建自定义边目录文件

在 Edges 目录下创建 Bezier.js 文件，根据官网介绍引入贝塞尔曲线（bezier）相关内置。

javascript">// 贝塞尔曲线
import { BezierEdge, BezierEdgeModel } from '@logicflow/core'// 贝塞尔曲线
class customBezierEdgeModel extends BezierEdgeModel {constructor (data, graphModel) {super(data, graphModel);}// 。。。其他属性配置}/*** 和节点一样，LogicFlow 的边也支持基于继承的自定义机制。* 同样也只需同时继承view和model。 * 但是和节点不一样的是，由于边的编辑复杂度问题，绝大多数情况下，自定义边时不推荐自定义view。 * 只需要在自定义edgeModel中样式类即可。
*/
export default {// 自定义曲线类型type: 'EDGE_BEZIER',view: BezierEdge,model: customBezierEdgeModel,
};

注册

这里的注册跟前面章节中注册节点的方式一样，在 Register.js 文件中如下配置：

javascript">
// 自定义贝塞尔曲线
import Bezier from './Edges/Bezier';export const RegisterCustomElement = (lf) => {// 。。。注册的节点// 自定义贝塞尔曲线lf.register(Bezier);
};

使用

基于前一章节在 index.vue 文件中，基本不用做什么改动，为了记忆，这里再次描述一下。

javascript"><script>// 引入LogicFlow核心包
import LogicFlow from '@logicflow/core';
import '@logicflow/core/dist/style/index.css';// 引入组件
import LeftMenu from './components/LeftMenu';// 注册自定义节点
import { RegisterCustomElement } from './lf_omponents/Register';export default ({name: 'demo',data () {return {lf: null,taskDetail: {},// 模拟数据mockData: {nodes: [{ id: "1", type: "rect", x: 100, y: 100, text: "节点1" },{ id: "2", type: "circle", x: 500, y: 300, text: "节点2" },],edges: [{sourceNodeId: "1",targetNodeId: "2",type: "EDGE_BEZIER",  // 此处改为自定义曲线类型text: "连线",startPoint: {x: 140,y: 100,},endPoint: {x: 450,y: 300,},},],}}},components: {LeftMenu,},mounted () {const that = this;// 创建实例const lf = new LogicFlow({container: this.$refs.diagram,// ... 其他的一些配置background: {// 画布背景配置}});// 存储全局对象，便于其他地方使用到 LogicFlow 实例对象that.lf = lf;// *********** 重点：注册自定义节点和边 ***************RegisterCustomElement(lf);/* 开启渲染如果不要模拟数据，直接使用 lf.render() 即可。**/lf.render(this.mockData);// 渲染到视图中心为止，否则在左上角显示lf.translateCenter();},methods: {// 拖拽节点$_dragInNode(data) {const that = this;that.lf.dnd.startDrag({...data,});},}
})</script>

基础效果

稍微修改一下之前的mock数据，如下所示：
在这里插入图片描述

到这里的时候，就能够看得出效果了，左测是之前的边（polyline），右侧是自定义边（EDGE_BEZIER）

在这里插入图片描述

到这里，我们的目的基本就达成了，接下来修改线条的颜色等配置

接下来的所有的改动都是基于 Bezier.js 文件内容进行修改。

`Bezier.js` 配置修改

启动动画

在 Bezier.js 文件中通过 setAttributes 函数让边动起来，形成有流动效果，因为这里是截图，所以看不出来，自己可以在项目中尝试。

javascript">class Model extends BezierEdgeModel {constructor (data, graphModel) {super(data, graphModel);}setAttributes() {// 启动动画this.isAnimation = true;}}

如下效果：
在这里插入图片描述

结语

其他的一些配置修改，这里就不过多赘述，自己根据官网描述自行尝试。
如果对你还有点作用，请点赞，收藏。