调整包含画布的 div答案

【问题标题】：Resize div containing a canvas调整包含画布的 div
【发布时间】：2015-08-26 15:26:10
【问题描述】：

我有一个包含画布的 div：

<div class="canvas-wrapper">
    <canvas height="30px"></canvas>
</div>

“canvas-wrapper”类的 CSS：

.canvas-wrapper{
    width: 100%;
    overflow: hidden;
}

每当 div 的宽度发生变化时，画布宽度就会更新（Angular 指令）：

link: function(scope, element, attr){
    var canvas = element.find('canvas')[0];
    var div = element.find('div')[0];

    scope.$watch(function(){
        return div.offsetWidth;
    }, function(newVal, oldVal){
        canvas.width = newVal;
    });
}

我已经通过调整浏览器宽度对此进行了测试。当我增加窗口时它工作正常，但当我减少窗口时，div 不会调整大小。

我猜这是因为它包含画布，但我该如何解决呢？画布应该遵循 div 宽度，而不是块调整大小。

有什么想法吗？

【问题讨论】：

如何以百分比设置画布宽度？
像 width="100%" 这样在 HTML 中设置宽度不起作用，但按照 Amit 的建议添加 CSS 全宽就可以了。

标签： javascript html5-canvas

【解决方案1】：

您可以为画布元素添加 100% 的 CSS 宽度。

虽然通过 CSS 调整画布大小通常不是一个好习惯，因为它会拉伸/缩小“画布内的图像”，但如果它与画布的宽度和高度属性同步，则没有任何问题。

你可以解决这个问题：

<div class="canvas-wrapper">
    <canvas height="30px" style="width: 100%;"></canvas>
</div>

或者使用您喜欢的任何 CSS 选择方法。

【讨论】：

谢谢，加上 javascript 这正是我所需要的。

【解决方案2】：

你说得对： “[div 没有减少] 我猜那是因为它包含画布”

接受的答案建议使用 css width 属性，但需要注意的是画布会拉伸。这也是完全正确的；画布会伸展。

您可能希望画布拉伸，但这通常是不可取的。为了完整起见，这里是实际调整画布大小的答案。

为了获得最佳效果，您需要使用以下逻辑：

步骤

捕获您已完成的调整大小事件，然后...
隐藏画布
测量父 div 大小
重新调整画布的宽度和高度属性以匹配测量的父 div 大小
重新展示你的画布
重绘画布图形。这是一个重要的额外步骤。每当您手动调整画布大小时，现有图形都会被清除。

最后一步，重绘图形，非常重要。可以在此处找到有关如何使用正确的缩放比例重绘图形的详细说明： html5 canvas redraw on resize

演示

可以在此处找到此逻辑工作的演示： http://spencer-evans.com/share/github/canvas-resizer/

JavaScript 解决方案

在 JavaScript 中，一个解决方案是：

// Call this every time the canvas resizes
function resizeCanvas()
{
    // Grab the canvas and it's parent div
    var canvas = document.getElementById("myCanvasId");
    var parent = canvas.parentNode;

    // Hide the canvas so we can get the parent's responsive bounds
    var displayBackup = canvas.style.display;
    canvas.style.display = "none";

    // Measure parent without the canvas
    var w = parent.clientWidth;
    var h = parent.clientHeight;

    // Set the new canvas dimensions
    canvas.width = w;
    canvas.height = h;

    // Restore the canvas display property
    canvas.style.display = displayBackup;

    // IMPORTANT: Call code here to redraw canvas graphics!
}

库解决方案

这可能很麻烦，我一次又一次地遇到它。我编写了一个小型 JS / typescript 库来处理这个问题。你可以在这里找到图书馆： https://github.com/swevans/canvas-resizer

该库还具有重新调整画布大小以匹配 devicePixelRatio 不等于 1 的高分辨率显示器（即 Retina 显示器）的好处。

【讨论】：

【解决方案3】：

感谢 Spencer Evans 的回答。

我能够（在调整大小事件中）添加 1x1 像素并且它可以工作。

$(self.canvas).attr('width', 1)
$(self.canvas).attr('height', 1);
self.dimension = (self.el.width() >= self.el.height() ? self.el.height() : self.el.width());

【讨论】：