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-645898.html

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

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

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

相关文章

  • vue3中使用Three.js及ROS2绘制机器人3D图形

    要实现机器人3D位置的显示,你需要使用ROS2和Vue3结合开发。 首先,在Vue3中创建一个3D场景,你可以使用Three.js库来创建。Three.js是一个用于创建和渲染3D图形的JavaScript库,可以轻松创建3D场景、3D对象、光线等。 接下来,在Vue3中使用ROS2提供的 roslibjs 库,订阅机器人的位置信

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

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

    2024年02月15日
    浏览(51)
  • 了解AntV/x6

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

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

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

    2023年04月27日
    浏览(33)
  • 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日
    浏览(32)
  • vue3.0 bpmn-js + TS 简易教程

    bpmn.js是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成. 这里主要记录本人在开发bpmn中的流程 参照了 LinDaiDai_霖呆呆 大佬的文档 安装 bpmn HTML JS CSS styleCss.scss 这个是自己写的样式文件 以上就是vue3.0 bpmn-js + TS 简易教程感谢大家的阅读 如碰到其他的问题

    2024年02月14日
    浏览(39)
  • 「AntV」X6图编辑器的应用——流程图实现

    在线预览 源码 阮一峰:SVG图像入门 SVGtutorial 因为antv/x6是基于SVG的图编辑器,所以SVG的知识有必要了解下的 简介 可缩放矢量图形【基于图形】 全称:Scalable Vector Graphics 定义基于矢量的图形 基于XML语法 放大缩小不会失真 属于万维网标准 可以插入DOM,通过JavaScript和CSS来操作

    2024年02月09日
    浏览(57)
  • 「AntV」X6开发实践:踩过的坑与解决方案

    长期更新版文档请移步语雀(「AntV」X6开发实践:踩过的坑与解决方案 (yuque.com)) --Recent update:2024-01-05 相信你们在开发中更多的需求是需要自定义拖拽源,毕竟自定义的功能扩展性高一些,而且可以根据你的业务需求灵活设置。自定义拖拽的优点就是:万物皆可成为拖拽源,

    2024年02月08日
    浏览(104)
  • 【前端vue升级】vue2+js+elementUI升级为vue3+ts+elementUI plus

    gogo code 是一个基于 AST (源代码的抽象语法结构树状表现形式)的 JavaScript/Typescript/HTML 代码转换工具,可以用它来构建一个代码转换程序来帮助自动化完成如框架升级、代码重构、多平台转换等工作。 当前 GoGoCode 支持解析和操作如下类型的代码: ○JavaScript(JSX) ○Typescript

    2024年02月12日
    浏览(54)
  • vue3+ts import引入第三方js文件报错解决方法

    报错原因 :执行 import XXX from ‘XXX.js’ 报错,The requested module ‘xxx.js’ does not provide an export named ‘default’ 可能是第三方文件不支持模块化标准,不能按需导入 解决方案 : 第一种方法 : 在index.html里利用script全局引入 第二种方法 : 在所需的.vue文件里单独引入,最后在hea

    2024年02月16日
    浏览(59)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包