在 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 大小，而不是元素的大小