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

implemented double page mode, note that manual zooming is now broken :/

Browse source
This commit is contained in:
Bala Clark 2010-07-07 12:58:37 +01:00
parent 05a93a2a20
commit a2db134e22
1 changed files with 57 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

64
scripts.js
View file

@ -10,8 +10,7 @@ window.onload = function() {
"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"
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/06.jpg"
];
book = new ComicBook();
@ -30,7 +29,8 @@ function ComicBook() {
var loaded = 0;
var scale = 1;
var zoomMode = "fitWidth"; // manual / fitWidth / fitHeight
var displayMode = "double" // single / double
var zoomMode = "manual"; // manual / fitWidth / fitHeight
/*
* @param {String} id The canvas ID to draw the comic on.
@ -56,6 +56,7 @@ function ComicBook() {
* @param new_scale {Number} Scale the canvas to this ratio
*/
this.zoom = function(new_scale) {
zoomMode = "manual";
scale = new_scale;
drawPage();
}
@ -92,27 +93,64 @@ function ComicBook() {
*/
function drawPage() {
var width, height, page = pages[pointer];
console.log(scale, displayMode, zoomMode);
if (typeof page != "object") throw "invalid page type";
var zoom_scale;
var page = pages[pointer];
var page2 = pages[pointer + 1];
if (typeof page != "object") throw "invalid page";
var width = page.width;
var height = page.height;
if (displayMode == "double") {
// for double page spreads, factor in the width of both pages, set the height to the tallest page
if (typeof page2 == "object") {
width += page2.width;
if (page2.height > page.height) height = page2.height;
}
// if this is the last page and there is no page2, still keep the canvas wide
else width += width;
}
// update the page scale if a non manual mode has been chosen
switch(zoomMode) {
case "fitWidth":
scale = (window.innerWidth > page.width)
? ((window.innerWidth - page.width) / window.innerWidth) + 1 // scale up if the window is wider than the page
: window.innerWidth / page.width; // scale down if the window is narrower than the page
case "manual":
zoom_scale = (displayMode == "double") ? scale * 2 : scale;
break;
case "fitWidth":
zoom_scale = (window.innerWidth > width)
? ((window.innerWidth - width) / window.innerWidth) + 1 // scale up if the window is wider than the page
: window.innerWidth / width; // scale down if the window is narrower than the page
break;
default: throw "invalid zoomMode";
}
width = page.width * scale;
height = page.height * scale;
// set the page dimensions based on scale
width = page.width * zoom_scale;
height = page.height * zoom_scale;
// make sure the canvas is always at least full screen, even if the page is more narrow than the screen
canvas.width = (height < window.innerWidth) ? window.innerWidth : width;
canvas.width = (width < window.innerWidth) ? window.innerWidth : width;
canvas.height = (height < window.innerHeight) ? window.innerHeight : height;
context.drawImage(page, 0, 0, width, height);
// draw the page
if (zoomMode == "manual") {
context.drawImage(page, 0, 0, page.width, page.height);
if (displayMode == "double" && typeof page2 == "object") context.drawImage(page2, page.width, 0, page2.width, page2.height);
}
// draw page with scaled dimensions in dynamic display modes
else {
context.drawImage(page, 0, 0, width, height);
if (displayMode == "double" && typeof page2 == "object") context.drawImage(page2, width, 0, width, height);
}
}
/**