added method to scale the comic
This commit is contained in:
parent
00f801d1c8
commit
0e3419e7b4
1 changed files with 36 additions and 9 deletions
45
scripts.js
45
scripts.js
|
@ -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';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue