vue3+ts使用antv/x6 + 自定义节点

这篇具有很好参考价值的文章主要介绍了vue3+ts使用antv/x6 + 自定义节点。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用 2.x 版本 x6.antv 新官网:

安装

npm install @antv/x6
//"@antv/x6": "^2.1.6",

项目结构
vue3+ts使用antv/x6 + 自定义节点,vue.js,javascript,图形渲染

1、初始化画布 index.vue
<template>
    <div id="container"></div>
</template>
    
<script setup lang='ts'>
import { onMounted } from "vue";
import { Graph } from '@antv/x6';
let graph:Graph
const graphInit = ()=>{
    graph = new Graph({
        container: document.getElementById('container')!,
    });
}

onMounted(()=>{
    graphInit()
})
</script>
     
<style scoped>
#container{
    width: 100vw;
    height: 100vh;
}
</style>
2、注册节点

渲染 Vue 节点,这个文档完全够用

npm install @antv/x6-vue-shape
//"@antv/x6-vue-shape": "^2.0.9",

节点node.vue

<template>
  <div class="nodeitem">
    {{ data?.nodeName }}
  </div>
</template>
<script setup lang='ts'>
import { inject, onMounted,ref } from "vue";
import { Node } from '@antv/x6'

interface NodeDTO {
  nodeId?: string
  nodeName: string
}

const getNode: Function | undefined = inject<Function>("getNode");
const data =  ref<NodeDTO|undefined>(undefined)
onMounted(() => {
  const node = getNode?.() as Node;
  data.value = node?.getData()
});
</script>
    
<style scoped>
.nodeitem{
  width:100px;
  border: 1px solid #ccc;
}
</style>
3、在画布引入并注册自定义节点,配置节点信息

主画布:index.vue

<template>
    <div id="container"></div>
    <TeleportContainer/>
</template>
    
<script setup lang='ts'>
import { onMounted } from "vue";
import { Graph,Cell } from '@antv/x6';
import NodeItem from "./node.vue";
import {register,getTeleport} from '@antv/x6-vue-shape'
let graph:Graph
register({
    shape: "node-item",
    width: 150,
    height: 100,
    component: NodeItem,
});// 注册自定义节点
const TeleportContainer = getTeleport();// 自定义节点优化
const refreshData = (data)=>{//渲染节点数据
    const cells: Cell[] = []
    data.nodes.forEach((item: any) => {
        cells.push(graph.createNode(item))
    })
    data.edges?.forEach((item: any) => {
        cells.push(graph.createEdge(item))
    })
    graph.resetCells(cells)
    graph.centerContent()
    graph.zoomToFit({ padding: 10, maxScale: 1 })
}
const graphInit = ()=>{
    graph = new Graph({
        container: document.getElementById('container')!,
    });
    let data = {
        nodes: [
            {
                id: 'node1', // String,可选,节点的唯一标识
                shape: 'node-item',
                x: 40,       // Number,必选,节点位置的 x 值
                y: 40,       // Number,必选,节点位置的 y 值
                data: {
                    nodeId: 'node1',
                    nodeName: '节点1',
                },
            }
        ],
        edges:[]
    }
    refreshData(data)
}
onMounted(()=>{
    graphInit()
})
</script>

展示
vue3+ts使用antv/x6 + 自定义节点,vue.js,javascript,图形渲染
小小预告:
下一篇 自定义节点样式
再下一篇 vue3 + antv/x6 实现拖拽侧边栏节点到画布文章来源地址https://www.toymoban.com/news/detail-650391.html

到了这里,关于vue3+ts使用antv/x6 + 自定义节点的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue2中实现Antv g6 流程图 以及自定义节点

    本案例 antv g6版本: \\\"@antv/g6\\\": \\\"^3.4.8\\\", 效果: 1.引入antv g6和echarts差不多 一定记得给盒子设置宽高 初学者一个,以上如有问题或者错误,多谢指出

    2024年02月13日
    浏览(54)
  • uniapp使用vue3和ts开发小程序自定义tab栏,实现自定义凸出tabbar效果

    要实现自定义的tabbar效果,可以使用自定义tab覆盖主tab来实现,当程序启动或者从后台显示在前台时隐藏自带的tab来实现。自定义一个tab组件,然后在里面实现自定义的逻辑。 组件中所使用的组件api可以看:Tabbar 底部导航栏 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-

    2024年02月04日
    浏览(43)
  • vue3+vite+ts 通过svg-sprite-loader 插件使用自定义图标

    第一步 首先下载svg插件和fs模块; 后续需要用到 第二步新建文件夹和文件 将下载好的svg文件放入新建好的svg文件夹中 index.vue 代码 这里是创建一个 svg-icon / 组件 index.ts 代码 第三步 打开main.ts 将创建好的 svg-icon / 组件注入到全局组件 第四步 在根目录打开vite.config.ts ** 如果引

    2024年02月15日
    浏览(42)
  • vue3+ts+element-plus 之使用node.js对接mysql进行表格数据展示

    * 初始化node 查看node是否安装 node -v 初始化命令 npm init 初始化配置解释如下: 完成后会有一个package.json文件 * 安装可能用到的依赖 根据需求安装,我这里需要对接mysql,安装依赖 ,我是一次性安装完,后边会直接使用,也可以边安装边使用。如下 安装成功如下: * 配置文件

    2024年02月15日
    浏览(49)
  • vue3 ts 定义全局变量

    在 Vue3 中使用 TypeScript 定义全局变量可以这样做: 创建一个文件,如 global.d.ts ,并在其中声明全局变量。 在 main.ts 或其他入口文件中引入该文件。 在需要使用全局变量的地方直接使用即可。 注意,这种方式只能用于定义全局变量,不能用于定义全局函数或类。

    2024年02月17日
    浏览(47)
  • AntV G6自定义节点(多边形+图片)

    要求:拓扑节点根据不同的设备类型显示不同的图标,且根据设备状态显示不同的背景色,鼠标点击选中节点还可高亮 不同设备不同图标,不同状态不同背景色 鼠标点击选中节点高亮

    2024年02月09日
    浏览(61)
  • 了解AntV/x6

    先放官网和图片,最好的学习地方仍然是官网。 官网:https://x6.antv.antgroup.com/ 介绍:X6 是基于 HTML 和 SVG 的图编辑引擎,提供低成本的定制能力和开箱即用的内置扩展,方便我们快速搭建 DAG 图、ER 图、流程图、血缘图 等应用。 这个流程图其实是Echarts没有的,相信很多和我

    2024年02月05日
    浏览(31)
  • antv/x6绘图 2.2.1

    网址:https://x6.antv.antgroup.com/ 文档:https://x6.antv.antgroup.com/tutorial/about API:https://x6.antv.antgroup.com/api/graph/graph praph配置:https://x6.antv.antgroup.com/api/graph/graph#connecting 介绍:X6 是基于 HTML 和 SVG 的图编辑引擎,提供低成本的定制能力和开箱即用的内置扩展,方便我们快速搭建 DAG

    2024年02月14日
    浏览(31)
  • antv x6 神奇的图片边框

    昨天才把html节点中的图片转成base格式的,今天就发现一个用户体验的问题;那么是啥呢?就是我从左侧的树形菜单中拖拽节点的时候(鼠标按下也是同样问题),发现节点的图片区域那里会出现一个边框,持续时间不是很长,就几毫秒的时间,但是当你连续拖拽几个不同节

    2023年04月27日
    浏览(29)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包