Vue2项目中使用AntV/X6 分辨率适配

1、写一个分辨率转换方法用来转换

//根据 1920 1080 转换
export function conversionResolution(val, type) {if (type === 'wide') {let clientWidth = window.innerWidth;return rem = (clientWidth / 1920) * val;} else if (type === 'high') {let clientHeight = window.innerHeight;if(isFullscreen()){alert(1)return rem = (clientHeight / 1080) * val;}else{return rem = (clientHeight / 969) * val;}} else {return val;}
}export function isFullscreen() {return document.fullscreenElement ||document.msFullscreenElement ||document.mozFullScreenElement ||document.webkitFullscreenElement || false;
}

2、在代码里面对宽高 x y 进行转换

//设置 子级setChildrenNodes(nodes, position) {let nodesFromPoint = this.graph.getNodesFromPoint(position.x, position.y);let parentNode = nodesFromPoint[0];let parentBBox = parentNode.getBBox();let size = nodes.length;let totalHeight = (nodes.length - 1) * (this.conversionResolution(this.childNodeHeight,'high') + this.conversionResolution(this.VerticalMargin,'high')) + this.conversionResolution(this.childNodeHeight,'high'); //子节点总高度let Y = parentBBox.center.y - totalHeight / 2; // 获取居中 Yfor (let i = 0; i < nodes.length; i++) {let childNode = nodes[i];//设置Xlet childX = parentBBox.x + parentBBox.width;childX = childX + this.conversionResolution(this.childNodeWidth,'wide') + this.conversionResolution(this.HorizontalMargin,'wide');// 子级高度  + 间距  乘 数量  加上居中Y 得出子级Ylet childY = Y + i * (this.conversionResolution(this.childNodeHeight,'high') + this.conversionResolution(this.VerticalMargin,'high'));let node = this.createNode(childNode.isRoot, childNode, { x: childX, y: childY }, this.conversionResolution(this.childNodeWidth,'wide'), this.conversionResolution(this.childNodeHeight,'high'));node.addTo(parentNode);this.createEdge(parentNode, node);}},

Vue2项目中使用AntV/X6 分辨率适配相关推荐

Vue项目中使用AntV X6绘制流程图
Vue项目中使用AntV X6绘制流程图一.需求在Vue2.x(Vue3.x项目同理)项目中使用AntV X6组件库绘制流程图,需要实现以下需求: 需求1:左侧菜单中的模块可以拖拽进入画布中生成对 ...
Vue3 项目中使用 AntV X6 绘制流程图
X6 是 AntV 旗下的图编辑引擎,提供了一系列开箱即用的交互组件和简单易用的节点定制能力,方便我们快速搭建流程图.DAG 图.ER 图等图应用. 参考一些网站的写法,然后自己加上了撤销操作. 节点 ...
在 Vue3 中使用 AntV X6
在 Vue3 中使用 AntV X6 图编辑引擎 <script setup lang="ts"> import { onMounted, ref } from 'vu ...
TS在vue2项目中的写法
作为对照,先回忆一下js在vue2项目中的写法 <script> export default{data(){return {}},methods:{},computed:{},filte ...
vue2项目中按钮实现防抖、节流功能，包含封装代码以及使用
1. 描述: 本文章是在vue2项目中对防抖节流函数进行封装,在项目按钮中使用的实际应用. ,哪里有写的不太清楚或者有错的请各位大佬指正.留言:如果对您有所帮助,希望点赞给予支持和鼓励. 2. .v ...
antvg2 环图轮播_在vue项目中引用Antv G2,以饼图为例讲解
我就废话不多说了,大家还是直接看代码吧~ npm install @antv/g2 --save template内容: js部分: //引入G2组件 import G2 from "@a ...
VUE中使用Antv.X6实现将侧边导航栏节点拖拽到画布中，并能够将画布保存到缓存中
直接上代码,参考官网的文档安装完之后可以直接运行. <template><div class="home"><div class="left ...
vue2项目中封装echarts地图的比较优雅的方式
以前写过 vue项目中封装echarts的比较优雅的方式,大屏可视化里面,除了数据图表很常用,显示省市地图区域也是很常用到的,这是姐妹篇. 区域地图选区域时,需要弹窗展示数据,样式是各种各样的,各种排 ...
在 Modal框中使用antv/x6报错Ensure the container of the graph is specified and valid
一直报错,放到modal外就好了,原因是Modal渲染时机问题. 初始化的时候获取不到是因为一直都在componentDidMount中获取Modal内的dom结构,而目前的react,compon ...

Vue2项目中使用AntV/X6 分辨率适配

Vue2项目中使用AntV/X6 分辨率适配相关推荐

最新文章

热门文章