代码之家 › 专栏 › 技术社区 › Yeray

调整画布大小以适合网格中的父Boostrap单元格

bootstrap-4 html5-canvas javascript

Yeray · 技术社区 · 6 年前

我正在设计一个使用boostrap网格的仪表板有些细胞有 canvas 在它里面,我想强制它匹配它的父级大小。我基本上是这样计算尺寸的:

var parent = canvas.parentElement;
if (parent.style) {
  var parentStyle = window.getComputedStyle(parent, null);

  var w = parseFloat(parentStyle.width) - (parseFloat(parentStyle.paddingLeft) + parseFloat(parentStyle.paddingRight) + parseFloat(parentStyle.borderLeftWidth) + parseFloat(parentStyle.borderRightWidth));
  var h = parseFloat(parentStyle.height) - (parseFloat(parentStyle.paddingTop) + parseFloat(parentStyle.paddingBottom) + parseFloat(parentStyle.borderTopWidth) + parseFloat(parentStyle.borderBottomWidth));

  canvas.width = w;
  canvas.height = h;
}

但是,当我调整页面、画布或单元格的大小时,它们的高度似乎一直在增长,我不明白为什么。

在“整页”中运行以下示例并水平调整窗口大小。你会看到细胞是如何保持高度增长的。

function resizeCanvas(canvas) {
  var parent = canvas.parentElement;
  if (parent.style) {
    var parentStyle = window.getComputedStyle(parent, null);

    var w = parseFloat(parentStyle.width) - (parseFloat(parentStyle.paddingLeft) + parseFloat(parentStyle.paddingRight) + parseFloat(parentStyle.borderLeftWidth) + parseFloat(parentStyle.borderRightWidth));
    var h = parseFloat(parentStyle.height) - (parseFloat(parentStyle.paddingTop) + parseFloat(parentStyle.paddingBottom) + parseFloat(parentStyle.borderTopWidth) + parseFloat(parentStyle.borderBottomWidth));

    canvas.width = w;
    canvas.height = h;
  }
}

function paintOnCanvas(canvas) {
  var ctx = canvas.getContext("2d");
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.font = "20px Verdana";
  ctx.fillStyle = "black";
  ctx.fillText("Paint on Canvas", 10, 50);
}

document.addEventListener("DOMContentLoaded", function(event) {
  paintOnCanvas(document.getElementById("canvas"));
});

window.addEventListener('resize', function(event) {
  resizeCanvas(document.getElementById("canvas"));
  paintOnCanvas(document.getElementById("canvas"));
});

canvas {
  background-color: #ce8483;
  width: 100%;
  height: 100%;
}

.col-sm-6 {
  border: 1px #2e6da4 solid;
  padding: 15px 15px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 col-sm-6 col-xs-12">
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
      <canvas id="canvas"></canvas>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
    </div>
  </div>
</div>

1 回复 | 直到 6 年前

TessavWalstijn solid90 6 年前

你应该使用 .offsetWidth 和 .offsetHeight 财产。
注意它们属于元素,而不是 .style.
引用自: How do I retrieve an HTML element's actual width and height?

我添加了一个最小大小的div,使画布具有最小的高度你可以看到如果你移除那个div会发生什么。

function resizeCanvas(canvas) {
  var parent = canvas.parentElement;
  
  canvas.width = parent.offsetWidth;
  canvas.height = parent.offsetHeight;
}

function paintOnCanvas(canvas) {
  var ctx = canvas.getContext("2d");
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.font = "20px Verdana";
  ctx.fillStyle = "black";
  ctx.fillText("Paint on Canvas", 10, 50);
}

document.addEventListener("DOMContentLoaded", function(event) {
  resizeCanvas(document.getElementById("canvas"));
  paintOnCanvas(document.getElementById("canvas"));
});

window.addEventListener('resize', function(event) {
  resizeCanvas(document.getElementById("canvas"));
  paintOnCanvas(document.getElementById("canvas"));
});

canvas {
  position:absolute;
  left: 0;
  top: 0;
}

.col-sm-6 {
  border: 1px #2e6da4 solid;
  padding: 15px 15px;
  height: 200px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 col-sm-6 col-xs-12">
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
      <canvas id="canvas"></canvas>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
    </div>
  </div>
</div>

编辑:
我看到一个打字错误 .col-sm-6 CSS类。
height: 200px; 没有 : .

现在不需要额外的div。