绘制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画布时显示加载微调器。事件？

回答

相关问题