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

autofit zoom mode implemented

Browse source
This commit is contained in:
Bala Clark 2010-07-07 11:19:21 +01:00
parent 0e3419e7b4
commit 05a93a2a20
1 changed files with 17 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

26
scripts.js
View file

@ -28,12 +28,10 @@ function ComicBook() {
var buffer = 4; var buffer = 4;
var pointer = 0; var pointer = 0;
var loaded = 0; var loaded = 0;
var canvas_width;
var canvas_height;
var scale = 1;
var scale = 1;
var zoomMode = "fitWidth"; // manual / fitWidth / fitHeight
/* /*
* @param {String} id The canvas ID to draw the comic on. * @param {String} id The canvas ID to draw the comic on.
* @param {Object} srcs An array of all the comic page srcs, in order * @param {Object} srcs An array of all the comic page srcs, in order
@ -94,15 +92,25 @@ function ComicBook() {
*/ */
function drawPage() { function drawPage() {
var page = pages[pointer]; var width, height, page = pages[pointer];
if (typeof page != "object") throw "invalid page type"; if (typeof page != "object") throw "invalid page type";
width = page.width * scale; // 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
break;
}
width = page.width * scale;
height = page.height * scale; height = page.height * scale;
canvas.width = width; // make sure the canvas is always at least full screen, even if the page is more narrow than the screen
canvas.height = height; canvas.width = (height < window.innerWidth) ? window.innerWidth : width;
canvas.height = (height < window.innerHeight) ? window.innerHeight : height;
context.drawImage(page, 0, 0, width, height); context.drawImage(page, 0, 0, width, height);
} }