调整画布大小的JavaScript事件

Question

看起来，更改画布的尺寸会清除已在该画布上完成的任何图形。

是否有一个事件在画布上调整大小，所以我可以挂钩它并在发生时重绘？

Answer 1

您通常不希望严格检查resize事件，因为当您执行动态调整大小时，会触发大量事件，例如jQuery中的$（window）.resize，并且据我所知，没有本地调整大小元素事件（there is on window）。我会检查它的时间间隔，而不是：

function onResize(element, callback){ 
    var elementHeight = element.height, 
     elementWidth = element.width; 
    setInterval(function(){ 
     if(element.height !== elementHeight || element.width !== elementWidth){ 
     elementHeight = element.height; 
     elementWidth = element.width; 
     callback(); 
     } 
    }, 300); 
} 

var element = document.getElementsByTagName("canvas")[0]; 
onResize(element, function(){ alert("Woo!"); }); 

Answer 2

画布状态保存为的imageData，然后调整

var imgDat=ctx.getImageData(0,0,ctx.canvas.width,ctx.canvas.height) 

后重绘调整后

ctx.putImageData(imgDat,0,0) 

Answer 3

套件桑德的回答会做很多不必要的工作，而浏览器窗口没有调整大小。最好检查事件是否响应浏览器事件而调整大小，然后在给定时间内忽略调整大小事件，然后再次执行检查（这会在连续快速连接后导致两次检查并且代码可能是改进以防止这种情况发生，但你可能会明白）。

(function(){ 
     var doCheck = true; 
     var check = function(){ 
      //do the check here and call some external event function or something. 
     }; 
     window.addEventListener("resize",function(){ 
      if(doCheck){ 
       check(); 
       doCheck = false; 
       setTimeout(function(){ 
        doCheck = true; 
        check(); 
       },500) 
      } 
     }); 
})(); 

请注意，上面的代码是盲目输入的，没有检查。

Answer 4

大卫Mulder的回答是一个进步，但它看起来像它会在第一 resize事件后等待超时毫秒后触发。换句话说，如果在超时之前发生更多大小调整，它不会重置计时器。我在寻找相反的东西;我想要一些等待一小段时间让调整大小事件停止的事情，然后在经过一段时间后在一段时间后触发。下面的代码就是这样做的。

任何当前正在运行的计时器的ID将在timer_id中。所以，无论何时调整大小，它都会检查是否已经有一段时间在运行。如果是这样，它就取消那个并开始一个新的。

function setResizeHandler(callback, timeout) { 
    var timer_id = undefined; 
    window.addEventListener("resize", function() { 
     if(timer_id != undefined) { 
      clearTimeout(timer_id); 
      timer_id = undefined; 
     } 
     timer_id = setTimeout(function() { 
      timer_id = undefined; 
      callback(); 
     }, timeout); 
    }); 
} 

function callback() { 
    // Here's where you fire-after-resize code goes. 
    alert("Got called!"); 
} 
setResizeHandler(callback, 1500); 

Answer 5

我没有发现任何内置事件来检测新的画布尺寸，所以我试图找到两种方案的解决方法。

function onresize() 
{ 
    // handle canvas resize event here 
} 

var _savedWidth = canvas.clientWidth; 
var _savedHeight = canvas.clientHeight; 
function isResized() 
{ 
    if(_savedWidth != canvas.clientWidth || _savedHeight != canvas.clientHeight) 
    { 
     _savedWidth = canvas.clientWidth; 
     _savedHeight = canvas.clientHeight; 
     onresize(); 
    } 
} 

window.addEventListener("resize", isResized); 

(new MutationObserver(function(mutations) 
{ 
    if(mutations.length > 0) { isResized(); } 
})).observe(canvas, { attributes : true, attributeFilter : ['style'] }); 

1. 为了检测任何JavaScript canvas.style变化，MutationObserver API是良好的。它不检测特定的样式属性，但在这种情况下，检测canvas.clientWidth和canvas.clientHeight是否已更改就足够了。

2. 如果使用百分比单位在style-tag中声明画布大小，那么使用JavaScript正确解释css选择器（>，*，:: before，...）会有问题。我认为在这种情况下，最好的方法是设置一个window.resize处理程序，并检查画布客户端的大小。