在 window 上动态调整 canvas 的大小

Question

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

这是调整大小之前的图表。

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

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

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

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

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

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

PS 我在这个特定的项目中使用 AngularJs。

2020 年 12 月 30 日更新

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

新的挑战：

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

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 等）。 当然，您的需求可能与我的不同，但这里有一些示例样式。

示例scss：

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

负载图表：

图表按比例缩小：

放大图：

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