yetangitu/canvas-based-HTML5-Comic-Book-Reader
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

changed srcs to json formating

Browse source
This commit is contained in:
Bala Clark 2010-07-06 10:19:24 +01:00
parent 7422f20d52
commit 21d8869ad3
1 changed files with 49 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

87
scripts.js
View file

@ -5,50 +5,70 @@ window.onload = function() {
book = new ComicBook(); book = new ComicBook();
var srcs = [ var srcs = {
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/00.jpg", 1: "http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/00.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/01.jpg", 2: "http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/01.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/02.jpg", 3: "http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/02.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/03.jpg", 4: "http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/03.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/04.jpg", 5: "http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/04.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/05.jpg", 6: "http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/05.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/06.jpg", 7: "http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/06.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/07.jpg" 8: "http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/07.jpg"
]; };
book.draw("comic", srcs); book.draw("comic", srcs);
} }
function ComicBook() { function ComicBook() {
var srcs = [];
var pages = []; var pages = [];
var canvas; var canvas;
var context; var context;
var buffer = 10; var buffer = 4;
var pointer = 0; var pointer = 0;
console.log("init"); /*
* @param {String} id The canvas ID to draw the comic on.
this.draw = function(elm, srcs) { * @param {Array} srcs An array of all the comic page srcs, in order
*/
this.draw = function(id, srcs) {
// setup canvas // setup canvas
canvas = document.getElementById(elm); canvas = document.getElementById(id);
context = canvas.getContext("2d"); context = canvas.getContext("2d");
// set full width
//canvas.width = document.body.clientWidth;
preload(srcs); preload(srcs);
} }
this.drawPage = function() { drawPage(); } function preload(srcs) {
var loaded = 0;
if (srcs.length < buffer) buffer = srcs.length; // don't get stuck if the buffer level is higher than the number of pages
for (i in srcs) {
var page = new Image();
page.src = srcs[i];
page.onload = function() {
pages[loaded] = this; loaded++;
if (loaded == buffer) drawPage();
}
};
}
/** /**
* TODO: break this down into drawSinglePage() & drawDoublePage() * TODO: break this down into drawSinglePage() & drawDoublePage()
* TODO: if the current browser doesn't have canvas support, use img tags
*/ */
function drawPage() { function drawPage() {
console.log(pointer, pages);
var page = pages[pointer]; var page = pages[pointer];
canvas.width = page.width; canvas.width = page.width;
@ -56,22 +76,13 @@ function ComicBook() {
context.drawImage(page, 0, 0); context.drawImage(page, 0, 0);
} }
function preload(srcs) { this.drawNextPage = function() {
if (pointer < pointer + 1) pointer++;
var loaded = 0; drawPage();
}
if (srcs.length < buffer) buffer = srcs.length; // don't get stuck if the buffer level is higher than the number of pages this.drawPrevPage = function() {
if (pointer > 0) pointer--;
srcs.forEach(function(src){ drawPage();
var page = new Image();
page.src = src;
page.onload = function() {
pages[loaded] = this; loaded++;
if (loaded == buffer) drawPage();
}
});
} }
} }