JavaScript событие для изменения размера холста

Question

Похоже, что изменение размеров холста очищает любой рисунок, уже сделанный на этом холсте.

Есть ли событие, которое запускается при изменении размера холста, поэтому я могу перехватить его и перерисовать, когда это произойдет?

Answer 1

Ответ Дэвида Малдера является улучшением, но, похоже, он сработает после ожидания timeout миллисекунд после первого события изменения размера. Другими словами, если перед тайм-аутом произойдет больше изменений, таймер не будет сброшен. Я искал противоположное; Я хотел что-то, что могло бы немного подождать, пока события изменения размера прекратятся, а затем сработать через определенное время после last . Следующий код делает это.

Идентификатор любого запущенного в данный момент таймера будет в 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 2

Обычно вы не хотите строго проверять событие изменения размера, потому что они часто запускаются, когда вы делаете динамическое изменение размера, например, $ (window) .resize в jQuery, и, насколько я знаю, нет собственного события изменения размерана элементах ( есть на окне ).Вместо этого я бы проверил интервал:

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 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

Я не нашел никаких встроенных событий для обнаружения новых размеров холста, поэтому я попытался найти обходной путь для двух сценариев.

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.style меняется, API для MutationObserver хорош.Он не определяет определенное свойство стиля, но в этом случае достаточно проверить, изменились ли canvas.clientWidth и canvas.clientHeight.

2. Если размер холста объявлен вПри использовании тега style с процентной единицей у нас есть проблема с правильной интерпретацией селекторов css (>, *, :: before, ...) с помощью JavaScript.Я думаю, что в этом случае лучше всего установить обработчик window.resize, а также проверить размер клиента холста.

Answer 5

сохранить состояние холста как imageData и перерисовать его после изменения размера

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

после изменения размера

ctx.putImageData(imgDat,0,0)