From 355c0a10179625ff103d4f5b63c2816a73fc2618 Mon Sep 17 00:00:00 2001 From: Frederic Junod Date: Thu, 12 Dec 2013 14:46:39 +0100 Subject: [PATCH] Scale output canvas by devicePixelRatio --- .../canvas/canvasimagelayerrenderer.js | 7 +++-- src/ol/renderer/canvas/canvaslayerrenderer.js | 7 +++-- src/ol/renderer/canvas/canvasmaprenderer.js | 30 +++++++++++++++---- .../canvas/canvastilelayerrenderer.js | 8 +++-- 4 files changed, 39 insertions(+), 13 deletions(-) diff --git a/src/ol/renderer/canvas/canvasimagelayerrenderer.js b/src/ol/renderer/canvas/canvasimagelayerrenderer.js index 29af98a994..dc6a94d298 100644 --- a/src/ol/renderer/canvas/canvasimagelayerrenderer.js +++ b/src/ol/renderer/canvas/canvasimagelayerrenderer.js @@ -96,9 +96,12 @@ ol.renderer.canvas.ImageLayer.prototype.prepareFrame = image = this.image_; var imageExtent = image.getExtent(); var imageResolution = image.getResolution(); + var devicePixelRatio = frameState.devicePixelRatio; ol.vec.Mat4.makeTransform2D(this.imageTransform_, - frameState.size[0] / 2, frameState.size[1] / 2, - imageResolution / viewResolution, imageResolution / viewResolution, + devicePixelRatio * frameState.size[0] / 2, + devicePixelRatio * frameState.size[1] / 2, + devicePixelRatio * imageResolution / viewResolution, + devicePixelRatio * imageResolution / viewResolution, viewRotation, (imageExtent[0] - viewCenter[0]) / imageResolution, (viewCenter[1] - imageExtent[3]) / imageResolution); diff --git a/src/ol/renderer/canvas/canvaslayerrenderer.js b/src/ol/renderer/canvas/canvaslayerrenderer.js index 7485e3f05a..3a0d2a53d2 100644 --- a/src/ol/renderer/canvas/canvaslayerrenderer.js +++ b/src/ol/renderer/canvas/canvaslayerrenderer.js @@ -139,9 +139,12 @@ ol.renderer.canvas.Layer.prototype.getImageTransform = goog.abstractMethod; */ ol.renderer.canvas.Layer.prototype.getTransform = function(frameState) { var view2DState = frameState.view2DState; + var devicePixelRatio = frameState.devicePixelRatio; return ol.vec.Mat4.makeTransform2D(this.transform_, - frameState.size[0] / 2, frameState.size[1] / 2, - 1 / view2DState.resolution, -1 / view2DState.resolution, + devicePixelRatio * frameState.size[0] / 2, + devicePixelRatio * frameState.size[1] / 2, + devicePixelRatio / view2DState.resolution, + -devicePixelRatio / view2DState.resolution, -view2DState.rotation, -view2DState.center[0], -view2DState.center[1]); }; diff --git a/src/ol/renderer/canvas/canvasmaprenderer.js b/src/ol/renderer/canvas/canvasmaprenderer.js index a78e1f7735..404762d94c 100644 --- a/src/ol/renderer/canvas/canvasmaprenderer.js +++ b/src/ol/renderer/canvas/canvasmaprenderer.js @@ -6,6 +6,7 @@ goog.require('goog.asserts'); goog.require('goog.dom'); goog.require('goog.dom.TagName'); goog.require('goog.style'); +goog.require('goog.vec.Mat4'); goog.require('ol.css'); goog.require('ol.layer.Image'); goog.require('ol.layer.Tile'); @@ -19,6 +20,7 @@ goog.require('ol.renderer.canvas.Layer'); goog.require('ol.renderer.canvas.TileLayer'); goog.require('ol.renderer.canvas.VectorLayer'); goog.require('ol.source.State'); +goog.require('ol.vec.Mat4'); @@ -56,6 +58,12 @@ ol.renderer.canvas.Map = function(container, map) { this.context_ = /** @type {CanvasRenderingContext2D} */ (this.canvas_.getContext('2d')); + /** + * @private + * @type {!goog.vec.Mat4.Number} + */ + this.transform_ = goog.vec.Mat4.createNumber(); + }; goog.inherits(ol.renderer.canvas.Map, ol.renderer.Map); @@ -87,8 +95,17 @@ ol.renderer.canvas.Map.prototype.dispatchComposeEvent_ = var map = this.getMap(); var context = this.context_; if (map.hasListener(type)) { + var view2DState = frameState.view2DState; + var devicePixelRatio = frameState.devicePixelRatio; + ol.vec.Mat4.makeTransform2D(this.transform_, + this.canvas_.width / 2, + this.canvas_.height / 2, + devicePixelRatio / view2DState.resolution, + -devicePixelRatio / view2DState.resolution, + -view2DState.rotation, + -view2DState.center[0], -view2DState.center[1]); var render = new ol.render.canvas.Immediate( - context, frameState.extent, frameState.coordinateToPixelMatrix); + context, frameState.extent, this.transform_); var composeEvent = new ol.render.Event(type, map, render, frameState, context, null); map.dispatchEvent(composeEvent); @@ -121,11 +138,12 @@ ol.renderer.canvas.Map.prototype.renderFrame = function(frameState) { } var context = this.context_; - - var size = frameState.size; - if (this.canvas_.width != size[0] || this.canvas_.height != size[1]) { - this.canvas_.width = size[0]; - this.canvas_.height = size[1]; + var ratio = frameState.devicePixelRatio; + var width = frameState.size[0] * ratio; + var height = frameState.size[1] * ratio; + if (this.canvas_.width != width || this.canvas_.height != height) { + this.canvas_.width = width; + this.canvas_.height = height; } else { context.clearRect(0, 0, this.canvas_.width, this.canvas_.height); } diff --git a/src/ol/renderer/canvas/canvastilelayerrenderer.js b/src/ol/renderer/canvas/canvastilelayerrenderer.js index db5919be45..c24e597615 100644 --- a/src/ol/renderer/canvas/canvastilelayerrenderer.js +++ b/src/ol/renderer/canvas/canvastilelayerrenderer.js @@ -382,10 +382,12 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = this.scheduleExpireCache(frameState, tileSource); this.updateLogos(frameState, tileSource); + var devicePixelRatio = frameState.devicePixelRatio; ol.vec.Mat4.makeTransform2D(this.imageTransform_, - frameState.size[0] / 2, frameState.size[1] / 2, - tileResolution / view2DState.resolution, - tileResolution / view2DState.resolution, + devicePixelRatio * frameState.size[0] / 2, + devicePixelRatio * frameState.size[1] / 2, + devicePixelRatio * tileResolution / view2DState.resolution, + devicePixelRatio * tileResolution / view2DState.resolution, view2DState.rotation, (origin[0] - center[0]) / tileResolution, (center[1] - origin[1]) / tileResolution);