当前位置: 首页 > Web前端 > HTML

AntVG6拖拽生成节点

时间:2023-03-28 19:39:03 HTML

.page{flex:1;高度:100%;溢出:隐藏;位置:相对;}#graph{宽度:100%;高度:100%;}.node_panel{位置:绝对;左:10px;顶部:10px;框阴影:004pxrgba(0、0、0、0.3);框大小:边框框;填充:10px4px;border-radius:4px;}.node_li{margin-bottom:10px;显示:弹性;弹性方向:列;-底部:20px;用户选择:无;&:last-child{margin-bottom:0;}}.item_shape{宽度:20px;高度:20px;border:1pxsolid#ccc;}.circle{border-radius:50%;}这篇文章介绍点赞+关注+书签=了解到AntVG6是一个图形可视化引擎。提供图形绘制、布局、分析、交互、动画等图形可视化的基本能力。本文主要讲解使用AntVG6实现拖拽生成节点功能,如下图所示。本文以Vue3为基础框架,配合G6实现上述效果。分析在编码之前,您需要对使用场景进行分析。需要考虑的场景1.画布可能不是全屏。在实际项目中,使用G6制作的拓扑图,画布不一定全屏。可能有一个左侧导航栏,一个顶部区域,甚至一个区域等等。此时需要考虑鼠标所在的屏幕坐标与画布坐标之间的转换。2.画布具有拖动和缩放功能。如果canvas支持拖拽缩放,鼠标所在的屏幕坐标和canvas对应的坐标会比较复杂。3、如何实现元素面板的拖拽功能?元素面板是原生HTML生成的,所以需要实现拖拽原生HTML元素的功能。查找相关的API坐标转换在上面的需求中,第一点和第二点其实都可以归类为坐标转换。如果我们需要手动计算坐标,其实还是挺麻烦的。幸运的是,G6为我们提供了一个可以将屏幕坐标转换为画布坐标的API。graph.getPointByClient(clientX,clientY)拖动如果不需要兼容IE8,可以在HTML元素上设置draggable属性为true。设置好后,可以拖拽对应的元素。例如,如果你这样做,div已经具备了被拖动的能力。在迅雷猴

之后,可以使用dragend事件监听鼠标拖动后松开的时刻。在该事件中,将鼠标松开时指针的屏幕坐标转换为对应的画布坐标,然后通过graph.addItem(type,model,stack)方法在画布上添加节点。动手编码根据前面的分析结果,我主要做了以下几步:使用G6初始化画板创建节点面板(页面左侧的控件)允许拖动元素draggable="true"到监听拖拽结束(event)@dragend="addNode(item,$event)"将页面坐标转换为渲染坐标graph.getPointByClient(clientX,clientY)添加节点graph.addItem(type,model,stack).page{flex:1;高度:100%;溢出:隐藏;位置:相对;}#graph{宽度:100%;高度:100%;}.node_panel{位置:绝对;左:10px;顶部:10px;框阴影:004pxrgba(0、0、0、0.3);框大小:边框框;填充:10px4px;border-radius:4px;}.node_li{margin-bottom:10px;显示:弹性;弹性方向:列;-底部:20px;用户选择:无;&:last-child{margin-bottom:0;}}.item_shape{宽度:20px;高度:20px;border:1pxsolid#ccc;}.circle{border-radius:50%;}代码仓库?AntVG6拖拽生成节点推荐阅读=学习代码仓库