From ab01d45ea11a2997450ffe82b52ccda66742c16a Mon Sep 17 00:00:00 2001 From: Bala Clark Date: Tue, 6 Jul 2010 09:38:00 +0100 Subject: [PATCH] initial commit, basic ComicBook class structure, image preloading, single page display (no navigation) done. --- reader.html | 17 ++++++++++++ scripts.js | 77 +++++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 4 +++ 3 files changed, 98 insertions(+) create mode 100644 reader.html create mode 100644 scripts.js create mode 100644 styles.css diff --git a/reader.html b/reader.html new file mode 100644 index 0000000..cbbbf6c --- /dev/null +++ b/reader.html @@ -0,0 +1,17 @@ + + + + + + + + Canvas Test + + + + + + + get a better browser, fool. + + diff --git a/scripts.js b/scripts.js new file mode 100644 index 0000000..0e93f43 --- /dev/null +++ b/scripts.js @@ -0,0 +1,77 @@ + +var book; + +window.onload = function() { + + book = new ComicBook(); + + var srcs = [ + "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", + "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", + "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", + "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" + ]; + + book.draw("comic", srcs); +} + +function ComicBook() { + + var pages = []; + var canvas; + var context; + + var buffer = 10; + var pointer = 0; + + console.log("init"); + + this.draw = function(elm, srcs) { + + // setup canvas + canvas = document.getElementById(elm); + context = canvas.getContext("2d"); + + // set full width + //canvas.width = document.body.clientWidth; + + preload(srcs); + } + + this.drawPage = function() { drawPage(); } + + /** + * TODO: break this down into drawSinglePage() & drawDoublePage() + */ + function drawPage() { + + var page = pages[pointer]; + + canvas.width = page.width; + canvas.height = page.height; + context.drawImage(page, 0, 0); + } + + 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 + + srcs.forEach(function(src){ + + var page = new Image(); + + page.src = src; + + page.onload = function() { + pages[loaded] = this; loaded++; + if (loaded == buffer) drawPage(); + } + }); + } +} \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..c2c9d02 --- /dev/null +++ b/styles.css @@ -0,0 +1,4 @@ +canvas { + background-color: #ddd; + width: 100%; +} \ No newline at end of file