antv/g6全屏【canvas】记录

已于 2023-01-11 17:32:30 修改
阅读量1.6k 收藏 2
点赞数 1
分类专栏： js 大前端 Vue 文章标签： 前端 html javascript
于 2022-11-22 10:31:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46037781/article/details/127977705
版权

思路

  • 使用之前做的全屏工具将元素全屏
  • 具体大小，我们采用分辨率宽高，即100%时的屏幕大小

网页可见区域宽：document.body.clientWidth

网页可见区域高：document.body.clientHeight

网页可见区域宽：document.body.offsetWidth (包括边线和滚动条的宽)

网页可见区域高：document.body.offsetHeight(包括边线的宽)

网页正文全文宽：document.body.scrollWidth

网页正文全文高：document.body.scrollHeight

网页被卷去的高：document.body.scrol

最低0.47元/天 解锁文章
Program W
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vuex和antv/g6实现在线绘制分析流程图功能演示Demo
09-07
基于vue框架实现流程图绘制在项目中实际是一个复杂的应用，但是因为有很多算法都是和项目中业务相关不一定符合其他小伙伴的实际应用情况并且项目存在保密机制不方便全部分享出来，所以本Demo中仅抽取最基础的部分...
vue3项目使用@antv/g6实现可视化流程功能
最新发布
幽冥雪羽的博客
06-25 1453
G6实现可视化工作流
JS获取浏览器信息及屏幕分辨率
weixin_30846599的博客
08-19 189
网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线和滚动条的宽) 网页可见区域高：document.body.offsetHeight(包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页...
Antv G6超详细笔记及使用案例分享
m0_73884922的博客
06-22 2277
G6 是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。
之前的项目前端技术说明
三包酸奶！的博客
05-09 249
右侧异常次数的表格内嵌套图表的实现与应用列表相同。特殊功能点：点击新增一行后新增一行Tag键和Tag值的下拉输入框，实现思路是定义一个数组，通过控制数组的长度V-for实现页面上Tag键和Tag值下拉框的展示，Tag键和Tag值的select组件要定义mode="combobox"才能实现可搜索输入。时间轴实现的思路：定义时间轴的总长为420px，根据当前行的耗时与总耗时的耗时比 得到当前行时间轴的长短，控制时间轴的长度，再定义一个数据记录表格内每一行的时间轴为背景蓝色还是一个绿色竖条。
JS中获取cookie的最简单方式
qq_57558631的博客
05-23 1万+
const getCookie = (name) => document.cookie.match(`[;\s+]?${name}=([^;]*)`)?.pop(); // 比如cookie如下： a=b; c=d // 使用 getCookie('c') // d 其中match是字符串的原型方法。 str.match(regexp) 如果传入一个非正则表达式对象，则会隐式地使用 new RegExp(obj) 将其转换为一个 RegExp 以上，所以完全不必写一个正则，因为正则拼字符串.
AntV G6鼠标移入、单击、双击节点，获取节点信息
热门推荐
笑到世界都狼狈的博客
12-24 1万+
如下图所示，对节点常用的事件如下图所示： 主要代码： // 鼠标进入节点 this.graph.on('node:mouseenter', (e) => { const nodeItem = e.item // 获取鼠标进入的节点元素对象 console.log('鼠标移入', nodeItem._cfg) }) // 单击节点 this.graph.on('node:click', (e) => { const nodeItem = e.item // 获取被
AntV-G6：图表自动居中显示/画布自适应/fitView
smm的博客
12-15 8641
AntV-G6：图表自动居中显示/画布自适应/fitView，主要记录了一些使用中的踩坑经验~
antv-g6.chm
07-25
angular antv-g6官网的帮助文档本地缓存做成的离线文档，可以在不联网的状态下查看帮助手册，方便内网的同事们做参考手册，基于g6-3.x版本
antv/x6封装vue2.0源码
05-13
本文将深入探讨“antv/x6 封装 vue2.0 源码”中的关键知识点，助你理解和掌握如何利用这些技术实现增删改连线、拖拽生成功能、撤销保存、放大缩小等高级功能。 1. **AntV X6 图形引擎：** AntV X6 是基于 SVG 和 ...
vue中使用antv/x6编写自定义流程
04-14
在vue中使用antv/x6和element组件，实现自定义流程的编写，使用antv/x6实现画布绘制和流程绘制，通过拖动节点到画布的方式进行节点的添加，使用element组件实现鼠标移入节点后的自定义功能，使用antv/x6自带的api和...
Vue3.x+AntV G6+Element Plus
12-04
一个开箱即用的基于Vue3使用AntV G6绘制图谱的项目，项目中包含两个demo，其一：图谱可以实现自适应窗口大小；其二：图谱自适应DOM元素大小。帮助你更好的理解并在Vue3.x中使用AntV G6库，有助于初学者快速上手
vue antvG6 多功能tree图 树图树结构
qq_20111965的博客
03-21 6640
vue-antvg6 多功能tree图制作
vue项目实现页面全屏的效果
张张张的博客
12-05 428
2.使用document.fullscreenElement（）来判断是都全屏。
G6 总结
LiChengzhong的博客
01-14 5096
我学习G6看的几篇文章： 1、G6入门 2、关于antV G6中的on事件、util.each事件及update方法等的使用总结 3、tooltip 节点提示框 1、拖拽、缩放——内置的交互行为 在 G6 中使用内置 Behavior 的方式非常简单，只需要在图实例化时配置 modes。拖拽和缩放属于 G6 内置交互行为，修改代码如下： const graph = new G6.Graph({ // ... // 其他配置
vue2+antv-x6+画布背景图
Moca_H的博客
01-16 1352
antv-x6+vue2；backgound-image 中的坑
Canvas 鼠标事件 无效——没有定义背景颜色，即是透明色，无法触发MouseLeftButtonDown事件
mosquitofree的专栏
06-13 1654
<br />Canvas 鼠标事件 无效<br />——没有定义背景颜色，即是透明色，无法触发MouseLeftButtonDown事件<br /> 
Antv G6 图例 实现点击‘指定节点’对应节点放大缩小动画
m0_51892786的博客
03-29 2649
因公司需求要实现当点击满足条件节点使相对应节点放大缩小自己比较菜搞了很久才搞出来 顺便记录一下
antv/g6 初始化一个项目
05-24
要初始化一个 antv/g6 的项目，可以按照以下步骤进行： 1. 确认已经安装好了 Node.js 和 npm。 2. 在命令行中输入以下命令来全局安装 G6 的脚手架工具： ``` npm install -g @antv/g6-cli ``` 3. 在命令行中进入你想要初始化 G6 项目的目录，然后输入以下命令： ``` g6 init ``` 4. 根据提示输入项目名称、描述等信息，然后等待脚手架工具自动下载并安装所需的依赖项。 5. 初始化完成后，进入项目目录并输入以下命令启动项目： ``` npm run dev ``` 6. 打开浏览器，在地址栏输入 `localhost:8080`，即可看到 G6 的示例页面。 希望以上步骤能够帮助你成功初始化一个 antv/g6 项目！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值