使用antv X6实现两点之间连线上圆点匀速移动的完整代码

周五周五，摸鱼为主

已于 2023-05-24 16:39:18 修改

阅读量365

点赞数

文章标签： vue.js 前端 javascript

于 2023-05-24 15:18:02 首次发布

本文链接：https://blog.csdn.net/weixin_54954928/article/details/130847843

版权

首先vue我使用的是vue3的写法，然后X6使用的1.31.0版本
确保vue版本正确，x6安装好，直接复制过去就能看到效果

<template>
    <div class="app">
        <div id="container" class="area-center-container" />
    </div>
</template>
<script>
import { defineComponent, onMounted } from 'vue';
import { Graph, Timing } from "@antv/x6";

export default defineComponent({
    setup() {
        let graph = null;
        const initGraph = () => {
            graph = new Graph({
                container: document.getElementById('container'),
                background: {
                    color: "#44546c"
                },
                connecting: {
                    allowBlank: true,
                },
                mousewheel: true,
                panning: true,
                grid: {
                    size: 10, 
                    visible: true 
                },
                snapline: {
                    enabled: true,
                    sharp: true
                },
                scroller: {
                    enabled: false,
                    pageVisible: false,
                    pageBreak: false,
                    pannable: false
                },
            })
           
            const ball = graph.addNode({
                shape: 'circle',
                id: 'node999',
                x: 0,
                y: 40,
                width: 60,
                height: 60,
                attrs: {
                    label: {
                        text: 'ball',
                        fontSize: 20
                    },
                    body: {
                        fill: '#FFFFFF',
                    }
                },
            })
            const ball1 = graph.addNode({
                shape: 'circle',
                id: 'node1000',
                x: 1000,
                y: 40,
                width: 60,
                height: 60,
                attrs: {
                    label: {
                        text: 'ball',
                        fontSize: 20
                    },
                    body: {
                        fill: '#FFFFFF',
                    }
                },
            })
            const edge = graph.addEdge({
                shape: 'edge', 
                id: '1001',
                source: ball,
                target: ball1,
            })

            let edge1 = graph.getCellById('1001')
            let markup = edge1.getMarkup()

            markup.push({
                tagName: 'circle',
                selector: 'circle'
            })
            edge1.setMarkup(markup) 
            let attrOption = {
                circle: {
                    r: 5,
                    fill: '#00FFFF',
                    atConnectionRatio: 0,
                    refCy: -10 
                }
            }
            let options1 = {
                delay: 0, 
                duration: 3000, 
                timing: Timing.linear, 
                complete: () => {
                    edge1.setAttrs(attrOption) 
                    edge1.transition('attrs/circle/atConnectionRatio', 1, options1)
                }, 
            }
            edge1.setAttrs(attrOption)
            edge1.transition('attrs/circle/atConnectionRatio', 1, options1)
        };
        onMounted(() => {
            initGraph()
        });
        return {
            initGraph
        }
    },
});
</script>
<style sccoped>
body {
    padding: 0;
    margin: 0;
}

.app {
    height: 100vh;
    width: 100vw;
    display: flex;
}

#container {
    flex: 1;
}
</style>