javascript - 调整大小事件处理程序上的响应式 heatmap.js

Question

首先，我正在使用 ReactJS 和 heatmap.js 库。

用作 heatmap.js 入口点的 HTMLDivElement 应该是响应式的。在每次调整窗口大小时，它都会根据当前窗口大小进行调整。

但是，由 heatmap.js 库对象创建的 Canvas 采用 div 的初始尺寸，因此它的大小保持不变。

我怎样才能使 child Canvas 也具有响应性？

heatmap.js config JSON 如下:

this.heatmap = Heatmap.create({
  container: this.image
});

变量 this.image 是对动态赋予宽度和高度属性的 HTMLDivElement 的引用。

<div  style={{ width: `${width}px`, height:`${height}px`}} />

*如果您不熟悉 JSX 语法，我可以将其转换为纯 HTML/CSS/JS。

Answer 1

一种解决方案是将 Canvas 设置为 100% 的高度和宽度，但包含在响应式 <div> 中。 .