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

added reset method to the enhance object, plus some comments

Browse source
This commit is contained in:
Bala Clark 2010-07-15 10:59:27 +00:00
parent fa74081960
commit 06d60c72c6
1 changed files with 54 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

69
lib/ComicBook.js
View file

@ -39,7 +39,7 @@ function merge(a, b) {
function ComicBook(id, srcs, opts) {
this.id = id; // canvas element id
var canvas_id = id; // canvas element id
this.srcs = srcs; // array of image srcs for pages
var defaults = {
@ -84,24 +84,35 @@ function ComicBook(id, srcs, opts) {
// check if the user clicked on the left or right side
return (x <= canvas.width / 2) ? 'left' : 'right';
}
/**
* Setup the canvas element for use throughout the class.
*
* @see #ComicBook.prototype.draw
* @see #ComicBook.prototype.enhance
*/
function init() {
// setup canvas
canvas = document.getElementById(canvas_id);
context = canvas.getContext("2d");
// add page controls
canvas.addEventListener("click", ComicBook.prototype.navigation, false);
};
/*
* @param {String} id The canvas ID to draw the comic on.
* @param {Object} srcs An array of all the comic page srcs, in order
* @see #preload
*/
ComicBook.prototype.draw = function () {
// setup canvas
canvas = document.getElementById(this.id);
context = canvas.getContext("2d");
init();
// preload images if needed
if (pages.length !== no_pages) { this.preload(this.srcs); }
else { this.drawPage(); }
// add page controls
canvas.addEventListener("click", ComicBook.prototype.navigation, false);
};
/*
@ -229,7 +240,7 @@ function ComicBook(id, srcs, opts) {
document.body.style.overflowX = (canvas_width < window.innerWidth) ? "hidden" : "auto";
document.body.style.overflowY = (canvas_height < window.innerHeight) ? "hidden" : "auto";
// work out a horizonal position that will keep the pages always centred
// work out a horizontal 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; }
@ -287,16 +298,28 @@ function ComicBook(id, srcs, opts) {
*
* Powered by the awesome Pixastic: http://www.pixastic.com/
*
* FIXME: page navigation breaks after enhancements are applied
* TODO: reset()
* TODO: allow multiple effects at once
*
* TODO: reset & apply all image enhancements each time before applying new one
* TODO: abstract this into an "Enhance" object, separate from ComicBook?
*/
ComicBook.prototype.enhance = {
reset: function () {},
/**
* Render the page with no enhancements
*/
reset: function () {
enhancements = {};
ComicBook.prototype.drawPage();
},
/**
* Adjust brightness / contrast
*
* options
* brightness (int) -150 to 150
* contrast: (float) -1 to infinity
*
* @param {Object} options
*/
brightness: function (options) {
// merge user options with defaults
@ -311,13 +334,27 @@ function ComicBook(id, srcs, opts) {
contrast: options.contrast,
legacy: true
});
init();
},
/**
* Force black and white
*/
desaturate: function () {
enhancements.desaturate = {};
Pixastic.process(canvas, "desaturate", { average : false });
init();
},
/**
* Sharpen
*
* options:
* amount: number (-1 to infinity)
*
* @param {Object} options
*/
sharpen: function (options) {
var options = merge({ amount: 0 }, options);
@ -325,6 +362,8 @@ function ComicBook(id, srcs, opts) {
Pixastic.process(canvas, "sharpen", {
amount: options.amount
});
init();
}
};