mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-25 22:56:11 +03:00
Code Issues Projects Releases Wiki Activity

Use canvas when available - Fixes

Browse Source 
Updated documentation doclet.
Enclosed detection code in a function.
Eliminated the Drawer USE_CANVAS global and replaced it with a
Drawer.useCanvas instance variable.
This commit is contained in:
Mark Salsbery 2013-11-01 13:02:28 -07:00
parent 85fcf0ec11
commit 085c7f2ecb
2 changed files with 26 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/drawer.js
View File

@ -44,11 +44,8 @@ var DEVICE_SCREEN = $.getWindowSize(),
( BROWSER == $.BROWSERS.SAFARI && BROWSER_VERSION >= 4 ) ||
( BROWSER == $.BROWSERS.CHROME && BROWSER_VERSION >= 2 ) ||
( BROWSER == $.BROWSERS.IE && BROWSER_VERSION >= 9 )
),
);
USE_CANVAS = $.supportsCanvas;
//console.error( 'USE_CANVAS ' + USE_CANVAS );
/**
* @class
@ -92,6 +89,7 @@ $.Drawer = function( options ) {
//internal state properties
viewer: null,
useCanvas: $.supportsCanvas,
downloading: 0,
tilesMatrix: {},
tilesLoaded: [],
@ -121,13 +119,10 @@ $.Drawer = function( options ) {
}, options );
if ( this.viewer ) {
USE_CANVAS = $.supportsCanvas && this.viewer.useCanvas;
}
this.useCanvas = $.supportsCanvas && ( this.viewer ? this.viewer.useCanvas : true );
this.container = $.getElement( this.element );
this.canvas = $.makeNeutralElement( USE_CANVAS ? "canvas" : "div" );
this.context = USE_CANVAS ? this.canvas.getContext( "2d" ) : null;
this.canvas = $.makeNeutralElement( this.useCanvas ? "canvas" : "div" );
this.context = this.useCanvas ? this.canvas.getContext( "2d" ) : null;
this.normHeight = this.source.dimensions.y / this.source.dimensions.x;
this.element = this.container;
@ -406,7 +401,7 @@ $.Drawer.prototype = {
},
canRotate: function() {
return USE_CANVAS;
return this.useCanvas;
}
};
@ -523,7 +518,7 @@ function updateViewport( drawer ) {
//TODO
drawer.canvas.innerHTML = "";
if ( USE_CANVAS ) {
if ( drawer.useCanvas ) {
if( drawer.canvas.width != viewportSize.x ||
drawer.canvas.height != viewportSize.y ){
drawer.canvas.width = viewportSize.x;
@ -1201,7 +1196,7 @@ function drawTiles( drawer, lastDrawn ){
} else {
if ( USE_CANVAS ) {
if ( drawer.useCanvas ) {
// TODO do this in a more performant way
// specifically, don't save,rotate,restore every time we draw a tile
if( drawer.viewport.degrees !== 0 ) {
@ -1264,7 +1259,7 @@ function restoreRotationChanges( tile, canvas, context ){
function drawDebugInfo( drawer, tile, count, i ){
if ( USE_CANVAS ) {
if ( drawer.useCanvas ) {
drawer.context.save();
drawer.context.lineWidth = 2;
drawer.context.font = 'small-caps bold 13px ariel';

30
src/openseadragon.js
View File

@ -226,6 +226,9 @@
* @param {Number} [options.maxImageCacheCount=100]
* The max number of images we should keep in memory (per drawer).
*
* @param {Boolean} [options.useCanvas=true]
* Set to false to not use an HTML canvas element for image rendering even if canvas is supported.
*
* @param {Number} [options.minPixelRatio=0.5]
* The higher the minPixelRatio, the lower the quality of the image that
* is considered sufficient to stop rendering a given zoom level. For
@ -293,6 +296,12 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
toString = Object.prototype.toString,
hasOwn = Object.prototype.hasOwnProperty;
// Detects canvas support
function isCanvasSupported() {
var canvasElement = document.createElement( 'canvas' );
return !!( $.isFunction( canvasElement.getContext ) &&
canvasElement.getContext( '2d' ) );
}
/**
* Taken from jQuery 1.6.1
@ -386,6 +395,14 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
};
/**
* True if the browser supports the HTML5 canvas element
* @name $.supportsCanvas
* @property
*/
$.supportsCanvas = isCanvasSupported();
/**
* Detect event model and create appropriate _addEvent/_removeEvent methods
*/
@ -424,19 +441,6 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
}
/*
* Detect canvas support
*/
var canvasElement = document.createElement( 'canvas' );
/**
* True if the browser supports the HTML5 canvas element
* @name $.supportsCanvas
* @property
*/
$.supportsCanvas = !!( $.isFunction( canvasElement.getContext ) &&
canvasElement.getContext( '2d' ) );
}( OpenSeadragon ));
/**