普通画布(未开启 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)
}
通过以下 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()')
}
this.graph.zoom() // 获取缩放级别
this.graph.zoom(0.2) // 在原来缩放级别上增加 0.2
this.graph.zoom(-0.2) // 在原来缩放级别上减少 0.2
常用的就是将画布内容中心与视口中心对齐,使用方式:
step1 - 引入DataUri
import { Graph, DataUri } from '@antv/x6'
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')
})
}
//SVG图片配置
this.graph.toSVG((dataUri: string) => {
// todo
}, {
preserveDimensions: {
width: 100,
height: 100,
}
})
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
}
)
}
调用 graph.dispose() 方法进行画布的销毁以及资源的回收。
el元素被销毁
// 销毁画布
graphDispose() {
this.graph.dispose()
}