最近在做数据可视化编辑功能,学习记录
(一)自定义图片节点
import { Graph, Dom, Node } from '@antv/x6'
export const FlowChartImageRect1 = Graph.registerNode('flow-chart-image-rect1', {
inherit: 'rect',
width:60,
height: 60,
attrs: {
image: {
//远程图片
// 'xlink:href':
// 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
'xlink:href': require('../../../assets/local.png'),//本地图片
width: 66,
height: 66,
x: 12,
y: 12,
},
title: {
text: '服务器',
refX: 25,
refY: 83,
fill: 'rgba(0,0,0,0.85)',
fontSize: 12,
'text-anchor': 'start',
},
},
})
使用
const c5=graph.createNode({shape:'flow-chart-image-rect1'})
设置为可拖拽
this.stencil = new Addon.Stencil({
target: this.graph,
stencilGraphWidth: 280,
search: {rect: true},
collapsable: true,
groups: [
{
name: 'combination',
title: '组合节点',
layoutOptions: {
columns: 1,
marginX: 60,
},
graphHeight: 560,
},
],
})
const stencilContainer = document.querySelector('#stencil')
stencilContainer?.appendChild(this.stencil.container)
加入到可拖拽控件内
this.stencil.load([c5], 'combination')