在窗口调整大小时动态调整画布大小

如何解决在窗口调整大小时动态调整画布大小

当用户调整浏览器窗口大小时，我试图调整画布图表的大小。直接更改它的问题，或者我发现......是图像在调整大小期间消失。以下是一些屏幕截图，可帮助您了解我的问题。

这是调整大小前的图表。

这是调整大小时的图表。 （不针对 DOM 元素）

• 我发现图表在右侧溢出。

正在调整图表大小并针对画布宽度。

• 如您所见，图表消失了。

    let canvas = document.getElementById('canvas');
    this.canvas.width = ${
      event.target.innerWidth - (window.innerWidth / 100) * 2
    };

请让我知道动态调整画布图表大小的选项。谢谢！

附言我正在为这个特定项目使用 AngularJs。

12/30/2020 更新

发现图表消失的明显原因是画布基于源自设置的高度/宽度的坐标。因此，解决方案是在调整画布大小时重新映射笔触/填充。

新挑战：

• 使用 clearRect (0,width,height) 不会清除画布。重新映射会导致图表在彼此之上的无限映射。如下图所示。

解决方法

这是我获得百万美元报酬的解决方案吗？不，但是...

经过几个小时的思考，为什么创作者从来没有为调整画布大小制定一个简单的解决方案，我终于找到了一个可以调整图表大小的选项。请注意，如果您按比例放大，它可能会变得像素化。但是这个选项会起作用。

而不是使用内联属性定义高度和宽度：

<canvas id="canvas" height="200" width="600" (window:resize)="onResize($event)"> </canvas>

您应该使用 css 将高度和宽度设为 100%。这基本上将画布变成了图像。这就是为什么当你放大时它会像素化。下一步是为嵌入画布的元素设置功能或样式。这就是解决方案出现的地方。因为您无法在不丢失图形的情况下调整画布。你要调整封装它的元素！

例如：

<div id="area-chart">
  <canvas id="canvas" (window:resize)="onResize($event)"> </canvas>
</div>

您可以动态调整#area-chart 的高度和宽度。我个人建议使用视口宽度来定义高度，因为它在缩放方面最灵活，并且图形像素化远小于使用其他度量（%、px、pt 等）。当然，您的需求可能与我的不同，但这里有一些示例样式。

示例 scss：

#area-chart {
  #canvas {
    width: 100%;
    height: 10vw;
  }
}

加载图表：

图表缩小：

图表放大：

** 注意截图中的像素尺寸是整个窗口的尺寸而不是元素的尺寸