5.2.8版本热力图无法渲染 #6512

me too

和 https://github.com/antvis/G2/issues/6510 这个是相同的问题吗？

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

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

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

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

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

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

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

最新测试 定位到如下 组件

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 以前对前端一窍不通，完全是抛砖引玉

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

初步判断 @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-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 代码如下

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

@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 代码有问题 似乎也是对的

似乎 可以 终章了 如 不修改 @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 版本代码一致

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

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

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

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

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

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

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

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

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

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

@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 属性。

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

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

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