Merge pull request #6687 from tchandelle/extent-clip

Clip image only if the layer extent intersects the view extent

src/ol/renderer/canvas/intermediatecanvas.js

@@ -3,6 +3,7 @@ goog.provide('ol.renderer.canvas.IntermediateCanvas');
 goog.require('ol');
 goog.require('ol.coordinate');
 goog.require('ol.dom');
+goog.require('ol.extent');
 goog.require('ol.renderer.canvas.Layer');
 goog.require('ol.transform');
 
@@ -45,7 +46,9 @@ ol.renderer.canvas.IntermediateCanvas.prototype.composeFrame = function(frameSta
 
     // clipped rendering if layer extent is set
     var extent = layerState.extent;
-    var clipped = extent !== undefined;
+    var clipped = extent !== undefined &&
+        !ol.extent.containsExtent(extent, frameState.extent) &&
+        ol.extent.intersects(extent, frameState.extent);
     if (clipped) {
       this.clip(context, frameState, /** @type {ol.Extent} */ (extent));
     }

test/spec/ol/renderer/canvas/intermediatecanvas.test.js

@@ -9,18 +9,19 @@ goog.require('ol.renderer.canvas.IntermediateCanvas');
 describe('ol.renderer.canvas.IntermediateCanvas', function() {
 
   describe('#composeFrame()', function() {
-    it('clips to layer extent and draws image', function() {
+    var renderer, frameState, layerState, context;
+    beforeEach(function() {
       var layer = new ol.layer.Image({
         extent: [1, 2, 3, 4]
       });
-      var renderer = new ol.renderer.canvas.IntermediateCanvas(layer);
+      renderer = new ol.renderer.canvas.IntermediateCanvas(layer);
       var image = new Image();
       image.width = 3;
       image.height = 3;
       renderer.getImage = function() {
         return image;
       };
-      var frameState = {
+      frameState = {
         viewState: {
           center: [2, 3],
           resolution: 1,
@@ -35,8 +36,8 @@ describe('ol.renderer.canvas.IntermediateCanvas', function() {
         return ol.transform.create();
       };
       ol.renderer.Map.prototype.calculateMatrices2D(frameState);
-      var layerState = layer.getLayerState();
+      layerState = layer.getLayerState();
-      var context = {
+      context = {
         save: sinon.spy(),
         restore: sinon.spy(),
         translate: sinon.spy(),
@@ -47,6 +48,11 @@ describe('ol.renderer.canvas.IntermediateCanvas', function() {
         clip: sinon.spy(),
         drawImage: sinon.spy()
       };
+    });
+
+    it('clips to layer extent and draws image', function() {
+      frameState.extent = [0, 1, 4, 5];
+
       renderer.composeFrame(frameState, layerState, context);
       expect(context.save.callCount).to.be(1);
       expect(context.translate.callCount).to.be(0);
@@ -61,6 +67,35 @@ describe('ol.renderer.canvas.IntermediateCanvas', function() {
           [renderer.getImage(), 0, 0, 3, 3, 0, 0, 3, 3]);
       expect(context.restore.callCount).to.be(1);
     });
+
+    it('does not clip if frame extent does not intersect layer extent', function() {
+      frameState.extent = [1.1, 2.1, 2.9, 3.9];
+
+      renderer.composeFrame(frameState, layerState, context);
+      expect(context.save.callCount).to.be(0);
+      expect(context.translate.callCount).to.be(0);
+      expect(context.rotate.callCount).to.be(0);
+      expect(context.beginPath.callCount).to.be(0);
+      expect(context.clip.callCount).to.be(0);
+      expect(context.drawImage.firstCall.args).to.eql(
+          [renderer.getImage(), 0, 0, 3, 3, 0, 0, 3, 3]);
+      expect(context.restore.callCount).to.be(0);
+    });
+
+    it('does not clip if frame extent is outside of layer extent', function() {
+      frameState.extent = [10, 20, 30, 40];
+
+      renderer.composeFrame(frameState, layerState, context);
+      expect(context.save.callCount).to.be(0);
+      expect(context.translate.callCount).to.be(0);
+      expect(context.rotate.callCount).to.be(0);
+      expect(context.beginPath.callCount).to.be(0);
+      expect(context.clip.callCount).to.be(0);
+      expect(context.drawImage.firstCall.args).to.eql(
+          [renderer.getImage(), 0, 0, 3, 3, 0, 0, 3, 3]);
+      expect(context.restore.callCount).to.be(0);
+    });
+
   });
 
 });