关于前端:Antv-G6-拖拽生成节点

本文简介

点赞 + 关注 + 珍藏 = 学会了

AntV G6 是一个图可视化引擎。它提供了图的绘制、布局、剖析、交互、动画等图可视化的根底能力。

本文次要解说应用 AntV G6 实现 拖拽生成节点 的性能，如下图所示。

本文应用 Vue3 做根底框架，配合 G6 实现上图成果。

剖析

在入手编码之前须要先对应用场景做一个剖析。

须要思考的情景

1、画布可能不是全屏的

在实在我的项目中，应用 G6 做的拓扑图，画布有可能不是全屏的，很大可能有左侧导航栏、顶部区域，甚至还有也叫区域等等呢个。

此时须要思考鼠标所在的屏幕坐标和画布坐标的转换。

2、画布有拖拽和缩放性能

如果画布反对拖拽和缩放，那鼠标所在的屏幕坐标和画布对应的坐标会更简单。

3、元素面板如何实现拖拽性能？

元素面板是由原生 HTML 生成的，所以须要实现拖拽原生 HTML 元素的性能。

查找相干 API

坐标转换

下面的需要中，第 1 点和第 2 点其实都能够归为坐标转换。

如果要咱们手动计算坐标的话其实还是挺麻烦的，好在 G6 为咱们提供了一个 API，能够将屏幕坐标转换成画布坐标。

graph.getPointByClient(clientX, clientY)

拖拽

如果你不须要兼容 IE8 的话，能够在 HTML 元素上将 draggable 属性设置为 true。

设置完，对应的元素就能够拖拽了。

比方这样做，这个 div 就曾经具备被拖拽的能力。

<div draggable="true"> 雷猴 </div>

之后通过 dragend 事件能够监听到拖拽完鼠标松开的时刻，在这个事件中，将松开鼠标时的指针所在屏幕坐标转换成画布对应的坐标，再通过 graph.addItem(type, model, stack) 办法在画布上增加节点即可。

入手编码

依据后面剖析后果，我次要做了以下几步：

1. 应用 G6 初始化画板
2. 创立节点面板（页面左侧那个控件）
3. 容许拖拽元素 draggable="true"
4. 监听拖拽完结（事件）@dragend="addNode(item, $event)"
5. 将页面坐标转换为渲染坐标 graph.getPointByClient(clientX, clientY)
6. 增加节点 graph.addItem(type, model, stack)

<template>
  <div class="page">
    <!-- 节点面板 -->
    <div class="node_panel">
      <div
        v-for="item in nodeList"
        :key="item"
        class="node_li"
      >
        <div
          :class="['item_shape', item]"
          draggable="true"
          @dragend="addNode(item, $event)"
        ></div>
        <div>{{item}}</div>
      </div>
    </div>

    <!-- 画板 -->
    <div id="graph" ref="graphRef"></div>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import G6 from '@antv/g6'

const graphRef = ref(null) // 画布元素

const graph = ref(null) // 画布实例

// 数据
const graphData = {
  // 点集
  nodes: [
    {
      id: 'node1',
      x: 300,
      y: 200,
    },
    {
      id: 'node2',
      x: 600,
      y: 200,
    },
  ],
  // 边集
  edges: [
    // 示意一条从 node1 节点连贯到 node2 节点的边
    {
      source: 'node1',
      target: 'node2',
    },
  ],
}

// 初始化画布
function initGraph() {
  graph.value = new G6.Graph({
    container: graphRef.value,
    width: graphRef.value.clientWidth,
    height: graphRef.value.clientHeight,
    modes: {
      default: [
        'drag-canvas',
        'zoom-canvas',
        'drag-node'
      ]
    }
  })

  graph.value.data(graphData)
  graph.value.render()}

// 节点列表
const nodeList = [
  'rect',
  'circle',
]

// 增加节点
function addNode(type, e) {
  // 将屏幕 / 页面坐标转换为渲染坐标
  const point = graph.value.getPointByClient(e.x, e.y)

  // 新创建的节点信息
  const model = {id: 'node' + Math.random(), // id 应用了随机数，尽可能防止反复
    label: type, // 文本标签
    type: type, // 图片类型的节点
    x: point.x,
    y: point.y
  }

  graph.value.addItem('node', model, false)
}

onMounted(() => {initGraph()
})


</script>

<style lang="scss" scoped>
.page {
  flex: 1;
  height: 100%;
  overflow: hidden;
  position: relative;
}

#graph {
  width: 100%;
  height: 100%;
}

.node_panel {
  position: absolute;
  left: 10px;
  top: 10px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  padding: 10px 4px;
  border-radius: 4px;
}

.node_li {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  user-select: none;

  &:last-child {margin-bottom: 0;}
}

.item_shape {
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
}

.circle {border-radius: 50%;}
</style>

代码仓库

⭐AntV G6 拖拽生成节点

举荐浏览

👍《vue2 & G6 疾速上手》

👍《Fabric.js 从入门到收缩》

👍《Canvas 10 款根底滤镜（原理篇）》

👍《Canvas 从入门到劝敌人放弃（图解版）》

👍《SVG 从入门到悔恨，怎么不早点学起来（图解版）》

👍《SVG 在前端的 7 种应用办法，你还晓得哪几种？》

点赞 + 关注 + 珍藏 = 学会了
代码仓库