在vue3中浅尝antv X6 2.0 （一）

（仅作为antv X6使用及学习过程中的一些小记录）

• 一、快捷键之删除功能

---

因为mac没有delete键，所以在使用过程中我一直删除不了节点，刚开始还以为是不兼容，后来发现案列中可以删除，使用backspace就好了。(2.0版本记得安装插件 并引入)

<script setup>
import { onMounted } from "vue";
import { Keyboard } from '@antv/x6-plugin-keyboard'

onMounted(()=>{
    graph.bindKey('backspace', () => {
        const cells = graph.getSelectedCells()
        if (cells.length) {
          graph.removeCells(cells)
        }
      })
})

</script>

• 二、节点的变大变小

---

在看文档的时候，没有很注意版本问题，看的乱七八糟，所以在节点的形变上走了很久... 直到在文档中看到这个...

（只能说 太方便了）

（拖动这些小点点就可以变大变小了）

• 三、点击节点 获取当前节点信息 且当前节点颜色改变

---

// 重置所有节点
const reset = () => {
  const nodes = graph.getNodes()
  const edges = graph.getEdges()
  nodes.forEach((node) => {
      node.attr('body/stroke', 'black')
  })
  edges.forEach((edge) => {
      edge.attr('line/stroke', 'black')
  })
}

graph.on('node:click', ({ node }) => {
        reset() // 清空其他样式
        node.attr('body/stroke', 'orange') //当前节点边框颜色为橙色
        console.log(node , 'node') // 打印的这个noed就能获取当前节点的所有信息
      })

// 可以放在onMounted中

效果如图

• 四、将当前画布内容导出为JSON

---

 const  printNodeList = () => {
      console.log(graph.toJSON(), '导出数组');
      console.log(JSON.stringify(graph.toJSON({ diff: true })), 'JSON') // 导出的JSON字符串
    }

// 绑定在一个按钮上触发 效果如下

• 五、通过事件触发 修改节点信息

---

<button @click="changeNode">修改节点1node1</button>

<script setup>

    const changeNode = () => {
          const nodes = graph.getNodes() // 获取到当前画布的所有节点
          nodes.forEach((node) => {
            switch (node.id) {
              case "node1":
                node.prop('attrs/text/text', '我是node1被修了！')
                break
            }
            // console.log(node, 'change')
            })
     }
    
</script>

（如有不足之处，热烈欢迎各位大大指导👏👏👏）