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

implemented horizonal centering in manual zoom mode

Browse source
This commit is contained in:
Bala Clark 2010-07-08 00:42:09 +01:00
parent 681469979b
commit 96089515b0
1 changed files with 13 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

18
scripts.js
View file

@ -15,12 +15,11 @@ window.onload = function() {
var options = { var options = {
displayMode: "double", displayMode: "double",
zoomMode: "manual" zoomMode: "fitWidth"
} }
book = new ComicBook("comic", pages, options); book = new ComicBook("comic", pages, options);
book.draw(); book.draw();
book.zoom(.5);
} }
window.onresize = function() { window.onresize = function() {
@ -75,7 +74,7 @@ function ComicBook(id, srcs, opts) {
ComicBook.prototype.zoom = function(new_scale) { ComicBook.prototype.zoom = function(new_scale) {
options.zoomMode = "manual"; options.zoomMode = "manual";
scale = new_scale; scale = new_scale;
this.drawPage(); if (typeof pages[pointer] == "object") this.drawPage();
} }
/** /**
@ -110,10 +109,11 @@ function ComicBook(id, srcs, opts) {
ComicBook.prototype.drawPage = function() { ComicBook.prototype.drawPage = function() {
var zoom_scale; var zoom_scale;
var offsetW = 0;
var page = pages[pointer]; var page = pages[pointer];
var page2 = pages[pointer + 1]; var page2 = pages[pointer + 1];
if (typeof page != "object") throw "invalid page"; if (typeof page != "object") throw "invalid page type '"+ typeof page +"'";
var width = page.width; var width = page.width;
@ -152,9 +152,15 @@ function ComicBook(id, srcs, opts) {
canvas.width = (canvas_width < window.innerWidth) ? window.innerWidth : canvas_width; canvas.width = (canvas_width < window.innerWidth) ? window.innerWidth : canvas_width;
canvas.height = (canvas_height < window.innerHeight) ? window.innerHeight : canvas_height; canvas.height = (canvas_height < window.innerHeight) ? window.innerHeight : canvas_height;
// work out a horizonal position that will keep the pages always centred
if (canvas_width < window.innerWidth && options.zoomMode == "manual") {
offsetW = (window.innerWidth - page_width) / 2;
if (options.displayMode == "double") offsetW = offsetW - page_width / 2;
}
// draw the page(s) // draw the page(s)
context.drawImage(page, 0, 0, page_width, page_height); context.drawImage(page, offsetW, 0, page_width, page_height);
if (options.displayMode == "double" && typeof page2 == "object") context.drawImage(page2, page_width, 0, page_width, page_height); if (options.displayMode == "double" && typeof page2 == "object") context.drawImage(page2, page_width + offsetW, 0, page_width, page_height);
} }