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; // 获取居中 Y
			for (let i = 0; i < nodes.length; i++) {
				let childNode = nodes[i];
				//设置X
				let childX = parentBBox.x + parentBBox.width;
				
				
				childX = childX + this.conversionResolution(this.childNodeWidth,'wide') + this.conversionResolution(this.HorizontalMargin,'wide');
				// 子级高度  + 间距  乘 数量  加上居中Y 得出子级Y
				let 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);
			}
		},
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值