在窗口调整大小上动态调整画布大小
市
当用户调整浏览器窗口的大小时，我试图调整画布图表的大小。直接更改它的问题，或者我发现...是图像在调整大小时消失了。以下是一些屏幕截图，可帮助您了解我的问题。
这是调整大小前的图表。 
这是调整大小时的图表。（不定位DOM元素）
- 我已经确定图表在右侧溢出。
调整图表大小并确定画布的宽度。
- 如您所见，该图表消失了。
let canvas = document.getElementById('canvas');
this.canvas.width = ${
event.target.innerWidth - (window.innerWidth / 100) * 2
};
请让我知道我有哪些选项可以动态调整画布图表的大小。谢谢！
PS我正在为此特定项目使用AngularJs。
更新12/30/2020
Discovered that the obvious reason for the chart disappearing is that the canvas is based on coordinates which originate from a set height/width. So the solution was re-mapping the strokes/fills as the canvas is resizing.
New challenge:
- Using clearRect (0, 0, width, height) doesn't clear the canvas. Re-mapping results in an inifite mapping of charts on top of one another. As shown in the photo below.
Kota
Is this the solution I get paid a million dollars for? No. But...
After hours of spinning around thoughts as to why the creators never made an easy solution for resizing a canvas, I've finally found an option that works for resizing the charts. Note that if you're scaling up that it can become pixelated. But this option will work.
Instead of defining the height and width with the inline properties:
<canvas id="canvas" height="200" width="600" (window:resize)="onResize($event)"> </canvas>
You should use css to make the height and width 100%. This turns the canvas into an image essentially. Which is why it pixelates when you scale up. The next step is to setup functionality or styling for the element that the canvas is embedded within. This is where the solution arises. Because you can't adjust the canvas without losing the graphic. You have to adjust the element that encapsulates it!
Ex:
<div id="area-chart">
<canvas id="canvas" (window:resize)="onResize($event)"> </canvas>
</div>
You would dynamically adjust the height and width of the #area-chart. I personally suggest using viewport width to define the height as it is the most flexible in terms of scaling and the graphic pixelates far less than using other measurements (%, px, pt, etc.). Of course your needs may be different than mine, but here's some sample styling.
Sample scss:
#area-chart {
#canvas {
width: 100%;
height: 10vw;
}
}
Chart on load:
Chart scaled down:
Chart scaled up:
**请注意，屏幕截图中的像素尺寸是整个窗口的大小，而不是元素的大小
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
动态调整pixi阶段的大小，其内容在窗口大小调整和窗口加载上
- 2
在窗口调整大小上运行Jquery
- 3
在窗口调整大小上运行代码
- 4
画布-在窗口调整大小时转换鼠标坐标
- 5
如何在窗口调整大小时重绘画布
- 6
画布粒子-在“窗口调整大小”上更新画布大小
- 7
在tkinter画布上动态调整矩形大小
- 8
jQuery动画在窗口调整大小上的大延迟
- 9
在窗口调整大小上运行jQuery脚本
- 10
使用jQuery在窗口调整大小上显示或隐藏元素
- 11
在窗口调整大小上删除并添加类
- 12
CSS页脚在窗口大小调整上的行为
- 13
angularjs-在窗口调整大小上调整div的大小
- 14
动态调整浏览器窗口填充画布的大小
- 15
在窗口中调整Google图表的大小
- 16
并排div堆栈在窗口调整大小
- 17
在窗口中调整Google图表的大小
- 18
在窗口调整大小时隐藏元素
- 19
页眉在窗口调整大小时移动
- 20
响应式jQuery画布，画布背景在窗口调整大小时消失
- 21
angularjs-在窗口调整大小上调整div
- 22
动态调整画布及其内容的大小
- 23
动态调整画布大小；保持图像的位置
- 24
设置特定大小后，在窗口调整大小事件中，Highcharts图表调整大小
- 25
设置特定大小后，在窗口调整大小事件中高图表图表调整大小
- 26
调整画布图像的大小
- 27
无法调整画布大小
- 28
如何调整画布大小
- 29
调整画布图像的大小
我来说两句