mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2025-01-20 09:41:45 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #268 from msalsbery/canvas-detect

Browse Source 
Use canvas whenever possible (#191)
This commit is contained in:
iangilman 2013-11-08 09:56:40 -08:00
commit cb1fd65378
3 changed files with 27 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
changelog.txt
View File

@ -37,6 +37,7 @@ OPENSEADRAGON CHANGELOG
* Fixed: IE 10 not reading DZI file correctly in certain circumstances (#218)
* Added support for the 'wheel' DOM mousewheel event (#261)
* Fix for non-canvas tile rendering at large size (#264)
* Drawer now uses an HTML5 canvas element whenever it's available. Can be overridden with the Viewer.useCanvas option (#191)
0.9.131:

21
src/drawer.js
View File

@ -44,14 +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 = SUBPIXEL_RENDERING &&
!( DEVICE_SCREEN.x <= 400 || DEVICE_SCREEN.y <= 400 ) &&
!( navigator.appVersion.match( 'Mobile' ) ) &&
$.isFunction( document.createElement( "canvas" ).getContext );
//console.error( 'USE_CANVAS ' + USE_CANVAS );
/**
* @class
@ -124,9 +118,10 @@ $.Drawer = function( options ) {
}, options );
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;
@ -405,7 +400,7 @@ $.Drawer.prototype = {
},
canRotate: function() {
return USE_CANVAS;
return this.useCanvas;
}
};
@ -522,7 +517,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;
@ -1200,7 +1195,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 ) {
@ -1263,7 +1258,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';

18
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
*/
@ -598,6 +615,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
imageLoaderLimit: 0,
maxImageCacheCount: 200,
timeout: 30000,
useCanvas: true, // Use canvas element for drawing if available
//INTERFACE RESOURCE SETTINGS
prefixUrl: "/images/",