@antv/x6 要求不显示水平滚动条,并且如果水平方向上显示不全的节点,则要求自动显示全部节点,垂直方向可以出现滚动条来滚动显示所有的节点。

本文主要是介绍@antv/x6 要求不显示水平滚动条,并且如果水平方向上显示不全的节点,则要求自动显示全部节点,垂直方向可以出现滚动条来滚动显示所有的节点。,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1、要求一共有二个:

  • 要求一:水平滚动条不显示。之前的文章中就已经发表过,可以用Scroller的className来处理。
  • 要求二:水平方向上显示全部节点,如果有显示不全的节点(即看不到的节点)要求能够显示出来,垂直方向的滚动条可以显示出来,然后用滚动条来滚动显示下面看不到的节点。

2、思路:

  • 思路一:水平不显示滚动条。vue3 @antv/x6 使用画布滚动条以后的几个问题的解决_antv x6超出屏幕滚动条-CSDN博客
graph.use(new Scroller({enabled: true,padding: {top: 0,right: 0,bottom: 0,left: 0,},pageVisible: false,pageBreak: false,autoResize: true,className: 'scrollerCss',}),);
  • 思路二:水平方向上显示所有节点。

可以通过节点的视口的坐标与容器的宽度进行比较,查看是否已经超过,如果超过,就需要重新处理容器的rect,这样就可以了。

// 自定义函数来检测节点是否完全显示function isNodeCompletelyVisible(node) {const bbox = node.getBBox(); // 获取节点的包围盒// const viewport = graph.getContentArea(); // 获取画布视口// console.log(bbox.x, viewport.x, bbox.right, viewport.x + viewport.width);// 检查节点的四个角是否都在视口内return (// bbox.x > viewport.x &&// bbox.y > viewport.y &&// bbox.right < viewport.x + viewport.width &&// bbox.bottom < viewport.y + viewport.height// bbox.x > viewport.x && bbox.right > viewport.x + viewport.widthbbox.x > unref(containerWidth));}

注掉的部分是baidu ai生成的代码,实测还是有些问题,与我们项目的要求还是不太相符。

通过实测,发现bbox.x > unref(containerWidth),这样就会返回true,那么我们就要重新设置rect来达到显示所有节点的效果。

const containerWidth = ref(0);
function resizeFitContent() {let nodes = graph.getNodes();let reqResize = false;nodes.forEach((node) => {if (!reqResize) {reqResize = isNodeCompletelyVisible(node);}});if (reqResize) {let rect = graph.getContentArea();// console.log(rect.x, rect.y, rect.width, rect.height);//下面是我们实测的padding与rect,需要根据自己项目的实际情况进行调整。graph.zoomToRect({x: rect.x - 10,y: rect.y,width: rect.width + 20,height: viewState.height - 100,},{padding: {top: '0px',right: '30px',bottom: '0px',left: '30px',},},);}

3、最好上张图,来明确下效果:

一开始只显示了四个节点,然后我们通过检测要不要自动调整以适应画布,然后看到所有的节点。

通过上面的设置,最好我们就可以看到所有的节点,如果屏幕够大,就不需要调整了。

4、上面不仅是一个显示所有节点的实现,也可以理解为适应屏幕大小的方案。

5、因为我们这个是可以显示垂直滚动条,来滚动显示内容的,如果是不匀许,那么我们就得考虑要同时处理。

这篇关于@antv/x6 要求不显示水平滚动条,并且如果水平方向上显示不全的节点,则要求自动显示全部节点,垂直方向可以出现滚动条来滚动显示所有的节点。的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1128004

相关文章

浏览器插件cursor实现自动注册、续杯的详细过程

《浏览器插件cursor实现自动注册、续杯的详细过程》Cursor简易注册助手脚本通过自动化邮箱填写和验证码获取流程,大大简化了Cursor的注册过程,它不仅提高了注册效率,还通过友好的用户界面和详细... 目录前言功能概述使用方法安装脚本使用流程邮箱输入页面验证码页面实战演示技术实现核心功能实现1. 随机

C++链表的虚拟头节点实现细节及注意事项

《C++链表的虚拟头节点实现细节及注意事项》虚拟头节点是链表操作中极为实用的设计技巧,它通过在链表真实头部前添加一个特殊节点,有效简化边界条件处理,:本文主要介绍C++链表的虚拟头节点实现细节及注... 目录C++链表虚拟头节点(Dummy Head)一、虚拟头节点的本质与核心作用1. 定义2. 核心价值二

SpringBoot中4种数据水平分片策略

《SpringBoot中4种数据水平分片策略》数据水平分片作为一种水平扩展策略,通过将数据分散到多个物理节点上,有效解决了存储容量和性能瓶颈问题,下面小编就来和大家分享4种数据分片策略吧... 目录一、前言二、哈希分片2.1 原理2.2 SpringBoot实现2.3 优缺点分析2.4 适用场景三、范围分片

SpringSecurity显示用户账号已被锁定的原因及解决方案

《SpringSecurity显示用户账号已被锁定的原因及解决方案》SpringSecurity中用户账号被锁定问题源于UserDetails接口方法返回值错误,解决方案是修正isAccountNon... 目录SpringSecurity显示用户账号已被锁定的解决方案1.问题出现前的工作2.问题出现原因各

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.

Python打印对象所有属性和值的方法小结

《Python打印对象所有属性和值的方法小结》在Python开发过程中,调试代码时经常需要查看对象的当前状态,也就是对象的所有属性和对应的值,然而,Python并没有像PHP的print_r那样直接提... 目录python中打印对象所有属性和值的方法实现步骤1. 使用vars()和pprint()2. 使

一文详解MySQL如何设置自动备份任务

《一文详解MySQL如何设置自动备份任务》设置自动备份任务可以确保你的数据库定期备份,防止数据丢失,下面我们就来详细介绍一下如何使用Bash脚本和Cron任务在Linux系统上设置MySQL数据库的自... 目录1. 编写备份脚本1.1 创建并编辑备份脚本1.2 给予脚本执行权限2. 设置 Cron 任务2

Python pip下载包及所有依赖到指定文件夹的步骤说明

《Pythonpip下载包及所有依赖到指定文件夹的步骤说明》为了方便开发和部署,我们常常需要将Python项目所依赖的第三方包导出到本地文件夹中,:本文主要介绍Pythonpip下载包及所有依... 目录步骤说明命令格式示例参数说明离线安装方法注意事项总结要使用pip下载包及其所有依赖到指定文件夹,请按照以

MyBatis Plus 中 update_time 字段自动填充失效的原因分析及解决方案(最新整理)

《MyBatisPlus中update_time字段自动填充失效的原因分析及解决方案(最新整理)》在使用MyBatisPlus时,通常我们会在数据库表中设置create_time和update... 目录前言一、问题现象二、原因分析三、总结:常见原因与解决方法对照表四、推荐写法前言在使用 MyBATis

Python使用smtplib库开发一个邮件自动发送工具

《Python使用smtplib库开发一个邮件自动发送工具》在现代软件开发中,自动化邮件发送是一个非常实用的功能,无论是系统通知、营销邮件、还是日常工作报告,Python的smtplib库都能帮助我们... 目录代码实现与知识点解析1. 导入必要的库2. 配置邮件服务器参数3. 创建邮件发送类4. 实现邮件