Antv X6系列 (二) 自定义节点

最近在做数据可视化编辑功能，学习记录 （一）自定义图片节点

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)