画布元素溢出其容器 div

Posted 2023-03-25

【中文标题】画布元素溢出其容器 div

【英文标题】：Canvas element spilling out past its container div

【发布时间】：2021-12-18 07:35:32

【问题描述】：

我正在尝试使用 javascript 而不是 CSS 使画布元素适合其容器 div，因为这样它不会拉伸画布内绘制的任何内容。

目前，如果我刷新页面，有时画布元素完全适合其中。其他时候，当我刷新时，它的宽度大于容器，它的高度小于容器。我不知道为什么在刷新页面时会出现这种不同的行为，即使没有调整窗口大小。

这是我设置画布大小的方法：

const ctxX = canvasParent.offsetWidth - 4;
const ctxY = canvasParent.offsetHeight - 4;
canvasEl.width = ctxX;
canvasEl.height = ctxY;
const ctx = canvasEl.getContext("2d");

我读到这样的设置大小只有在容器相对定位时才有效，所以这是容器的 CSS：

display: block;
position: relative;
height: 60%;
margin-top: 2%;
border: 2px solid v.$border;

【问题讨论】：

我不确定这是否与您的问题有关，但如果您使用百分比来表示身高等问题，您会非常头疼，而且您将要处理非常奇怪的事情，所有时间。 display: flex 是你的朋友。

谢谢，这似乎是一个值得考虑的好建议，但弯曲不会导致每个孩子的身高相同吗？我希望这个比它上面的容器有更大的高度

@Matriarx 使用 w3schools 会更让人头疼，请不要链接到它们 (meta.***.com/questions/280478/why-not-w3schools-com)

请创建一个minimal reproducible example，以便我们查看所有相关代码。

【参考方案1】：

根本原因是offsetHeight 和offsetWidth 值是四舍五入的，并且为它们设置画布尺寸通常会导致不精确的拟合，导致宽度或高度不足或溢出。由于布局引擎执行的计算，我不排除其他原因，但这个原因是至关重要的。

一种解决方案是使用element.getBoundingClientRect 精确获取父元素 (div) 的尺寸，取低于高度和宽度值的整数，并使用它们设置 both 的尺寸画布及其父元素。这可能会导致 div 元素最多 1px 小于转换为 CSS 像素宽度和高度的百分比值，但这是不可避免的，因为画布尺寸属性采用整数值。

这里有一个示例演示了这种带有警告的特定技术：由于调整大小而改变画布尺寸会破坏现有的画布内容，并且调整大小处理程序需要删除画布父级上的宽度和高度的 style 设置，以找出调整大小的尺寸将是。

注意：相对定位不是必需的，也不包括在下面。

"use strict";
let rect = canvasParent.getBoundingClientRect();
const ctxX = Math.floor(rect.width -4);
const ctxY = Math.floor(rect.height -4);
canvasEl.width = ctxX;
canvasEl.height = ctxY;
canvasParent.style.width = ctxX + 'px';
canvasParent.style.height = ctxY + 'px';
const ctx = canvasEl.getContext("2d");

#canvasParent 
    height: 60%;
    margin-top: 2%;
    border: 2px solid orange;
    box-sizing: content-box;

canvas 
  background-color: forestgreen;



/* to see margins: */
body    background-color: grey; 
.outer  height: 80vh; background-color: #ddd; 

<div class="outer"> <!-- outer div -->
   <div id="canvasParent"><canvas id="canvasEl"></canvas></div>
</div>

更新

在代码 sn-p 中，画布容器的外部容器需要有一个固有高度，以便计算 height 值的百分比 #canvasParent。

百分比 vertical margin 值在 CSS 中很奇怪，因为它们指的是其包含块的 horizo​​ntal 宽度百分比（参考 MDN 和 this question）。更糟糕的是，如果容器内的子元素具有以百分比为单位的上边距，并且在其容器块中的内容之前不，则遇到子元素时生成的容器宽度为取为零 - 导致孩子没有上边距。

这就是为什么运行 sn-p 不会显示应用于#containerEl 的任何上边距。如果您在.outer 的开头放置一些文本，#containerEl 会突然获得相对于插入文本的上边距（未在 sn-p 中显示）。

我的结论：虽然这可能不会影响您的项目，但不要在没有充分理由的情况下使用百分比单位作为垂直边距 :-)