在窗口调整大小时动态调整画布大小
提问于 2020-12-29 23:22:07
当用户调整浏览器窗口大小时，我试图调整画布图的大小。直接改变它的问题，或者说，我有found...is，图像在调整大小时消失了。这里有一些截图来帮助你理解我的问题。
这是调整大小之前的图表.
--这是调整大小的图表。(不针对DOM元素)
，
- ，我已经识别了右手边溢出的图表。
图表正在调整大小并瞄准画布宽度.
- 如你所见，图表消失了。
let canvas = document.getElementById('canvas');
this.canvas.width = ${
event.target.innerWidth - (window.innerWidth / 100) * 2
};
请让我知道什么选项，我有动态调整画布图表。谢谢!
P.S.我用AngularJ来做这个项目。
更新12/30/2020
发现该图表消失的明显原因是，帆布是基于来自设定的高度/宽度的坐标。因此，当画布正在调整大小时，解决方案是重新映射笔画/填充。
新挑战：
- 使用clearRect (0、0、宽度、高度)不能清除画布。重新映射的结果是相互之间的海图相互之间的inifite映射。如下图所示.
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-12-30 20:01:28
这就是我得到一百万美元的解决方案吗？不是的。但是..。
经过数小时的反复思考，为什么创建者从来没有为调整画布的大小找到一个简单的解决方案，我终于找到了一个可以调整图表大小的选项。请注意，如果您正在放大，它可能会变得像素化。但是这个选项将运行。
而不是使用内联属性定义高度和宽度：
<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>您将动态调整#区域图的高度和宽度。我个人建议使用视口宽度来定义高度，因为它在缩放方面是最灵活的，图形像素比使用其他度量(%、px、pt等)要小得多。当然，您的需求可能与我的不同，但是这里有一些示例样式。
样本scss：
#area-chart {
#canvas {
width: 100%;
height: 10vw;
}
}载重图表：
缩小的图表：
放大图表：
**注意，屏幕截图中的像素尺寸是完整的窗口大小，而不是元素的大小。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65503423
复制
腾讯云开发者
