mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-25 14:46:10 +03:00
niave implementation of prerender for canvas, the first optimization discussed here: http://www.html5rocks.com/en/tutorials/canvas/performance/
This commit is contained in:
parent
417a93d5ae
commit
2be165fa70
@ -1153,6 +1153,7 @@ function drawTiles( drawer, lastDrawn ){
|
||||
function drawDebugInfo( drawer, tile, count, i ){
|
||||
|
||||
if ( USE_CANVAS ) {
|
||||
drawer.context.save();
|
||||
drawer.context.lineWidth = 2;
|
||||
drawer.context.font = 'small-caps bold 13px ariel';
|
||||
drawer.context.strokeStyle = drawer.debugGridColor;
|
||||
@ -1205,6 +1206,7 @@ function drawDebugInfo( drawer, tile, count, i ){
|
||||
tile.position.x + 10,
|
||||
tile.position.y + 70
|
||||
);
|
||||
drawer.context.restore();
|
||||
}
|
||||
}
|
||||
|
||||
|
38
src/tile.js
38
src/tile.js
@ -1,5 +1,7 @@
|
||||
(function( $ ){
|
||||
|
||||
var TILE_CACHE = {},
|
||||
TILE_CACHE_STACK = [],
|
||||
TILE_CACHE_MAX = 256;
|
||||
/**
|
||||
* @class
|
||||
* @param {Number} level The zoom level this tile belongs to.
|
||||
@ -140,7 +142,9 @@ $.Tile.prototype = {
|
||||
drawCanvas: function( context ) {
|
||||
|
||||
var position = this.position,
|
||||
size = this.size;
|
||||
size = this.size,
|
||||
rendered,
|
||||
canvas;
|
||||
|
||||
if ( !this.loaded || !this.image ) {
|
||||
$.console.warn(
|
||||
@ -151,9 +155,9 @@ $.Tile.prototype = {
|
||||
}
|
||||
context.globalAlpha = this.opacity;
|
||||
|
||||
context.save();
|
||||
//context.save();
|
||||
|
||||
//if we are supposed to b rendering fully opaque rectangle,
|
||||
//if we are supposed to be rendering fully opaque rectangle,
|
||||
//ie its done fading or fading is turned off, and if we are drawing
|
||||
//an image with an alpha channel, then the only way
|
||||
//to avoid seeing the tile underneath is to clear the rectangle
|
||||
@ -169,9 +173,31 @@ $.Tile.prototype = {
|
||||
|
||||
}
|
||||
|
||||
context.drawImage( this.image, position.x, position.y, size.x, size.y );
|
||||
if( !TILE_CACHE[ this.image.src ] ){
|
||||
canvas = document.createElement( 'canvas' );
|
||||
canvas.width = this.image.width;
|
||||
canvas.height = this.image.height;
|
||||
rendered = canvas.getContext('2d');
|
||||
rendered.drawImage( this.image, 0, 0 );
|
||||
TILE_CACHE[ this.image.src ] = rendered;
|
||||
}
|
||||
|
||||
context.restore();
|
||||
rendered = TILE_CACHE[ this.image.src ];
|
||||
//rendered.save();
|
||||
context.drawImage(
|
||||
rendered.canvas,
|
||||
0,
|
||||
0,
|
||||
rendered.canvas.width,
|
||||
rendered.canvas.height,
|
||||
position.x,
|
||||
position.y,
|
||||
size.x,
|
||||
size.y
|
||||
);
|
||||
//rendered.restore();
|
||||
|
||||
//context.restore();
|
||||
},
|
||||
|
||||
/**
|
||||
|
Loading…
Reference in New Issue
Block a user