李钟意讲前端

外观

咨询/接单/付费bug修复/学习交流群

antv g6 渲染 svg 图片 ​

antv g6 是什么

例子 ​

快速入门 https://g6.antv.antgroup.com/manual/getting-started

事件绑定 https://g6.antv.antgroup.com/manual/middle/states/bind-event

视口操作 https://g6.antv.antgroup.com/api/graph-func/transform

代码实现过程 ​

基本例子 ​

添加 svg 图片 ​

figma-测量坐标信息 ​

查看官方文档 ​

  • 节点类型 - type image - 添加图片例子
  • 把 svg 添加到指定位置

屏幕适配 ​

要求屏幕适配

已知：
等比例缩放，原图大小 宽度/高度 === 1920/1080

这个时候 宽高度 比例不变，假设宽高比为 x/ys

1920 /1080 = x/y

又因为：
x = window.innerWidth

所以：
y = x/(1920/1080)

代码细节打磨 - 优化代码 ​

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Tutorial Demo</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <!-- -->
    <div id="mountNode"></div>
    <!-- -->
    <script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>
    <script>
      function getSize() {
        const originWidth = 1920; // 桌面svg 原图宽度
        const originHeight = 1080; // 桌面svg 原图高度

        const width = window.innerWidth; // 假设 宽度为浏览器是视口宽度
        const height = width / (originWidth / originHeight);
        return {width, height, originWidth, originHeight};
      }
      function getData() {
        const {width, height, originWidth, originHeight} = getSize();

        // 第二哥节点原图的大小和x y值
        const node2bounds = {
          width: 102,
          height: 142,
          x: 1530,
          y: 760
        };

        const data = {
          nodes: [
            {id: 'node1', type: 'image', img: './desktop.svg', size: [width, height], x: width / 2, y: height / 2},
            {
              id: 'node2',
              type: 'image',
              img: './yunying.svg',
              size: [(node2bounds.width / originWidth) * width, (node2bounds.height / originHeight) * height],
              x: (node2bounds.x / originWidth) * width + ((node2bounds.width / originWidth) * width) / 2,
              y: (node2bounds.y / originHeight) * height + ((node2bounds.height / originHeight) * height) / 2
            }
          ]
        };
        return data;
      }
      const {width, height} = getSize();

      const graph = new G6.Graph({container: 'mountNode', width, height, renderer: 'svg'});
      graph.on('node:click', (ev) => {
        const shape = ev.target;
        const item = ev.item;
        if (item) {
          const type = item.getType();
          console.log('click item', item._cfg.id);
          alert(item._cfg.id);
        }
      });
      graph.on('node:mouseenter', (ev) => {
        const shape = ev.target;
        const item = ev.item;
        if (item._cfg.id === 'node2') {
          const type = item.getType();
          console.log('mouseenter item', item._cfg.id);
        }
      });
      graph.on('node:mouseleave', (ev) => {
        const shape = ev.target;
        const item = ev.item;
        if (item._cfg.id === 'node2') {
          const type = item.getType();
          console.log('mouseleave item', item._cfg.id);
        }
      });
      new Promise((resolve, reject) => {
        setTimeout(resolve, 0);
      }).then(() => {
        const data = getData();
        graph.data(data);
        graph.render();

        // https://g6.antv.antgroup.com/api/graph-func/transform#graphzoomratio-center-animate-animatecfg
        setResize(graph);
      });

      function setResize(graph) {
        const data = getData();
        const size = getSize();
        graph.changeData(data);
        graph.changeSize(size.width, size.height);
      }

      var element = document.getElementById('mountNode');
      element.addEventListener('transitionend', function (event) {
        // 过渡效果结束后执行DOM操作代码
        console.log('event', event);
      });

      window.addEventListener('resize', () => {
        console.log('resize', window.innerWidth);
        setResize(graph);
      });
    </script>
  </body>
</html>

在线运行例子 ​

在线运行例子 /examples/svgdemo/index.html