調整大小事件處理程序上的自適應heatmap.js

Question

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

用作heatmap.js入口點的HTMLDivElement應該是響應式的。 每次調整窗口大小時，它都會根據當前窗口大小進行調整。

但是，heatmap.js庫對象創建的畫布采用div的初始尺寸，因此其大小保持不變。

我怎樣才能使孩子們的畫布也能響應呢？

heatmap.js 配置 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

一種解決方案是將畫布設置為高度和寬度的100％，但包含在響應式<div> 。