通过anvt X6和vue3实现图编辑

这篇具有很好参考价值的文章主要介绍了通过anvt X6和vue3实现图编辑。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

通过anvt X6
X6地址:https://x6.antv.antgroup.com/tutorial/about;
由于节点比较复杂,使用vue实现的节点;
x6提供了一个独立的包 @antv/x6-vue-shape 来使用 Vue 组件渲染节点。
VUE3的案例:

<template>
  <div class="app-content">
    <div id="container"></div>
    <TeleportContainer />
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  import ProgressNode from './components/ProgressNode.vue'
  import { Graph } from '@antv/x6'
  import { register, getTeleport } from '@antv/x6-vue-shape'

  register({
    shape: 'custom-vue-node',
    width: 100,
    height: 100,
    component: ProgressNode,
  })
  const TeleportContainer = getTeleport()

  export default defineComponent({
    name: 'App',
    components: {
      TeleportContainer,
    },
    mounted() {
      const graph = new Graph({
        container: document.getElementById('container')!,
        background: {
          color: '#F2F7FA', //画布背景颜色
        },
        panning: true,//是否可以平移 默认true
        mousewheel: true,//是否可以缩放 默认true
        autoResize: true,
        interacting: function (cellView) {
          return {
                nodeMovable: false,//节点是否可以被移动。
             // vertexAddable: false,//是否可以添加边的路径点。
             // arrowheadMovable: false,//边的起始/终止箭头是否可以被移动
             // edgeMovable: false,//边是否可以被移动。
            }
       }
      })

      graph.addNode({
        shape: 'custom-vue-node',
        x: 100, //x位置 
        y: 60, //y位置 
      })
      //x,y设置为0节点添加的位置就是左上角
    },
  })
</script>

节点组件内容如下:

<template>
  <el-progress type="dashboard" :percentage="percentage" :width="80">
    <template #default="{ percentage }">
      <span class="percentage-value">{{ percentage }}%</span>
    </template>
  </el-progress>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'

  export default defineComponent({
    name: 'ProgressNode',
    inject: ['getNode',"getGraph"],//注入node和graph,可以在组件内使用了
    data() {
      return {
        percentage: 80,
      }
    },
    mounted() {
      const node = (this as any).getNode()
      console.log(node)
      const graph = (this as any).getGraph();
      const zoom = graph.zoom(); //获取缩放的比例
      // 画布缩放到0.5
      graph.zoomTo(.5, {
            center: {
            //缩放的中心
              x:0,
              y: 0
            }
      });
    },
  })
</script>

效果如下:代码运行的效果可以进行拖动进程图
通过anvt X6和vue3实现图编辑,vue,anvtX6,javascript
后记:画布进行缩放之后不是1的情况下,设置节点内部的offset会出现bug,可以通过先zoomTo 1 然后进行offset设置,设置完成之后在进行zoomTo 回去。文章来源地址https://www.toymoban.com/news/detail-636794.html

const graph = (this as any).getGraph();
          const zoom = graph.zoom();
          graph.zoomTo(1, {
            center: {
              x: 0,
              y: 0
            }
          });
//进行offset设置.....

  graph.zoomTo(zoom, {
            center: {
              x: this.zoomX,
              y: this.height / 2
            }
          });

到了这里,关于通过anvt X6和vue3实现图编辑的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • uniapp之通过vue-cli命令行创建Vue3/Vite版,JavaScript开发,引入uni-ui扩展组件

    注意: Vue3/Vite版要求 node 版本^14.18.0 || =16.0.0 如果使用 HBuilderX(3.6.7以下版本)运行 Vue3/Vite 创建的最新的 cli 工程,需要在 HBuilderX 运行配置最底部设置 node路径 为自己本机高版本 node 路径(注意需要重启 HBuilderX 才可以生效) HBuilderX Mac 版本菜单栏左上角 HBuilderX-偏好设置

    2024年02月12日
    浏览(63)
  • 基于vue3.0实现vr全景编辑器

    随着社会的不断发现,现实生活中有很多时候会使用到全景现实,比如房地产行业vr看房,汽车行业vr看车之类的,全景可视化真实还原了现场的场景,真正做到沉浸式体验。 现在我们基于vue3.0版本开发出了一款沉浸式的编辑器,只需要使用全景相机在现场拍摄全景场景,然

    2024年02月15日
    浏览(45)
  • Vue3+ts+element ui plus/antdesgin 实现可编辑单元格/可编辑功能

    此功能是基于antdesgin表格组件可编辑单元格功能修改来实现,可查看原文档:带单元格编辑功能的表格 具体思路就是在element ui plus 或者 antdesgin 表格组件的单元格插槽中进行修改,放入“editable-cell”这个div就行; 此方法不仅适用于表格,相关需要自定义编辑的功能都可用此

    2024年04月09日
    浏览(54)
  • Vue3+springboot通过websocket实现实时通信

    本文章使用vue3+springboot通过websocket实现两个用户之间的实时通信,聊天信息使用mongodb非关系型数据库进行存储。 效果图如下: 用户发送信息  农户收到信息并发送回去 后台消息打印 引入依赖   配置 在config目录下, 创建WebSocketConfig类 创建一个WebSocketServer来 处理连接 用户

    2024年02月05日
    浏览(44)
  • 使用 AntV X6 + vue 实现单线流程图

    X6 是 AntV 旗下的图编辑引擎,提供了一系列开箱即用的交互组件和简单易用的节点定制能力,方便我们快速搭建 DAG 图、ER 图、流程图等应用。 官方文档 Tips: 目前 X6 有 1.x 和 2.x 两个版本,因为官方文档的示例代码都是 1.x 版本的,所以本文档也是基于 1.x 版本的,如果你使

    2024年02月14日
    浏览(51)
  • 通过.NET Core+Vue3 实现SignalR即时通讯功能

    .NET Core 和 Vue3 结合使用 SignalR 可以实现强大的实时通讯功能,允许实时双向通信。在这个示例中,我们将详细说明如何创建一个简单的聊天应用程序,演示如何使用 .NET Core SignalR 后端和 Vue3 前端来实现实时通讯功能。 确保你已经安装了以下工具和环境: .NET Core Node.js Vue C

    2024年02月05日
    浏览(43)
  • vue3中如何实现通过点击不同的按钮切换不同的页面

    完成以上需求,我们可以使用vue中的component标签来实现。 component是Vue.js中一个特殊的标签,用于动态地绑定其它组件。它可以与v-bind:is指令一起使用,来决定要渲染哪个组件。下面是示例代码

    2024年02月09日
    浏览(54)
  • 可拖拽编辑的流程图X6

     先上图

    2024年02月11日
    浏览(42)
  • vue3+ts+tinynce富文本编辑器+htmlDocx+file-saver 配合实现word下载

    vue3 请下载html-docx-js-typescript,否则会报错类型问题 row.report效果及数据 调用

    2024年02月11日
    浏览(54)
  • 《vue3实战》通过indexOf方法实现电影评价系统的模糊查询功能

    目录 前言 一、indexOf是什么?indexOf有什么作用? 含义: 作用: 二、功能实现 这段是查询过程中过滤筛选功能的代码部分: 分析: 这段是查询用户和性别功能的代码部分: 分析: 三、最终效果图 查询输入框所在图: 输入姓名羊和性别男模糊查询后的效果图: 输入姓名羊和

    2024年02月10日
    浏览(42)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包