antv x6踩坑记录二

graph配置panning，会出现一种情况，就是我鼠标点击了画布的某个点，然后滚动滑轮去点击不在当前视图的某个节点的时候，它会自动聚焦到你之前点击的画布的点上
使用fromJSON去序列化节点渲染，在有群组节点的情况下，会出现群组内的节点连线被覆盖的问题，我的处理情况是通过先将节点中的群组节点和子节点区分开来，通过addNodes先将所有的群组节点渲染，然后在渲染子节点和普通节点，最后遍历群组节点，通过addChild的方法把对应的子节点添加到对应的群组节点中，最后才通过addEdges方法渲染连线
关于连线校验的validateEdge和validateConnection，这里说下，validateConnection是指在移动边的时候判断连接是否有效，如果返回 false，当鼠标放开的时候，不会连接到当前元素，否则会连接到当前元素。validateEdge是指当停止拖动边的时候根据 validateEdge 返回值来判断边是否生效，如果返回 false, 该边会被清除。看起来都是创建连线时候的校验，但是通过getEdges方法去获取边的时候，会发现validateEdge在没有返回true的时候，获取到的连线还是之前的连线，但是validateConnection获取到的连线数据已经包含当前还未完成的连线数据，这对于用于某些几点的连线，重复判断可能会造成误差。所以我将对比的连线数据变化放到validateEdge去做更改监听
关于节点hover效果，鼠标移入节点线上链接桩和变色的实现方法：

//通过graph的视图交互事件
// 鼠标移入节点graph.on("node:mouseenter", ({ e, node, view }) => {// 获取当前节点的链接桩const ports = node.getPorts();showPorts(node, ports, true);node.setAttrs({// 节点样式})})
// 鼠标移出节点，通过node:mouseleave实现，只需要把showPorts的visible参数改为false就OK了
// 控制链接桩显示与隐藏的函数
function showPorts(node, ports, visible) {ports.forEach(port => {node.setPortProp(port.id,'attrs/circle/style/visibility',visible ? 'visible' : 'hidden',)})
}

antv x6踩坑记录二相关推荐

antv x6踩坑记录一
x6的配置啥的,这里就不赘诉了,可以去官网看antv x6官网地址,写得很详细,这里主要讲一下使用x6的过程中遇到的坑的问题,有的找到了解决办法,有的暂时没找到解决办法,如果哪位大佬有解决办法,愿意分 ...
【javascript】浏览器调用摄像头扫二维码踩坑记录
前言最近做一个项目需要用浏览器调用摄像头扫二维码,然后就踩了几个坑记录下. 踩坑记录我一开始发现了zxing这个库,他分为https://www.npmjs.com/package/@zxing/ ...
企业微信自建集成应用——踩坑记录（二）
问题五描述:在应用配置信息中,配置可信域名(可作为应用OAuth2.0网页授权功能的回调域名),同一个域名,明明之前都可以使用校验成功了,现在把文件放到服务器上还是校验失败原因:由于之前使用的域名 ...
sonar覆盖率怎么统计的_实战|Java 测试覆盖率 Jacoco插桩的不同形式总结和踩坑记录(上）...
本文为霍格沃兹测试学院优秀学员关于 Jacoco 的小结和踩坑记录.测试开发进阶学习,文末加群. 一.概述测试覆盖率是老生常谈的话题.因为我测试理论基础不是很好,这里就不提需求.覆盖率等内容,直奔主 ...
Dubbo3的Triple协议踩坑记录
Triple协议踩坑记录 Triple协议 Triple 协议是 Dubbo3 提出的基于 HTTP2 + gRPC 的开放协议,完整兼容 gRPC over HTTP/2,旨在解决 Dubbo2 私 ...
日常踩坑记录-汇总版
开发踩坑记录,不定时更新心得 RTFM 严谨的去思考问题,处理问题严格要求自己的代码编写习惯与风格注意单词拼写 20200207 mybatis plus 自带insert插入异常 sql i ...
gitea 手动编译过程，以及踩坑记录
gitea 手动编译过程,以及踩坑记录一: 环境介绍二:下载源码三:编译安装go 环境 3.1 修改源为阿里 3.2 添加执行权限 3.2 添加环境变量四:安装nodejs 4.1 添加源 4 ...
【学习记录】QT5界面设计的踩坑记录
学习记录:QT5 界面设计的踩坑记录前言一.Qlabel显示视频与图片 1. 图片显示 1.1 显示格式 1.2 label随界面缩放 1.3 界面刷新 2. 视频显示二.常见控件的StyleS ...
Win10+yolov5 踩坑记录
Windows10下配置yolov5环境踩坑记录起因随笔基本的环境要求 yolov5各代码作用踩坑的Package windwos下torch和torchvision的安装 windows下p ...

antv x6踩坑记录二

antv x6踩坑记录二相关推荐

最新文章

热门文章