根据内容动态调整画布大小
我有画布,我可以在其中绘制内容。内容的宽度是恒定的,但高度会发生变化。这是一个列表 - 一个地图传说。问题是我不知道我会事先得到多少物品,既不是他们的大小。根据内容动态调整画布大小
如果我将高度设置为例如。 800对于更长的列表来说很好,但对于只有少数几个元素的列表来说,它太高了,并且很多空白仍留在底部,再加上不必要的滚动(它被放置在div
和overflow: auto
之间,所以我可以在更长的图例出现)。
但是我知道最后一个像素Y位置之后我画出了每一个元素。是否有可能以某种方式修剪剩余空间或强制调整画布大小?
编辑:代码
<div class="legend">
some stuff here
<div id="canvas">
<canvas id="cv"></canvas>
</div>
</div>
#canvas {
width: 100%;
max-height: 100%;
}
我设置使用#canvas
高度:
document.getElementById('canvas').style.height = finalSize
了解总高度之后。
如果您已经将画布放在div中进行溢出,您可以根据列表长度调整div高度。这会更容易(并且资源更便宜)来遮盖不需要的部分,而不是重新绘制画布。根据您的使用情况,画布甚至可能完全没有必要(只是预先说明几个关键方面(即使用图像)可能会更有效),但我不能在没有附加细节的情况下再说一次。
调整画布的大小并不能清除所有内容。
作为一种解决方法,我可以建议创建第二个画布以在调整大小时保留主画面的内容。
const mainCanvas = ...;
const mainCtx = mainCanvas.getContext('2d');
const hiddenCanvas = document.createElement('canvas');
const hiddenCtx = hiddenCanvas.getContext('2d');
function render() {
// render the list and keep last Y position
// copy content of main canvas to the 2nd one
hiddenCanvas.width = mainCanvas.width;
hiddenCanvas.height = mainCanvas.height;
hiddenCtx.drawImage(mainCanvas, 0, 0);
// resize main canvas and restore its content
mainCanvas.height = lastYPosition;
mainCtx.drawImage(hiddenCanvas, 0, 0);
}
编辑:
正如在评论中指出:你甚至可以直接呈现在列表中第二画布。
const mainCanvas = ...;
const mainCtx = mainCanvas.getContext('2d');
const hiddenCanvas = document.createElement('canvas');
const hiddenCtx = hiddenCanvas.getContext('2d');
function render() {
// render the list on hidden canvas
// and keep last Y position
// resize and copy
mainCanvas.width = hiddenCanvas.width;
mainCanvas.height = lastYPosition;
mainCtx.drawImage(hiddenCanvas, 0, 0);
}
谢谢你的想法 - 我试过了,但发现“CSS方法”更快地工作。我认为另一个也更有效率(不绘制两次)。但是,在某些情况下,它肯定会找到它的用法。谢谢! – adamczi
调整画布大小将清除其内容首先在临时画布上绘制项目,调整可见画布的大小然后在可见画布上绘制临时画布的内容。 – Andreas