前言
经过前面的文章讲解，目前已经实现了节点拖拽到画布中，并且也实现了节点之间的基础连线，到这里也算是入了门，接下来继续探究新学习新的功能，以满足新的需求，那么这一章就会学习如何更改两节点之间的连线问题，让线条变得更加好看，更加的形象生动，增加用户在使用过程中的体验。
边的介绍
根据官方介绍当前支持如下三种内置边：
- 直线(line)
- 直角折线(polyline)
- 贝塞尔曲线(bezier)
边引入方式
// 直线
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）相关内置。
// 贝塞尔曲线
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 文件中如下配置：
// 自定义贝塞尔曲线
import Bezier from './Edges/Bezier';export const RegisterCustomElement = (lf) => {// 。。。注册的节点// 自定义贝塞尔曲线lf.register(Bezier);
};
使用
基于前一章节在 index.vue 文件中，基本不用做什么改动，为了记忆，这里再次描述一下。
<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 函数让边动起来，形成有流动效果，因为这里是截图，所以看不出来，自己可以在项目中尝试。
class Model extends BezierEdgeModel {constructor (data, graphModel) {super(data, graphModel);}setAttributes() {// 启动动画this.isAnimation = true;}}
如下效果：
结语
其他的一些配置修改，这里就不过多赘述，自己根据官网描述自行尝试。
如果对你还有点作用，请点赞，收藏。