added method to scale the comic

This commit is contained in:
Bala Clark 2010-07-07 09:02:07 +01:00
parent 00f801d1c8
commit 0e3419e7b4

View file

@ -28,6 +28,11 @@ 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;
/* /*
* @param {String} id The canvas ID to draw the comic on. * @param {String} id The canvas ID to draw the comic on.
@ -44,9 +49,19 @@ function ComicBook() {
preload(srcs); preload(srcs);
// add page controls // add page controls
canvas.addEventListener("click", comicOnClick, false); canvas.addEventListener("click", navigation, false);
} }
/*
* Zoom the canvas
*
* @param new_scale {Number} Scale the canvas to this ratio
*/
this.zoom = function(new_scale) {
scale = new_scale;
drawPage();
}
/** /**
* Preload all images, draw the page only after a given number have been loaded. * Preload all images, draw the page only after a given number have been loaded.
* *
@ -83,9 +98,13 @@ function ComicBook() {
if (typeof page != "object") throw "invalid page type"; if (typeof page != "object") throw "invalid page type";
canvas.width = page.width; width = page.width * scale;
canvas.height = page.height; height = page.height * scale;
context.drawImage(page, 0, 0);
canvas.width = width;
canvas.height = height;
context.drawImage(page, 0, 0, width, height);
} }
/** /**
@ -112,10 +131,18 @@ function ComicBook() {
} }
} }
function comicOnClick(e) { function navigation(e) {
switch (getCursorPosition(e)) {
case "left": drawPrevPage(); break; switch (e.type) {
case "right": drawNextPage(); break;
case "click":
switch (getCursorPosition(e)) {
case "left": drawPrevPage(); break;
case "right": drawNextPage(); break;
}
break;
defualt: console.log(e.type);
} }
} }
@ -140,4 +167,4 @@ function ComicBook() {
// check if the user clicked on the left or right side // check if the user clicked on the left or right side
return (x <= canvas.width / 2) ? 'left' : 'right'; return (x <= canvas.width / 2) ? 'left' : 'right';
} }
} }