mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-29 08:36: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 ){
|
function drawDebugInfo( drawer, tile, count, i ){
|
||||||
|
|
||||||
if ( USE_CANVAS ) {
|
if ( USE_CANVAS ) {
|
||||||
|
drawer.context.save();
|
||||||
drawer.context.lineWidth = 2;
|
drawer.context.lineWidth = 2;
|
||||||
drawer.context.font = 'small-caps bold 13px ariel';
|
drawer.context.font = 'small-caps bold 13px ariel';
|
||||||
drawer.context.strokeStyle = drawer.debugGridColor;
|
drawer.context.strokeStyle = drawer.debugGridColor;
|
||||||
@ -1205,6 +1206,7 @@ function drawDebugInfo( drawer, tile, count, i ){
|
|||||||
tile.position.x + 10,
|
tile.position.x + 10,
|
||||||
tile.position.y + 70
|
tile.position.y + 70
|
||||||
);
|
);
|
||||||
|
drawer.context.restore();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
38
src/tile.js
38
src/tile.js
@ -1,5 +1,7 @@
|
|||||||
(function( $ ){
|
(function( $ ){
|
||||||
|
var TILE_CACHE = {},
|
||||||
|
TILE_CACHE_STACK = [],
|
||||||
|
TILE_CACHE_MAX = 256;
|
||||||
/**
|
/**
|
||||||
* @class
|
* @class
|
||||||
* @param {Number} level The zoom level this tile belongs to.
|
* @param {Number} level The zoom level this tile belongs to.
|
||||||
@ -140,7 +142,9 @@ $.Tile.prototype = {
|
|||||||
drawCanvas: function( context ) {
|
drawCanvas: function( context ) {
|
||||||
|
|
||||||
var position = this.position,
|
var position = this.position,
|
||||||
size = this.size;
|
size = this.size,
|
||||||
|
rendered,
|
||||||
|
canvas;
|
||||||
|
|
||||||
if ( !this.loaded || !this.image ) {
|
if ( !this.loaded || !this.image ) {
|
||||||
$.console.warn(
|
$.console.warn(
|
||||||
@ -151,9 +155,9 @@ $.Tile.prototype = {
|
|||||||
}
|
}
|
||||||
context.globalAlpha = this.opacity;
|
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
|
//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
|
||||||
@ -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