AntV X6自定义连接线样式(Vue3+TypeScript)

效果图如下:(连接线是有动画的,模拟数据传输特效)

核心代码:

在创建画布的时候即可设置连接线样式,通过createEdge属性即可实现,代码如下:

复制代码
    connecting: {
      snap: {
        radius: 50, //自动吸附,并设置自动吸附路径
      },
      allowBlank: false, // 是否允许连接到画布空白位置的点(就是能不能拉线连空白的地方)
      allowLoop: false, // 是否允许创建循环连线,即边的起始节点和终止节点为同一节点,就是能不能自我连线(箭头不能穿过仪器)
      allowNode:false, //是否允许边连接到节点(非节点上的连接桩),默认为 true 。(就是要让它必须连接到连接桩,连接到节点不行)
      allowEdge:false, //是否可以同一个起点终点,在箭头的线中间加一个箭头,就是一条线能一直加箭头
      allowMulti: true, // 是否可以一个起点连多个终点
      highlight: true, // 拖动边时,是否高亮显示所有可用的连接桩或节点,默认值为 false 。一般都会与 highlighting 联合使用。
      createEdge() {
        return new Shape.Edge({
          attrs: {
            line: {
              stroke: '#1890ff',
              strokeDasharray: 5,
              style: {
                animation: 'ant-line 30s infinite linear',
              },
              strokeWidth: 2,    // 设置连接线宽度
              targetMarker: null, // 去掉终点箭头
              sourceMarker: null, // 去掉起点箭头
            },
          },
        });
      },
    },

在全局注册连接线特效,方便AntVX6检测到样式。

复制代码
<template>
  <RouterView />
</template>

<script setup lang="ts">


</script>


<style>
body {
  margin: 0; /* 修正了这里的拼写错误 */
  padding: 0;
}
/* 连接线特效 */
@keyframes ant-line {
  to {
    stroke-dashoffset: -1000;
  }
}
</style>

总体代码如下:

复制代码
  graph.value = new Graph({
    width: 1958,
    height: 1240,
    panning:true,
    mousewheel:true,
    background: {
      color: '#f0f7fc',
    },
    container: document.getElementById('antvcontainer')!, // 断言该值不为 null
    grid: {
      visible: true,
      type: 'doubleMesh',
      args: [
        {
          color: '#eee', // 主网格线颜色
          thickness: 1, // 主网格线宽度
        },
        {
          color: '#ddd', // 次网格线颜色
          thickness: 1, // 次网格线宽度
          factor: 4, // 主次网格线间隔
        },
      ],
    },
    //连线交互
    connecting: {
      snap: {
        radius: 50, //自动吸附,并设置自动吸附路径
      },
      allowBlank: false, // 是否允许连接到画布空白位置的点(就是能不能拉线连空白的地方)
      allowLoop: false, // 是否允许创建循环连线,即边的起始节点和终止节点为同一节点,就是能不能自我连线(箭头不能穿过仪器)
      allowNode:false, //是否允许边连接到节点(非节点上的连接桩),默认为 true 。(就是要让它必须连接到连接桩,连接到节点不行)
      allowEdge:false, //是否可以同一个起点终点,在箭头的线中间加一个箭头,就是一条线能一直加箭头
      allowMulti: true, // 是否可以一个起点连多个终点
      highlight: true, // 拖动边时,是否高亮显示所有可用的连接桩或节点,默认值为 false 。一般都会与 highlighting 联合使用。
      createEdge() {
        return new Shape.Edge({
          attrs: {
            line: {
              stroke: '#1890ff',
              strokeDasharray: 5,
              style: {
                animation: 'ant-line 30s infinite linear',
              },
              strokeWidth: 2,    // 设置连接线宽度
              targetMarker: null, // 去掉终点箭头
              sourceMarker: null, // 去掉起点箭头
            },
          },
        });
      },
    },
    //高亮器
    highlighting:{
      // 当连接桩可以被链接时,在连接桩外围渲染一个 2px 宽的红色矩形框
      magnetAvailable: {
        name: 'stroke',
        args: {
          padding: 4,
          attrs: {
            'stroke-width': 2,
            stroke: 'red',
          },
        },
      }
    },

  });
相关推荐
漂流瓶jz10 分钟前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
SamHou026 分钟前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web
我不吃饼干37 分钟前
从 Vue3 源码中了解你所不知道的 never
前端·typescript
开航母的李大1 小时前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
Bruk.Liu1 小时前
《Minio 分片上传实现(基于Spring Boot)》
前端·spring boot·minio
鱼樱前端1 小时前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
coding随想1 小时前
JavaScript中的原始值包装类型:让基本类型也能“变身”对象
开发语言·javascript·ecmascript
zhangxingchao2 小时前
Flutter入门:Flutter开发必备Dart基础
前端
佚名猫2 小时前
vue3+vite+pnpm项目 使用monaco-editor常见问题
前端·vue3·vite·monacoeditor
满分观测网友z2 小时前
vue的<router-link>的to里面的query和params的区别
前端·javascript·vue.js