Add snapToPixel

src/ol/render/canvas/canvasrender.js

@@ -1,5 +1,6 @@
 // FIXME complete missing functionality
 // FIXME factor out drawImage
+// FIXME apply snapToPixel
 // FIXME factor out moveTo/lineTo
 
 goog.provide('ol.render.canvas.Render');

src/ol/render/canvas/canvasreplay.js

@@ -1,3 +1,5 @@
+// FIXME decide default snapToPixel behaviour
+
 goog.provide('ol.render.canvas.BatchGroup');
 
 goog.require('goog.array');
@@ -108,10 +110,13 @@ ol.render.canvas.Batch.prototype.draw = function(context, transform) {
       end = /** @type {number} */ (instruction[1]);
       var imageStyle = /** @type {ol.style.Image} */ (instruction[2]);
       for (; i < end; i += 2) {
-        context.drawImage(
+        var x = pixelCoordinates[i] - imageStyle.anchor[0];
-            imageStyle.image,
+        var y = pixelCoordinates[i + 1] - imageStyle.anchor[1];
-            pixelCoordinates[i] - imageStyle.anchor[0],
+        if (imageStyle.snapToPixel) {
-            pixelCoordinates[i + 1] - imageStyle.anchor[1]);
+          x = (x + 0.5) | 0;
+          y = (y + 0.5) | 0;
+        }
+        context.drawImage(imageStyle.image, x, y);
       }
     } else if (type == ol.render.canvas.Instruction.FILL) {
       context.fill();

src/ol/style.js

@@ -1,4 +1,5 @@
 // FIXME decide how to handle fill opacity
+// FIXME decide default value for snapToPixel
 
 goog.provide('ol.style');
 goog.provide('ol.style.DefaultStyleFunction');
@@ -32,6 +33,7 @@ ol.style.fill.equals = function(fillStyle1, fillStyle2) {
  * @typedef {{anchor: Array.<number>,
  *            image: (HTMLCanvasElement|HTMLVideoElement|Image),
  *            rotation: number,
+ *            snapToPixel: (boolean|undefined),
  *            subtractViewRotation: boolean}}
  */
 ol.style.Image;
@@ -89,6 +91,7 @@ ol.style.DEFAULT_IMAGE_STYLE = {
   anchor: [0, 0],
   image: null, // FIXME
   rotation: 0.0,
+  snapToPixel: undefined,
   subtractViewRotation: false
 };
 

src/ol/symbols.js

@@ -40,6 +40,7 @@ ol.symbol.renderCircle = function(radius, fillStyle, strokeStyle) {
     anchor: [size / 2, size / 2],
     image: canvas,
     rotation: 0,
+    snapToPixel: undefined,
     subtractViewRotation: false
   };