First version of clip feature

src/drawer.js

@@ -258,6 +258,34 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
         }
     },
 
+    // private
+    saveContext: function() {
+        if (!this.useCanvas) {
+            return;
+        }
+
+        this.context.save();
+    },
+
+    // private
+    restoreContext: function() {
+        if (!this.useCanvas) {
+            return;
+        }
+
+        this.context.restore();
+    },
+
+    // private
+    setClip: function(rect) {
+        if (!this.useCanvas) {
+            return;
+        }
+
+        this.context.rect(rect.x, rect.y, rect.width, rect.height);
+        this.context.clip();
+    },
+
     // private
     drawDebugInfo: function( tile, count, i ){
         if ( this.useCanvas ) {

src/tiledimage.js

@@ -72,6 +72,8 @@ $.TiledImage = function( options ) {
     $.console.assert( options.viewer, "[TiledImage] options.viewer is required" );
     $.console.assert( options.imageLoader, "[TiledImage] options.imageLoader is required" );
     $.console.assert( options.source, "[TiledImage] options.source is required" );
+    $.console.assert(!options.clip || options.clip instanceof $.Rect,
+        "[TiledImage] options.clip must be an OpenSeadragon.Rect if present");
 
     $.EventSource.call( this );
 
@@ -84,6 +86,9 @@ $.TiledImage = function( options ) {
     this._imageLoader = options.imageLoader;
     delete options.imageLoader;
 
+    this._clip = options.clip;
+    delete options.clip;
+
     var x = options.x || 0;
     delete options.x;
     var y = options.y || 0;
@@ -1116,6 +1121,20 @@ function drawTiles( tiledImage, lastDrawn ){
         position,
         tileSource;
 
+    var usedClip = false;
+    if (tiledImage._clip) {
+        tiledImage._drawer.saveContext();
+        var box = tiledImage.imageToViewportRectangle(tiledImage._clip, true);
+        var topLeft = tiledImage.viewport.pixelFromPoint(box.getTopLeft(), true);
+        var size = tiledImage.viewport.deltaPixelsFromPoints(box.getSize(), true);
+        box = new OpenSeadragon.Rect(Math.round(topLeft.x * $.pixelDensityRatio),
+            Math.round(topLeft.y * $.pixelDensityRatio),
+            Math.round(size.x * $.pixelDensityRatio),
+            Math.round(size.y * $.pixelDensityRatio));
+        tiledImage._drawer.setClip(box);
+        usedClip = true;
+    }
+
     for ( i = lastDrawn.length - 1; i >= 0; i-- ) {
         tile = lastDrawn[ i ];
         tiledImage._drawer.drawTile( tile, tiledImage._drawingHandler );
@@ -1147,6 +1166,10 @@ function drawTiles( tiledImage, lastDrawn ){
             });
         }
     }
+
+    if (usedClip) {
+        tiledImage._drawer.restoreContext();
+    }
 }
 
 }( OpenSeadragon ));

src/viewer.js

@@ -1280,6 +1280,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
                     y: queueItem.options.y,
                     width: queueItem.options.width,
                     height: queueItem.options.height,
+                    clip: queueItem.options.clip,
                     springStiffness: _this.springStiffness,
                     animationTime: _this.animationTime,
                     minZoomImageRatio: _this.minZoomImageRatio,

test/demo/m2/js/main.js

@@ -22,7 +22,10 @@
             this.pages = this.createPages();
 
             var tileSources = $.map(this.pages, function(v, i) {
-                return v.starter.tileSource;
+                return {
+                    tileSource: v.starter.tileSource,
+                    clip: v.starter.clip
+                };
             });
 
             this.viewer = OpenSeadragon({
@@ -543,11 +546,11 @@
                 }
             }
 
+            this.panBounds = null;
+
             box = new OpenSeadragon.Rect(x, y, width, height);
             this.viewer.viewport.fitBounds(box, config.immediately);
 
-            this.panBounds = null;
-
             var setPanBounds = function() {
                 if (self.mode === 'page' || self.mode === 'book') {
                     self.panBounds = box;

test/demo/m2/js/page.js

@@ -19,6 +19,11 @@
             tileSource: config.tileSource
         };
 
+        if (config.clip) {
+            this.starter.clip = new OpenSeadragon.Rect(config.clip.x, config.clip.y,
+                config.clip.width, config.clip.height);
+        }
+
         this.main = {};
 
         this.alternateIndex = -1;
@@ -56,6 +61,7 @@
             App.viewer.world.removeItem(this.main.tiledImage);
             App.viewer.addTiledImage({
                 tileSource: itemInfo.tileSource,
+                clip: itemInfo.clip,
                 index: this.pageIndex,
                 success: function(event) {
                     self.setDetail(self.main, itemInfo, event.item);
@@ -81,6 +87,7 @@
 
                 App.viewer.addTiledImage({
                     tileSource: v.tileSource,
+                    clip: v.clip,
                     success: function(event) {
                         v.tiledImage = event.item;
                         self.placeDetail(v, true);