Vue2.0+AntvX6——画布graph

一、平移、缩放、居中

画布平移

普通画布(未开启 scroller 模式)通过开启 panning 选项来支持拖拽平移。常用的属性如下：
enabled:true || fale,
modifiers:拖拽可能和其他操作冲突,设置修饰键后需要按下修饰键并点击鼠标才能触发画布拖拽。
eventTypes:设置触发画布拖拽的行为，支持 leftMouseDown、 rightMouseDown、mouseWheel， 默认为 [‘leftMouseDown’]

 initGraph() {
      this.graph = new Graph({
        container: this.$refs.container,
        width: 800,
        height: 600,
        // 画布背景&网格
        background: {
          color: '#fffbe6' // 设置画布背景颜色
        },
        grid: {
          size: 10, // 网格大小 10px
          visible: true // 渲染网格背景
        },
        // 画布平移
        // panning:true,
        panning: {
          enabled: true,
          //  modifiers:拖拽可能和其他操作冲突，，
          // 设置修饰键后需要按下修饰键并点击鼠标才能触发画布拖拽。
          modifiers: 'shift',
          // eventTypes:设置触发画布拖拽的行为，支持 leftMouseDown、 rightMouseDown、mouseWheel，
          // 默认为 ['leftMouseDown']
          eventTypes: ['leftMouseDown', 'rightMouseDown', 'mouseWheel']
        }
      })
      this.graph.fromJSON(this.data)
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

通过以下 API 来启用/禁止画布平移：
会改变panning的enabled的值

this.graph.isPannable() // 获取画布是否可以平移
this.graph.enablePanning() // 启用画布平移
this.graph.disablePanning() // 禁止画布平移
this.graph.togglePanning() // 切换画布平移状态

    graphApiTest() {
      // this.graph.enablePanning();
      this.graph.disablePanning();
      console.log(this.graph.isPannable(), 'this.graph.isPannable()')
    }
1
2
3
4
5

画布缩放&内容居中

this.graph.zoom() // 获取缩放级别
this.graph.zoom(0.2) // 在原来缩放级别上增加 0.2
this.graph.zoom(-0.2) // 在原来缩放级别上减少 0.2

常用的就是将画布内容中心与视口中心对齐，使用方式:

this.graph.centerContent()

二、导出

step1 - 引入DataUri

import { Graph, DataUri } from '@antv/x6'
1

导出 SVG:

step2- 调用方法
this.graph.toSVG():
第一个参数：函数，
第二个参数：对象，用来设置图片属性（本人觉得不太好配置）

interface ToSVGOptions {
preserveDimensions?: boolean | Size
viewBox?: Rectangle.RectangleLike
copyStyles?: boolean
stylesheet?: string
serializeImages?: boolean
beforeSerialize?: (this: Graph, svg: SVGSVGElement) => any
}

toSvg() {
   this.graph.toSVG(dataUri => {
    DataUri.downloadDataUri(DataUri.svgToDataUrl(dataUri), 'chart.svg')
  })
}
1
2
3
4
5

//SVG图片配置
this.graph.toSVG((dataUri: string) => {
  // todo
}, {
  preserveDimensions: {
    width: 100,
    height: 100,
  }
})
1
2
3
4
5
6
7
8
9

（有会配置这个的大神，欢迎评论交流）

导出 PNG/JPEG:

step2 - 调用方法
this.graph.toPNG（）：
第一个参数：函数，
第二个参数：对象，用来设置图片属性

interface ToImageOptions {
width?: number
height?: number
backgroundColor?: string
padding?: NumberExt.SideOptions
quality?: number,
…以及svg的所有参数…
}

// 下载
    toPngJpeg() {
      this.graph.toPNG(
        dataUri => {
          DataUri.downloadDataUri(dataUri, 'chart.png')
        },
        {
          width: 300,
          heihgt: 300,
          backgroundColor: 'pink',
          padding: {
            top: 20,
            right: 30,
            bottom: 40,
            left: 50
          },
          //图片质量，可以从 0 到 1 的区间内选择图片的质量。
          //如果超出取值范围，将会使用默认值 0.92
          quality:0.93
        }
      )
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

三、销毁画布

调用 graph.dispose() 方法进行画布的销毁以及资源的回收。
el元素被销毁

    // 销毁画布
    graphDispose() {
      this.graph.dispose()
    }
1
2
3
4