antv3 x6 基本语法-流程图-图片拖拽（三）

示例：

 

注册图片节点

Graph.registerNode(
        "custom-image",
        {
          inherit:'image',
          width: 200,
          height:200,
          ports: { ...this.ports },
          markup:[
            {
              tagName: "image",
              selector: "img",
            },
          ],
          // https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png
          attrs:{
            img: {
              "href": "",
              // width: 16,
              // height: 16,
              
            },
          }
        },
        true
      )

 

 

使用节点

 const imgNode = this.graph.createNode({
        shape: 'custom-image',
        width:150, // 覆盖原有的 width
        height:150, // 覆盖原有的 height
        attrs:{
          img:{
            // "href":require(item.image), 不对
            "href": item.image,
          }
        }
      })

 

require() 仅用于：

 

• 加载本地图片：require('@/assets/images/xxx.png')（Vue/React 项目）
• 加载 npm 包：require('lodash')
   
  远程图片直接用字符串即可   href: http://image.xxxx.png

 

dnd 画布渲染

  this.dnd.start(node_type, e);

 

 

 

图片添加文字描述

 

注册节点

 

Graph.registerNode(
        "custom-image",
        {
          inherit:'image',
          width: 200,
          height:200,
          ports: { ...this.ports },
          markup:[
            {
              tagName: "image",
              selector: "img",
            },
            {
              tagName: 'text',
              selector: 'label'
            }
          ],
          // https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png
          attrs:{
            img: {
              "href": "",
              // width: 16,
              // height: 16,
            },
            label: {
              fontSize: 14,
              fill: '#333',
              textAnchor: 'middle', // 水平居中
              dominantBaseline: 'middle', // 垂直居中
              x: 0, // 文字x坐标（节点宽度的一半，居中）
              y: 0, // 文字y坐标（图片下方：200 + 20）
              text: '' // 文字内容占位
            }
          }
        },
        true
      )

 

使用节点

 const imgNode = this.graph.createNode({
        shape: 'custom-image',
        width:150, // 覆盖原有的 width
        height:150, // 覆盖原有的 height
        attrs:{
          img:{
            // "href":require(item.image), 不对
            "href": item.image,
          },
         // ****************
         label: {
          text: item.name, // 自定义文字内容
          fill: '#666', // 可选：修改文字颜色
          x: 0, // 文x坐标轴位置
          y: 75, // y位置
        }
        }
      })

 

一个边动态添加多个桩， loading.....