确定调整画布的大小

Question

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

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

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

如何在canvas调整大小后收到通知？

Answer 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');
}