antv x6一些简单效果的实现总结

本文是对antv x6一个初步使用的简单总结，主要包括以下几点：

1.实现画布的平移拖拽

2.实现画布的layout方法

3.实现画布的放大缩小方法

4.实现画布的居中效果

实现效果如下：

完整代码如下：

<template><div><button @click="zoomInFn">放大</button><button @click="zoomOutFn">缩小</button><div id="container"></div></div>
</template><script>
import { Graph } from '@antv/x6'
import { GridLayout } from '@antv/layout' // umd模式下， const { GridLayout } = window.layout
export default {name: 'X6',mounted () {this.initComponent()},data () {return {data: {}, // X6 数据graph: undefined, // new X6gridLayout: undefined, // new GridLayoutnewModel: undefined}},methods: {zoomInFn () { // 放大this.graph.zoom(0.2)},zoomOutFn () { // 缩小this.graph.zoom(-0.2)},initComponent () {this.data = {nodes: [// 节点{id: 'node1', // String，可选，节点的唯一标识width: 80, // Number，可选，节点大小的 width 值height: 40, // Number，可选，节点大小的 height 值label: 'hello' // String，节点标签},{id: 'node2', // String，节点的唯一标识width: 80, // Number，可选，节点大小的 width 值height: 40, // Number，可选，节点大小的 height 值label: 'world' // String，节点标签}],edges: [// 边{source: 'node1', // String，必须，起始节点 idtarget: 'node2' // String，必须，目标节点 id}]}this.graph = new Graph({container: document.getElementById('container'),width: 800,height: 600,panning: true // 拖拽平移})this.gridLayout = new GridLayout({ // layout布局type: 'grid',width: 600,height: 400,center: [300, 200],rows: 4,cols: 4})this.newModel = this.gridLayout.layout(this.data)this.graph.fromJSON(this.newModel)this.graph.centerContent() // 画布居中}}
}
</script><style scoped></style>

antv x6一些简单效果的实现总结相关推荐

Vue3 项目中使用 AntV X6 绘制流程图
X6 是 AntV 旗下的图编辑引擎,提供了一系列开箱即用的交互组件和简单易用的节点定制能力,方便我们快速搭建流程图.DAG 图.ER 图等图应用. 参考一些网站的写法,然后自己加上了撤销操作. 节点 ...
使用antv/X6实现流程图（包括线条动画流动，路径标签，悬浮窗口等）快速搭建流程图，DAG图等初始实践记录
文章目录开始使用 Step 1 创建容器 Step 2 准备数据 Step 3 渲染画布取消节点的移动使用不同图形渲染节点画布居中和缩放修改边样式给虚线增加流动效果修改节点和边的属性鼠 ...
Antv X6布局layout的使用
相信很多用过Antv G6或者echarts关系图等的大佬都知道,关于图形的layout布局都是已经内置好的,只需要修改layout就行了,但是,,,,,在Antv X6这块就行不通了........ ...
antv x6画布内容居中
一般情况下,我们使用antv x6画出的图形在画布中不是居中的状态,看上去很奇怪,所以需要一种方法来实现图形在画布中的居中效果在官网中找到如下方法: this.graph.centerContent ...
【VUE3+AntV X6】引入ANTV X6 的流程图编辑器应用（一）
ANTV X6 流程图编辑器应用唠唠叨叨事发背景实现效果实现思路总结参考资料唠唠叨叨唉!最近感觉非常忙,要学的东西太多,要实现的方法变幻莫测,层出不穷,越学越觉得自己不会的实在太多.项 ...
AntV X6制作画板工具（图形，线段，图片上传）
前后端配合问题总结: 1.使用upload上传组件时,需要在接口调用成功之后的函数中进行图片展示,action调用接口,formatter配合拿取后端接口返回的图片数据 2.upload内部只可包含一 ...
AntV X6的安装与搭建
上次做拓扑图的时候研究了G6,但是G6偏展示一点,有一些操作的不是很好用,就又研究了一番X6,虽然到最后只研究了个皮毛,但是研究过程还是有必要记录一下的. 官网的快速上手 1.安装&引用 &l ...
Antv X6画布缩放
首先在官网上查到关于画布缩放的知识,如下截图所示: 接下来画布缩放这边,我是写了两个按钮,按钮点击时进行相应的放大和缩小代码布局如下: 主要代码: <div><button @cl ...
Vue项目中使用AntV X6绘制流程图
Vue项目中使用AntV X6绘制流程图一.需求在Vue2.x(Vue3.x项目同理)项目中使用AntV X6组件库绘制流程图,需要实现以下需求: 需求1:左侧菜单中的模块可以拖拽进入画布中生成对 ...

antv x6一些简单效果的实现总结

antv x6一些简单效果的实现总结相关推荐

最新文章

热门文章