在resize事件处理程序上响应heatmap.js

首先,我使用的是ReactJS和heatmap.js库 .

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

但是,heatmap.js库对象创建的画布占用了div的初始尺寸,因此它的大小保持不变 .

How could I make the children canvas responsive too?

heatmap.js config JSON如下:

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

变量 this.image 是对 HTMLDivElement 的引用,它动态地给出了width和height属性 .

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

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

回答(1)

2 years ago

一种解决方案是将画布设置为100%高度和宽度,但包含在响应 <div> 内 .