本文主要是介绍AntV G6自定义节点（多边形+图片），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
要求：拓扑节点根据不同的设备类型显示不同的图标，且根据设备状态显示不同的背景色，鼠标点击选中节点还可高亮
效果图
-
不同设备不同图标，不同状态不同背景色
-
鼠标点击选中节点高亮
代码
// 默认节点背景色
const defaultNodeBgColor = '#169BFA'G6.registerNode('cust-node',{draw (cfg, group) {// bgColor自定义的节点背景色 icon自定义的节点图标const { bgColor, icon } = cfg// 外层包裹元素const shape = group.addShape('polygon', {attrs: {points: [[16, 0],[32, 9],[32, 26],[16, 35],[0, 26],[0, 9]],},name: 'node-wrapper'})// 背景色元素group.addShape('polygon', {attrs: {points: [[16, 2],[30, 10],[30, 25],[16, 33],[2, 25],[2, 10]],fill: bgColor || defaultNodeBgColor, // 填充背景色},name: 'node-bg'})// 除主体部分白色外背景色透明的图标group.addShape('image', {attrs: {x: 8,y: 9,width: 16,height: 16,img: icon, // 设置图标},name: 'node-icon'})// 非高亮节点的蒙层group.addShape('polygon', {attrs: {points: [[16, 0],[32, 9],[32, 26],[16, 35],[0, 26],[0, 9]],},name: 'node-mask'})return shape},update (cfg, node) {// 节点更新触发 isNodeActive是否选中const { bgColor, isNodeActive } = cfgconst group = node.getContainer() // 获取容器// 背景色元素填充色修改const bgShape = group.get('children')[1] // 获取形状bgShape.attr({ fill: bgColor || defaultNodeBgColor }) // 修改形状的属性// 蒙层元素填充色修改：高亮节点蒙层不填充，非高亮节点蒙层填充透明白色const maskShape = group.get('children')[3] // 获取形状maskShape.attr({ fill: isNodeActive ? '' : 'rgba(255, 255, 255, 0.8)' }) // 修改形状的属性}},'single-node'
)这篇关于AntV G6自定义节点（多边形+图片）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
