在 window 调整大小时动态调整 canvas 大小

Question

我正在尝试在用户调整浏览器 window 大小时调整 canvas 图表的大小。直接更改它的问题，或者我发现...是图像在调整大小时消失了。这里有一些屏幕截图可以帮助您理解我的问题。

这是调整大小前的图表。

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

正在调整图表大小并以 canvas 宽度为目标。

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

请告诉我动态调整 canvas 图表大小的选项。谢谢！

P.S。我正在为这个特定项目使用 AngularJs。

2020 年 12 月 30 日更新

发现图表消失的明显原因是 canvas 基于源自集合 height/width 的坐标。因此解决方案是在 canvas 调整大小时重新映射 strokes/fills。

新挑战：

Answer 1

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

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

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

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

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

例如：

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

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

样本数css:

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

正在加载图表：

图表按比例缩小：

图表按比例放大：

** 请注意，屏幕截图中的像素尺寸是完整的 window 大小，而不是元素的大小

Dynamically resize canvas on window resize