Logicflow 流程轨迹球

csd_developing

已于 2023-03-29 00:11:17 修改

阅读量588

点赞数 2

文章标签： vue.js

于 2023-03-28 22:37:49 首次发布

本文链接：https://blog.csdn.net/qq_39977518/article/details/129826861

版权

文章介绍了如何在公司新项目中利用Logicflow库创建自定义的贝塞尔边，特别是实现了一个球体沿着指定SVG路径移动的动画效果。通过继承贝塞尔曲线边类，定义球体样式和动画属性，并利用内部函数添加SVG的g标签和动画标签来达成动态展示。

摘要由CSDN通过智能技术生成

公司新项目引入了Logicflow制作流程图,记录一下实现的一个动画

效果：

kk 2023-03-28 22-22-03

import { h } from '@logicflow/core'
export default function registerMyline(lf) {
    lf.register('globe', ({ BezierEdge, BezierEdgeModel }) => {
        //继承贝塞尔曲线
        class view extends BezierEdge {
            constructor() {
                super()
            }
            getEdge() {
                const { model } = this.props
                const { properties } = model
                //定义球体
                const circleStyle = {
                    cs: '0',
                    cy: '-2',
                    r: '8', //半径为8
                    fill: 'red'
                }
                const anition = {
                    attributeName: 'cx',
                    path: properties.globePath,//svg轨迹路径
                    dur: properties.time,  //开始时间 用来控制球的速度
                    begin: properties.beginTime, //结束时间
                    fill: 'remove',
                    rotate: 'auto',
                    repeatCount: 'indefinite'
                }
                //调用Logicflow内部函数添加svg的g标签和动画标签
                return h('g', {}, [
                 
                    h('circle', { ...circleStyle }, {}, [h('animateMotion', { ...anition })])
                ])
            }

        }
        class ConnnectionModel extends BezierEdgeModel {
            constructor(data, graphModel) {
                super(data, graphModel)
            }
            setAttributes() {
                this.isAnimation = true
            }     
        }
        return {
            type: 'globe',
            view: view,
            model: ConnnectionModel
        }
    })
}