[英]Scale canvas width and height to be as large as possible but maintain aspect ratio (JS)
If I have a canvas element that is a certain width and height, eg 如果我有一个具有一定宽度和高度的画布元素,例如
<canvas id="display" width="900" height="650" tabindex=0></canvas>
and I want to scale up the width and height of the canvas to as large as possible while being contained within the viewport without changing the aspect ratio or increasing the overall area for objects to be displayed within the canvas. 并且我想在不改变纵横比或不增加要显示在画布内的对象的总面积的情况下 ,将画布的宽度和高度放大到尽可能大的程度,同时将其包含在视口中。
This means that if a window is width 2200
and height 1300
, both the display width and height of the canvas will be doubled (and no larger because otherwise the height could not be contained) and the canvas will have the new dimensions 1800
and 1300
. 这意味着,如果窗口的宽度为
2200
,高度为1300
,则画布的显示宽度和高度都将加倍(并且不能更大,因为否则无法包含高度),并且画布将具有新的尺寸1800
和1300
。
However, I am scaling up the CSS display height of the canvas element, not the canvas itself, which means that objects inside the canvas should also have their dimensions increased. 但是,我正在按比例放大canvas元素的CSS显示高度,而不是画布本身,这意味着画布内的对象的尺寸也应增加。
canvas {
width: ...
height: ...
}
It would be even better if the canvas can rescale itself when the window is resized, perhaps with an event listener. 如果在调整窗口大小时画布可以重新调整自身大小(最好使用事件侦听器)会更好。
Is there any way to do this in JS? 有没有办法在JS中做到这一点?
You have to define the aspect. 您必须定义方面。 This can be done by just defining a default size.
只需定义默认大小即可完成此操作。
const defWidth = 1920;
const defHeight = 1080;
Then you can listen to the window resize event and resize the canvas to fit. 然后,您可以收听窗口调整大小事件并调整画布的大小以适合其大小。
function resizeEventHandler(){
// get the max size that fits both width and height by finding the min scale
var canvasScale = Math.min(innerWidth / defWidth, innerHeight / defHeight);
// or for max size that fills
// canvasScale = Math.max(innerWidth / defWidth, innerHeight / defHeight);
// now set canvas size and resolution to the new scale
canvas.style.width = (canvas.width = Math.floor(defWidth * canvasScale)) + "px";
canvas.style.height = (canvas.height = Math.floor(defHeight * canvasScale)) + "px";
}
Because the canvas resolution must be an integer the aspect may be out by a pixel. 由于画布分辨率必须为整数,因此外观可能会超出一个像素。 But there is nothing that can be done about that.
但是,对此无能为力。
Ended up finding my own solution, if there is a more elegant one available then please inform me. 最终找到了我自己的解决方案,如果有更优雅的解决方案,请通知我。
// get maximum possible size for canvas while maintining aspect ratio
function resizeEventHandler(){
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
if(w/canvas.width > h/canvas.height){
canvas.style.width = "calc("+canvas.width+" / "+canvas.height+" * 100vh)";
canvas.style.height = "calc(100vh)";
} else {
canvas.style.width = "calc(100vw)";
canvas.style.height = "calc("+canvas.height+" / "+canvas.width+" * 100vw)";
}
}
resizeEventHandler();
window.addEventListener("resize", resizeEventHandler);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.