javascript - 强制 Canvas 使用 flex 列中的可用空间

Question

我有一个全尺寸页面，包含一个顶部工具栏，下面是一个包含 2 列的容器:

• 右栏
• 包含 Canvas 的左列(在此列中水平和垂直居中)，它有自己的坐标系统(通常为 4000 x 3000)，并且应保留此纵横比。该 Canvas 上有一个“+”按钮。 (在我的真实代码中，有多个用于多层的 Canvas 和多个按钮，但这里并不重要)

这里几乎可以工作，但我无法让 Canvas 占据左列中的全部可用空间。

使用我尝试过的所有方法(max-width: 100%、max-height: 100%)，当我们放大/缩小浏览器(70% 80% ... 150 %)，或者由于使用的方法阻止按钮停留在 Canvas 顶部的右上角而失败。

TL;DR:如何使该 Canvas 占据左列中的所有可用空间，保持其宽高比，保持分层按钮，而不溢出？

注意:我正在寻找CSS解决方案，JS不是用于定位，而是用于绘图。

ctx = document.querySelector("canvas").getContext("2d");
ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 1000, 1000);
ctx.fillStyle = "#00FF00"; ctx.fillRect(1000, 1000, 1000, 1000);
ctx.fillStyle = "#0000FF"; ctx.fillRect(2000, 2000, 1000, 1000);
ctx.fillStyle = "#000000"; ctx.fillRect(3000, 0, 1000, 1000);

* {
  padding: 0;
  margin: 0;
}

.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.toolbar {
  background-color: yellow;
  flex: 0 0 5em;
}

.container {
  background-color: orange;
  flex: 1 0 0;
  display: flex;
}

.left {
  background-color: magenta;
  flex: 1 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.right {
  background-color: salmon;
  flex: 0 0 10em;
}

.canvas-wrapper {
  background-color: grey;
  display: flex;
  position: relative;
}

canvas {
  height: 100px;
  background-color: white;
}

.button {
  background-color: yellow;
  position: absolute;
  top: 0;
  right: 0;
  width: 1em;
  height: 1em;
}

<div class="page">
  <div class="toolbar">
    TOOLBAR OF HEIGHT 5 EM
  </div>
  <div class="container">
    <div class="left">
      <div class="canvas-wrapper">
        <canvas width="4000" height="3000"></canvas>
        <div class="button">+</div>
      </div>
    </div>
    <div class="right">
      RIGHT OF WIDTH 10 EM
    </div>
  </div>
</div>

PS:您必须在“完整页面”中打开代码片段才能看到浏览器放大/缩小功能(CTRL + 、 CTRL - )。

Answer 1

您需要更改一些对齐方式，width s，height s，flex-grow s 并添加 HTML 包装器(即 <div class="canvas-wrapper-inner"> )。

请参阅下面的代码片段。

ctx = document.querySelector("canvas").getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 1000, 1000);
ctx.fillStyle = "#00FF00";
ctx.fillRect(1000, 1000, 1000, 1000);
ctx.fillStyle = "#0000FF";
ctx.fillRect(2000, 2000, 1000, 1000);
ctx.fillStyle = "#000000";
ctx.fillRect(3000, 0, 1000, 1000);

* {
  padding: 0;
  margin: 0;
}

.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.toolbar {
  background-color: yellow;
  flex: 0 0 5em;
}

.container {
  background-color: orange;
  flex: 1 0 0;
  display: flex;
}

.left {
  background-color: magenta;
  flex: 1 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.right {
  background-color: salmon;
  flex: 0 0 10em;
}

.canvas-wrapper {
  background-color: grey;
  display: flex;
  position: relative;
  flex-grow: 1; /* Added */
  align-self: stretch; /* Added */
  align-items: center; /* Added */
  justify-content: center; /* Added */
}

canvas {
  width: 100%; /* Added */
  flex-grow: 1; /* Added */
  object-fit: contain; /* Added */
  max-height: calc(100vh - 5em); /* Added */
}

.button {
  background-color: yellow;
  position: absolute;
  top: 0;
  right: 0;
  width: 1em;
  height: 1em;
}

/* Added */
.canvas-wrapper-inner {
  position: relative;
}

<div class="page">
  <div class="toolbar">
    TOOLBAR OF HEIGHT 5 EM
  </div>
  <div class="container">
    <div class="left">
      <div class="canvas-wrapper">
        <div class="canvas-wrapper-inner">
          <canvas width="4000" height="3000"></canvas>
          <div class="button">+</div>
        </div>
      </div>
    </div>
    <div class="right">
      RIGHT OF WIDTH 10 EM
    </div>
  </div>
</div>