AntVG6拖拽生成节点

.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已经具备了被拖动的能力。在迅雷猴