随着窗口大小的调整动态调整画布大小

Question

我正在尝试调整画布图表大小，使其能够随用户调整浏览器窗口而改变。直接更改大小存在的问题是，画面在调整大小期间会消失。以下是一些截图，帮助您了解我的问题。 这是调整大小之前的图表： 这是调整大小期间的图表（未针对DOM元素进行处理）：

• 我已经确定图表在右侧溢出。

调整图表大小并定位到画布宽度。

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

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

请告诉我动态调整画布图表的选项。谢谢！

附言：我在这个项目中使用AngularJs。

更新12/30/2020

发现图表消失的明显原因是画布基于从固定高度/宽度开始的坐标。因此，解决方案是在画布重新调整大小时重新映射描边/填充。

新挑战：

使用clearRect（0, 0，width，height）无法清除画布。重新映射会导致图表无限叠加。如下图所示。

- Kota

---

这不应该是 this.canvas.width = \${event.target.innerWidth - (window.innerWidth / 100) * 2}px`;吗？请使用[<>]` 片段编辑器创建一个 [mcve]。 - mplungjan

宽度实际上默认为像素，所以通常我会省略它，除非我需要特定的测量单位。关于代码，由于它是公司所有的，我无法分享其背后的功能。图片是我能做到的最好的。主要问题是当动态调整图表大小时，图表本身会消失。 - Kota

Answer 1

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

经过数小时的思考，为什么创建者从未提供一个简单的解决方案来调整画布大小，我终于找到了一个可用于调整图表大小的选项。请注意，如果您进行放大，它可能会变得像素化。但是这个选项可行。

与使用内联属性定义高度和宽度不同：

<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;
  }
}

图表加载时：

图表缩小：

图表放大：

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

- Kota