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'}}
});