5.2.8版本热力图无法渲染

[Hideinvirus]

问题描述

@antv/g2版本^5.2.8，出现热力区域无法渲染的问题

重现链接

No response

重现步骤

vue3项目，安装最新版本g2，复制官网热力图示例，图片正常展示，热力区域无法显示

预期行为

No response

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

补充说明（可选）

No response

[8502596]

me too

[hustcc]

和 #6510 这个是相同的问题吗？

[hustcc]

https://g2.antv.antgroup.com/examples/general/heatmap/#heatmap

官网 DEMO 打开是可行的，可以提供一个 codesandbox 的在线示例，我来调试一下。

[Hideinvirus]

https://g2.antv.antgroup.com/examples/general/heatmap/#heatmap

官网 DEMO 打开是可行的，可以提供一个 codesandbox 的在线示例，我来调试一下。

https://codesandbox.io/p/sandbox/happy-snowflake-23v6tr

[Hideinvirus]

和 #6510 这个是相同的问题吗？
是同一个问题

[8502596]

似乎 5.1.17 可以 5.1.18 就不行了 5.1.18 升级成 @antv/g ^6.0.0 版本 升级的东西很多 新手表示根本不知道问题所在

[8502596]

最新测试 定位到如下 组件

g2 5.1.18 版本不行

组件下 @antv/g-canvas 2.0.17 版本不行 2.0.16 版本可以

组件下 @antv/g-plugin-canvas-renderer 2.1.1 版本不行 2.1.0 版本可以

@antv/g-plugin-canvas-renderer 2.1.1 依赖 与 2.1.0 依赖有几处不同

降级不起作用

同时 @antv/g-plugin-canvas-renderer 2.1.0 升级为

报错如下

目前定位到 @antv/g-plugin-canvas-renderer 2.1.0 升级到 2.1.1 的代码 调用

"@antv/g-lite": "2.1.1" 时有问题 同时 依赖多添加了 "@babel/runtime": "^7.25.6", 可能也能找到相关的调用

才开始接触vue 和 antv 以前对前端一窍不通，完全是抛砖引玉

[8502596]

最新进展 大佬们都不吱声 只能自己研究着玩

初步判断 @antv/g-plugin-canvas-renderer 2.1.1 升级的代码 导致 渲染不了

升级的问题如下 @antv/g-canvas 只有 依赖升级

@antv/g-plugin-canvas-renderer 关键代码升级

@antv/g-plugin-image-loader 关键代码升级

新添加的代码 有很大问题 vue3 调试过程中 发现 根本不会 走以下代码 也就是 createImage

修改此处代码 或屏蔽此处代码 调试运行后出现 一些问题 修改代码如下

前端报错如下

至此 问题还没有完整解决

[8502596]

最新进展 大佬们都不吱声 只能自己研究着玩

初步判断 @antv/g-plugin-canvas-renderer 2.1.1 升级的代码 导致 渲染不了

升级的问题如下 @antv/g-canvas 只有 依赖升级

@antv/g-plugin-canvas-renderer 关键代码升级

@antv/g-plugin-image-loader 关键代码升级

新添加的代码 有很大问题 vue3 调试过程中 发现 根本不会 走以下代码 也就是 createImage

修改此处代码 或屏蔽此处代码 调试运行后出现 一些问题 修改代码如下

前端报错如下

至此 问题还没有完整解决

经测试 @antv/g-plugin-image-loader 处代码 不需要改 修改 @antv/g-plugin-canvas-renderer
packages/g-plugin-canvas-renderer/src/shapes/styles/Image.ts 代码即可 对比发现 2.1.0 升级 2.1.1 时 代码 判断
image 为 空后 直接返回 而 2.1.0 image 为空 后 赋值 为 src

修改 Images.ts 代码如下

测试后发现 前端正常 渲染 并显示

[8502596]

@Hideinvirus @xiaoiver @hustcc 帮忙看一下 是不是 这个问题

@antv/g-plugin-canvas-renderer
packages/g-plugin-canvas-renderer/src/shapes/styles/Image.ts 代码 对比发现 2.1.0 升级 2.1.1 时 代码 判断
image 为 空后 直接返回 而 2.1.0 image 为空 后 赋值 为 src

修改 Images.ts 代码如下

测试后发现 前端正常 渲染 并显示

之前代码 显示

官网 案例 链接 https://g2.antv.antgroup.com/examples#general-heatmap
所有热力图 在vue3 框架下 都无法正常显示

原因 似乎是 传入的 src 为 canvas 标签 经处理后 变成了 undefined 然后 退出了 而 2.1.0 似乎是
如果缓存 中不存在 则 将 image 直接赋值为 src 那么按照 2.1.1 升级的 标注说是 优化了 大数据的 情况
optimize large image rendering performance 来看 同时 @antv/g-plugin-canvas-renderer Image.ts git
变更 似乎是 想将 src 是 canvas 标签的情况 放到 @antv/g-plugin-image-loader ImagePool.ts 中判断
并缓存起来 所以 之前的判断 @antv/g-plugin-image-loader ImagePool.ts 代码有问题 似乎也是对的

[8502596]

似乎 可以 终章了 如 不修改 @antv/g-plugin-canvas-renderer 2.1.1 Image.ts 代码 修改
@antv/g-plugin-image-loader 2.0.12 ImagePool.ts 代码 如下 也可得到 正确的渲染效果

原因似乎是 因为 百度得知 canvas 标签没有 src 和 alt 属性 通过控制台打印 src 得到 那么

请大佬们 稍微关注一下 好像试过 用vue2 能正常显示 怀疑此处代码

@antv/g-plugin-image-loader 2.1.11 ImagePool.ts 在此处代码 与 2.0.12 版本代码一致

请各位大佬百忙之中 抽出一点时间来看一下吧

[8502596]

终章之 风云再起
@antv/g-plugin-image-loader 2.0.12 ImagePool.ts 代码 如下 也可得到 正确的渲染效果

但其中的问题在于 imageSource 为空的 情况下 赋值为 "canvas" 字符串 但如果缓存 进去 如果有几个 热力图等

canvas 标签元素 那边 他的key 应该是一样的

所以 修改如下 通过绑定 canvas 缓存 key + 容器ID

我通过 webstorm 代码提示 得到了 此代码 但是 还是提示 id 没有这个属性 但是前端是正常显示的

当然 前端 g2 调用 需要添加 当然不添加id 也不行的 但总感觉代码怪怪的

望大佬百忙之中 给指明 怎么修改

[hustcc]

@8502596 已经分析到这个地步了， 直接来一个 PR 吧。我看你也在 G 提了 issue：antvis/G#1864

[8502596]

@hustcc 真不会提 😟 真的抱歉，对前端一窍不通 都不知道自己写的对不对 只是瞎写的。

[wang1212]

@hustcc 真不会提 😟 真的抱歉，对前端一窍不通 都不知道自己写的对不对 只是瞎写的。

厉害啊，问题的原因你这边已经分析出来了，是因为底层升级时未考虑到 Image 元素的 src 属性可以直接传递 canvas 元素实例导致的，这两天会修复掉。

---

G2 中的关键代码：

export const Heatmap: SC<HeatmapOptions> = (options, context) => {
   // ...
  return (points: number[][], value, defaults) => {
    return select(document.createElement('image', {}))
      .call(applyStyle, defaults)
      .style('x', 0)
      .style('y', 0)
      .style('width', width)
      .style('height', height)
      .style('src', ctx.canvas)
      .style('transform', transform)
      .call(applyStyle, style)
      .node();
  }
}

其中，通过 document.createElement('image', {}) 创建了 image 元素，并通过 .style('src', ctx.canvas) 将 canvas 实例赋值给了 src 属性。

[hustcc]

是不是这里改成传入 dataUrl 就可以了？如果可以的话，直接 G2 改掉也合理，G 层不做适配。

[wang1212]

是不是这里改成传入 dataUrl 就可以了？如果可以的话，直接 G2 改掉也合理，G 层不做适配。

可以的，这样可能更符合规范标准，合理一些