antv3 x6 基本语法-流程图-添加桩及属性修改（四）

示例：

 

 

注册节点：

Graph.registerNode(
        "custom-node-with-port",
        {
          inherit: "rect",
          width: 100,
          height: 40,
          attrs: {
            body: {
              stroke: "#8f8f8f",
              strokeWidth: 1,
              fill: "#fff",
              rx: 6,
              ry: 6,
            },
          },
          ports: {
            groups: {
              top: {
                position: "top",
                attrs: {
                  circle: {
                    magnet: true,
                    stroke: "#8f8f8f",
                    r: 5,
                  },
                },
              },
              bottom: {
                position: "bottom",
                attrs: {
                  circle: {
                    magnet: true,
                    stroke: "#8f8f8f",
                    r: 5,
                  },
                },
              },
            },
          },
        },
        true,
      );

 

 添加节点

this.graph.addNode({
        shape: "custom-node-with-port",
        id: "node_id",
        x: 160,
        y: 180,
        label: "world",
        ports: {
          items: [
            {
              id: "port_3",
              group: "top",
            },
            {
              id: "port_4",
              group: "top",
            },
          ],
        },
      });

 

获取当前节点

 const node = this.graph.getCellById("port1");
        console.log("node", node);
        const ports = node.getPorts();
        console.log('ports',ports)

 

添加 桩

 node.addPort({
          id:'port-test'
          group: "top",
        });

 

// 移除桩

node.removePortAt(ports.length - 1);

 

// 改变桩子属性

 

第一个是 桩子：id

node2.portProp('port_3','attrs/circle/stroke', 'red'); // 所有端口描边变红

 

 

 

const node = this.graph.getCellById('node1');

// 方式1：批量修改所有端口的 attrs（推荐）
node.portProp('attrs/circle/stroke', 'red'); // 所有端口描边变红
node.portProp('attrs/circle/strokeWidth', 3); // 所有端口描边宽度3

// 方式2：修改单个端口的 attrs（精准控制）
// 语法：node.setPortAttr(端口ID, 属性路径, 值)
node.setPortAttr('port1', 'attrs/circle/fill', '#000'); // port1 填充黑色
node.setPortAttr('port2', 'attrs/text/text', '修改后的文字'); // 改端口文字

// 方式3：一次性修改单个端口的多个 attrs
node.updatePort('port1', {
  attrs: {
    circle: {
      stroke: '#1890ff',
      fill: '#fff'
    },
    text: {
      fill: '#666'
    }
  }
});