AntV G6自定义节点(多边形+图片)

这篇具有很好参考价值的文章主要介绍了AntV G6自定义节点(多边形+图片)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

要求:拓扑节点根据不同的设备类型显示不同的图标,且根据设备状态显示不同的背景色,鼠标点击选中节点还可高亮

效果图

  • 不同设备不同图标,不同状态不同背景色
    antv g6自定义节点,前端,css,前端,javascript

  • 鼠标点击选中节点高亮
    antv g6自定义节点,前端,css,前端,javascript文章来源地址https://www.toymoban.com/news/detail-702546.html

代码

// 默认节点背景色
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 } = cfg
      const 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自定义节点(多边形+图片)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • antv/g6基本使用教程

     在项目中引入 G6 有以下两种方式:npm 引入,CDN 引入。 1 在项目中使用 npm 包引入 Step 1:  使用命令行在项目目录下执行以下命令: Step 2:  在需要用的 G6 的 JS 文件中导入: 2 在 HTML 中使用 CDN 引入 注意 在  {$version}  中填写版本号,例如  3.2.0 ; 最新版为 3.2.0,可以在 

    2024年02月02日
    浏览(43)
  • antv/g6绘制数据流向图

    在业务开发中需要绘制数据流向图,由于echarts关系图的限制以及需求的特殊要求,转而使用antv/g6实现,本文以代码的方式实现数据流向需求以及节点分组,版本\\\"@antv/g6\\\": “^4.8.24”, 本文主要列出关键性的代码,并非全部代码

    2024年01月25日
    浏览(48)
  • vue3+ts使用antv/x6 + 自定义节点

    使用 2.x 版本 x6.antv 新官网: 项目结构 1、初始化画布 index.vue 2、注册节点 渲染 Vue 节点,这个文档完全够用 节点node.vue 3、在画布引入并注册自定义节点,配置节点信息 主画布:index.vue 展示 小小预告: 下一篇 自定义节点样式 再下一篇 vue3 + antv/x6 实现拖拽侧边栏节点到画布

    2024年02月12日
    浏览(40)
  • vue 复杂的流程图实现--antv/g6

    可以先看下对应的文档:G6 Demos - AntV  npm install --save @antv/g6 实现如图:  

    2024年02月08日
    浏览(48)
  • AntV G6 的坑之——从卡掉渣到满帧需要几步

    AntV G6 是一款图可视化与分析开源引擎。《AntV G6 的坑之——XXX》系列文章持续更新中,总结常见问题及神坑解决方案。任何问题可在 GitHub Issue 中提问,求 GitHub Star ⭐️https://github.com/antvis/g6 原文链接:https://g6.antv.antgroup.com/manual/faq/performance-opt 在面对复杂数据的图可视分析

    2024年02月16日
    浏览(65)
  • 使用antv/G6在vue项目中开发较复杂样式流程图

    设计师提供了一版样式较复杂的流程图,我搜了一些常用的vue-super-flow和vue-x6-flow等都只支持简单的样式。之前自己写过纯展示流程图不涉及太多交互,感觉还是找一个成熟的插件开发更适合,也方便其他同事参考,所以最后选择了用antv/G6自己个性化开发,总结了使用antv/G6在

    2023年04月09日
    浏览(108)
  • 如何判断两个多边形是否相交?——多边形相交判定算法详解

    如何判断两个多边形是否相交?——多边形相交判定算法详解 在计算机图形学中,判断两个多边形是否相交是一项很重要的任务。这涉及到各种应用场景,如碰撞检测、模拟物理效果等。在本篇文章中,我们将会介绍多边形相交判定算法的相关知识和实现方式。 首先,我们

    2024年02月14日
    浏览(62)
  • opencv 之 外接多边形(矩形、圆、三角形、椭圆、多边形)使用详解

    本文主要讲述opencv中的外接多边形的使用: 多边形近似 外接矩形、最小外接矩形 最小外接圆 外接三角形 椭圆拟合 凸包 将重点讲述最小外接矩形的使用 给一个opencv官方的例程: 过程图像如下: 椭圆拟合一般用于轮廓提取之后: 凸包绘制 计算两个旋转矩形交集: C++版的最

    2024年02月09日
    浏览(87)
  • 3DS MAX三维建模平面基础与初级多边形(可编辑多边形的讲解)

            3DS MAX三维建模平面基础与初级多边形(可编辑多边形的讲解)         欢迎大家来学习3DS MAX教程,在这里先说一下研究好3ds Max一定要一边看教程一边要自己学的操作才能更快的进步,预祝大家学习顺利。         这篇是第四篇关于3ds Max的文章了,基于上一

    2024年04月12日
    浏览(72)
  • 基于C++ 的OpenCV绘制多边形,多边形多条边用不用的颜色绘制

    使用基于C++的OpenCV库来绘制多边形,并且为多边形的不同边使用不同的颜色,可以按照以下步骤进行操作: 首先,确保你已经安装了OpenCV库并配置好了你的开发环境。 导入必要的头文件: 创建一个空白的图像,然后绘制多边形,并为每条边选择不同的颜色: 在这个示例中,

    2024年02月13日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包