繪製HTML5畫布時顯示加載微調器。事件？

我花了很多時間尋找這個問題，但這不是一個很常見的問題，或者我的Google-fu缺乏。繪製HTML5畫布時顯示加載微調器。事件？

簡短的版本是我有一個HTML5畫布元素的網站，它顯示大型複雜的繪圖，這意味着它通常需要10秒才能完成。

如何鉤入繪圖事件？我無法找到任何類型的內容，但是如果在繪製畫布時顯示加載微調框，它將確實有助於用戶體驗。我以前看過它，但沒有看到「如何」。

詳細的經驗： 我顯示與PDFJS一個PDF，並有自己的瀏覽器，而不是提供一個的。它可以工作，但有時它會使PDF非常緩慢，因此需要微調。

來源

2015-10-19 Frederik T

爲什麼不創建一個'onLoading'函數，當您的畫布繪製新的10秒圖像時會調用這個函數？ – Canvas

我明白了你的觀點，這是發生在我身上的一件事，但在我將自己置入該解決方案之前，我會看看是否可以創建某種半通用事件偵聽器。 –

我已更新我的答案以使用活動 – Canvas

這裏是一個非常簡單和令人討厭的例子，它現在使用一個事件，你可以觸發:)。

的jsfiddle：https://jsfiddle.net/CanvasCode/jwzLr4wh/1/

的JavaScript

image = new Image(); 
image.src = "https://upload.wikimedia.org/wikipedia/commons/1/1e/Large_Siamese_cat_tosses_a_mouse.jpg"; 

var canvas = document.getElementById('myCanvas-1'); 
var ctx = document.getElementById('myCanvas-1').getContext('2d'); 
var loading = true; 
var loadingText = "Loading"; 

var event = new Event('loading'); 

// Listen for the event. 
canvas.addEventListener('loading', function (e) { 
    // Quick and nasty 
    setInterval(function() { 
     if (loading) { 
      console.log("update"); 
      ctx.fillStyle = "#FFF"; 
      ctx.fillRect(0, 0, 400, 400); 
      ctx.font = '15pt Arial '; 
      ctx.fillStyle = "#000"; 
      ctx.fillText(loadingText, 200, 200); 
      if (loadingText == "Loading...") { 
       loadingText = "Loading"; 
      } 
      loadingText = loadingText + "." 
     } 
    }, 1); 
}, false); 

canvas.dispatchEvent(event); 
setTimeout(function() { 
    ctx.drawImage(image, 0, 0); 
    ctx.font = '15pt Arial '; 
    ctx.fillStyle = "#000"; 
    loading = false; 
}, 5000);

這現在使用可手動斷火，這將設置畫布裝貨的事件。

來源

2015-10-19 12:34:31 Canvas

繪製HTML5畫布時顯示加載微調器。事件？

回答

相關問題