调整大小 div 包含 canvas

Question

我有一个 div 包含 canvas:

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

CSS为"canvas-wrapper" class:

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

只要 div 的宽度发生变化，canvas 宽度就会更新（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;
    });
}

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

我想那是因为它包含 canvas，但我该如何解决这个问题？ canvas 应该遵循 div 宽度，而不是块大小调整。

有什么想法吗？

Answer 1

您可以向 canvas 元素添加 100% 的 CSS 宽度。

虽然通过 CSS 调整 canvas 的大小通常不是一个好的做法，因为它会拉伸/缩小 "image inside the canvas"，但如果它与 canvas 宽度同步 &高度属性没问题。

你可以解决内联问题：

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

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

Answer 2

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

接受的答案建议使用 css 宽度属性并注意 canvas 会拉伸。这也是完全正确的； canvas 会拉伸。

您可能希望 canvas 伸展，但这通常是不可取的。为了完整起见，这里是实际调整 canvas.

大小的答案

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

步骤

捕获您已完成的调整大小事件，然后...
隐藏canvas
测量父本div尺寸
重新调整 canvas 的宽度和高度属性以匹配测量的父级 div 尺寸
重新显示你的canvas
重新绘制您的 canvas 图形。这是一个重要的额外步骤。任何时候您手动调整 canvas 现有图形的大小都会被清除。

最后一步，重绘图形，非常重要。有关如何使用正确缩放比例重绘图形的详细说明，请参见此处：

演示

可以在此处找到此逻辑工作的演示： 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

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

Answer 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());

调整大小 div 包含 canvas

Resize div containing a canvas

javascript

html5-canvas