improved caching follows existing use of tile.unload to delete prerendered canvas

This commit is contained in:
thatcher 2013-03-05 07:30:37 -05:00
parent 2be165fa70
commit fe0cafea21
2 changed files with 12 additions and 6 deletions

View File

@ -148,7 +148,7 @@ module.exports = function(grunt) {
grunt.registerTask("copy:release", function() { grunt.registerTask("copy:release", function() {
grunt.file.recurse("build", function(abspath, rootdir, subdir, filename) { grunt.file.recurse("build", function(abspath, rootdir, subdir, filename) {
var dest = "../site-build/" var dest = "../site-build/"
+ (subdir ? subdir + "/" : "") + (subdir ? subdir + "/" : '/')
+ filename; + filename;
grunt.file.copy(abspath, dest); grunt.file.copy(abspath, dest);

View File

@ -146,7 +146,7 @@ $.Tile.prototype = {
rendered, rendered,
canvas; canvas;
if ( !this.loaded || !this.image ) { if ( !this.loaded || !( this.image || TILE_CACHE[ this.url ] ) ){
$.console.warn( $.console.warn(
"Attempting to draw tile %s when it's not yet loaded.", "Attempting to draw tile %s when it's not yet loaded.",
this.toString() this.toString()
@ -161,7 +161,7 @@ $.Tile.prototype = {
//ie its done fading or fading is turned off, and if we are drawing //ie its done fading or fading is turned off, and if we are drawing
//an image with an alpha channel, then the only way //an image with an alpha channel, then the only way
//to avoid seeing the tile underneath is to clear the rectangle //to avoid seeing the tile underneath is to clear the rectangle
if( context.globalAlpha == 1 && this.image.src.match('.png') ){ if( context.globalAlpha == 1 && this.url.match('.png') ){
//clearing only the inside of the rectangle occupied //clearing only the inside of the rectangle occupied
//by the png prevents edge flikering //by the png prevents edge flikering
context.clearRect( context.clearRect(
@ -173,16 +173,19 @@ $.Tile.prototype = {
} }
if( !TILE_CACHE[ this.image.src ] ){ if( !TILE_CACHE[ this.url ] ){
canvas = document.createElement( 'canvas' ); canvas = document.createElement( 'canvas' );
canvas.width = this.image.width; canvas.width = this.image.width;
canvas.height = this.image.height; canvas.height = this.image.height;
rendered = canvas.getContext('2d'); rendered = canvas.getContext('2d');
rendered.drawImage( this.image, 0, 0 ); rendered.drawImage( this.image, 0, 0 );
TILE_CACHE[ this.image.src ] = rendered; TILE_CACHE[ this.url ] = rendered;
//since we are caching the prerendered image on a canvas
//allow the image to not be held in memory
this.image = null;
} }
rendered = TILE_CACHE[ this.image.src ]; rendered = TILE_CACHE[ this.url ];
//rendered.save(); //rendered.save();
context.drawImage( context.drawImage(
rendered.canvas, rendered.canvas,
@ -207,6 +210,9 @@ $.Tile.prototype = {
unload: function() { unload: function() {
if ( this.element && this.element.parentNode ) { if ( this.element && this.element.parentNode ) {
this.element.parentNode.removeChild( this.element ); this.element.parentNode.removeChild( this.element );
}
if ( TILE_CACHE[ this.url ]){
delete TILE_CACHE[ this.url ];
} }
this.element = null; this.element = null;