确定何时调整画布大小答案

【问题标题】：Determine when a canvas is resized确定何时调整画布大小
【发布时间】：2015-10-22 14:27:32
【问题描述】：

我正在尝试确定何时调整 canvas 的大小以重新绘制它。

上下文：我的canvas 被插入到 flex 布局中，它的高度由 flexbox 模型设置，并根据内容和大小可能动态变化的其他布局元素而变化（例如，AJAX 请求的结果在附近的跨度，这会导致canvas 垂直增长 10 个像素）。

resize 事件似乎只发送到窗口——所以 resize 事件在这里不起作用，因为当窗口没有变化时，画布也可能改变它的大小。

当我的canvas 调整大小时，我怎样才能收到通知？

【问题讨论】：

尝试将height 和width 的canvas 存储在变量中，并在每次AJAX 请求后检查它们。如果其中一个已更改 -> 用新尺寸重新绘制画布（不要忘记存储新值！）。
是的，事情是，AJAX 请求如果只是改变大小的几种方式之一。理想情况下，我不想手动跟踪所有方式。

标签： javascript html canvas resize dom-events

【解决方案1】：

如果您的代码的多个部分会改变您的画布大小，那么您确实必须重构每个 scriptlet，以便在它改变画布大小时通知您。

一个简单的方法是创建一个调整大小的函数，任何 scriptlet 都必须使用它来调整画布的大小。如果调用了该函数，您就知道一个 scriptlet 已经调整了画布的大小：

function resizeCanvas(canvas,w,h){
    canvas.width=w;
    canvas.height=h;
    // All canvas resizing will flow to this point
    // so respond to the resizing here.
    console.log('The canvas has been resized');
}

【讨论】：

谢谢。问题是，我必须找到每一段代码，这些代码可能具有布局已更改以及画布大小也可能已更改的副作用。这很麻烦。
是的，但是您是一名编码员，这就是我们的编码员在面对设计要求时所做的事情。拿杯咖啡去吧！！ :-)
我怀疑你的任务过于恐怖了。将代码放入文本编辑器并“查找”.width 和 .height。这些是可以手动调整画布大小的唯一方法。将这些更改为对resizeCanvas 的调用然后（正如@AndrewEvt 在他的评论中所说）监听window.onresize 并检查浏览器的画布宽度/高度变化。如果您发现那里有变化，请致电resizeCanvas。不是一个可怕的任务。 ;-)
画布的大小由flexbox布局自动改变，以响应同一布局中其他元素的变化。我自己从不直接更改画布的大小。
Flexbox 容器触发更改以响应用户调整窗口大小。因此，监听 window.onresize（以及移动设备上可能的重定向事件）将捕获 flexbox 对您的子画布所做的更改。