绘制HTML5画布时显示加载微调器。事件?
问题描述:
我花了很多时间寻找这个问题,但这不是一个很常见的问题,或者我的Google-fu缺乏。绘制HTML5画布时显示加载微调器。事件?
简短的版本是我有一个HTML5画布元素的网站,它显示大型复杂的绘图,这意味着它通常需要10秒才能完成。
如何钩入绘图事件?我无法找到任何类型的内容,但是如果在绘制画布时显示加载微调框,它将确实有助于用户体验。我以前看过它,但没有看到“如何”。
详细的经验: 我显示与PDFJS一个PDF,并有自己的浏览器,而不是提供一个的。它可以工作,但有时它会使PDF非常缓慢,因此需要微调。
答
这里是一个非常简单和令人讨厌的例子,它现在使用一个事件,你可以触发:)。
的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);
这现在使用可手动断火,这将设置画布装货的事件。
为什么不创建一个'onLoading'函数,当您的画布绘制新的10秒图像时会调用这个函数? – Canvas
我明白了你的观点,这是发生在我身上的一件事,但在我将自己置入该解决方案之前,我会看看是否可以创建某种半通用事件侦听器。 –
我已更新我的答案以使用活动 – Canvas