Remove snapToPixel option and deprecate getters/setters

changelog/upgrade-notes.md

@@ -1,5 +1,15 @@
 ## Upgrade notes
 
+### Next version
+
+#### Removal of the `snapToPixel` option for `ol/style/Image` subclasses
+
+The `snapToPixel` option has been removed, and the `getSnapToPixel` and `setSnapToPixel` methods are deprecated.
+
+The renderer now snaps to integer pixels when no interaction or animation is running to get crisp rendering. During interaction or animation, it does not snap to integer pixels to avoid jitter.
+
+When rendering with the Immediate API, symbols will no longer be snapped to integer pixels. To get crisp images, set `context.imageSmoothingEnabled = false` before rendering with the Immediate API, and `context.imageSmoothingEnabled = true` afterwards.
+
 ### v5.1.0
 
 #### Geometry constructor and `setCoordinates` no longer accept `null` coordinates

examples/dynamic-data.js

@@ -22,7 +22,6 @@ const map = new Map({
 const imageStyle = new Style({
   image: new CircleStyle({
     radius: 5,
-    snapToPixel: false,
     fill: new Fill({color: 'yellow'}),
     stroke: new Stroke({color: 'red', width: 1})
   })
@@ -31,7 +30,6 @@ const imageStyle = new Style({
 const headInnerImageStyle = new Style({
   image: new CircleStyle({
     radius: 2,
-    snapToPixel: false,
     fill: new Fill({color: 'blue'})
   })
 });
@@ -39,7 +37,6 @@ const headInnerImageStyle = new Style({
 const headOuterImageStyle = new Style({
   image: new CircleStyle({
     radius: 5,
-    snapToPixel: false,
     fill: new Fill({color: 'black'})
   })
 });

examples/feature-animation.js

@@ -65,7 +65,6 @@ function flash(feature) {
     const style = new Style({
       image: new CircleStyle({
         radius: radius,
-        snapToPixel: false,
         stroke: new Stroke({
           color: 'rgba(255, 0, 0, ' + opacity + ')',
           width: 0.25 + opacity

examples/feature-move-animation.js

@@ -94,7 +94,6 @@ const styles = {
   'geoMarker': new Style({
     image: new CircleStyle({
       radius: 7,
-      snapToPixel: false,
       fill: new Fill({color: 'black'}),
       stroke: new Stroke({
         color: 'white', width: 2

examples/street-labels.html

@@ -1,7 +1,7 @@
 ---
 layout: example.html
 title: Street Labels
-shortdesc: Render street names with a custom render.
+shortdesc: Render street names.
 docs: >
   Example showing the use of a text style with `placement: 'line'` to render text along a path.
 tags: "vector, label, streets"

src/ol/style/Circle.js

@@ -9,10 +9,6 @@ import RegularShape from '../style/RegularShape.js';
  * @typedef {Object} Options
  * @property {module:ol/style/Fill} [fill] Fill style.
  * @property {number} radius Circle radius.
- * @property {boolean} [snapToPixel=true] If `true` integral numbers of pixels are used as the X and Y pixel coordinate
- * when drawing the circle in the output canvas. If `false` fractional numbers may be used. Using `true` allows for
- * "sharp" rendering (no blur), while using `false` allows for "accurate" rendering. Note that accuracy is important if
- * the circle's position is animated. Without it, the circle may jitter noticeably.
  * @property {module:ol/style/Stroke} [stroke] Stroke style.
  * @property {module:ol/style/AtlasManager} [atlasManager] The atlas manager to use for this circle.
  * When using WebGL it is recommended to use an atlas manager to avoid texture switching. If an atlas manager is given,
@@ -37,7 +33,6 @@ class CircleStyle extends RegularShape {
       points: Infinity,
       fill: options.fill,
       radius: options.radius,
-      snapToPixel: options.snapToPixel,
       stroke: options.stroke,
       atlasManager: options.atlasManager
     });
@@ -55,7 +50,6 @@ class CircleStyle extends RegularShape {
       fill: this.getFill() ? this.getFill().clone() : undefined,
       stroke: this.getStroke() ? this.getStroke().clone() : undefined,
       radius: this.getRadius(),
-      snapToPixel: this.getSnapToPixel(),
       atlasManager: this.atlasManager_
     });
     style.setOpacity(this.getOpacity());

src/ol/style/Icon.js

@@ -38,10 +38,6 @@ import ImageStyle from '../style/Image.js';
  * `top-left` or `top-right`. Default is `top-left`.
  * @property {number} [opacity=1] Opacity of the icon.
  * @property {number} [scale=1] Scale.
- * @property {boolean} [snapToPixel=true] If `true` integral numbers of pixels are used as the X and Y pixel coordinate
- * when drawing the icon in the output canvas. If `false` fractional numbers may be used. Using `true` allows for
- * "sharp" rendering (no blur), while using `false` allows for "accurate" rendering. Note that accuracy is important if
- * the icon's position is animated. Without it, the icon may jitter noticeably.
  * @property {boolean} [rotateWithView=false] Whether to rotate the icon with the view.
  * @property {number} [rotation=0] Rotation in radians (positive rotation clockwise).
  * @property {module:ol/size~Size} [size] Icon size in pixel. Can be used together with `offset` to define the
@@ -85,17 +81,10 @@ class Icon extends ImageStyle {
     const rotateWithView = options.rotateWithView !== undefined ?
       options.rotateWithView : false;
 
-    /**
-     * @type {boolean}
-     */
-    const snapToPixel = options.snapToPixel !== undefined ?
-      options.snapToPixel : true;
-
     super({
       opacity: opacity,
       rotation: rotation,
       scale: scale,
-      snapToPixel: snapToPixel,
       rotateWithView: rotateWithView
     });
 
@@ -230,7 +219,6 @@ class Icon extends ImageStyle {
       size: this.size_ !== null ? this.size_.slice() : undefined,
       opacity: this.getOpacity(),
       scale: this.getScale(),
-      snapToPixel: this.getSnapToPixel(),
       rotation: this.getRotation(),
       rotateWithView: this.getRotateWithView()
     });

src/ol/style/Image.js

@@ -9,7 +9,6 @@
  * @property {boolean} rotateWithView
  * @property {number} rotation
  * @property {number} scale
- * @property {boolean} snapToPixel
  */
 
 
@@ -50,12 +49,6 @@ class ImageStyle {
      */
     this.scale_ = options.scale;
 
-    /**
-    * @private
-    * @type {boolean}
-    */
-    this.snapToPixel_ = options.snapToPixel;
-
   }
 
   /**
@@ -95,12 +88,13 @@ class ImageStyle {
   }
 
   /**
-  * Determine whether the symbolizer should be snapped to a pixel.
-  * @return {boolean} The symbolizer should snap to a pixel.
+   * This method is deprecated and always returns false.
+   * @return {boolean} false.
+   * @deprecated
    * @api
    */
   getSnapToPixel() {
-    return this.snapToPixel_;
+    return false;
   }
 
   /**
@@ -187,7 +181,6 @@ class ImageStyle {
   setRotation(rotation) {
     this.rotation_ = rotation;
   }
-
   /**
    * Set the scale.
    *
@@ -199,14 +192,12 @@ class ImageStyle {
   }
 
   /**
-  * Set whether to snap the image to the closest pixel.
-  *
+   * This method is deprecated and does nothing.
    * @param {boolean} snapToPixel Snap to pixel?
+   * @deprecated
    * @api
    */
-  setSnapToPixel(snapToPixel) {
-    this.snapToPixel_ = snapToPixel;
-  }
+  setSnapToPixel(snapToPixel) {}
 
   /**
    * @abstract

src/ol/style/RegularShape.js

@@ -20,10 +20,6 @@ import ImageStyle from '../style/Image.js';
  * @property {number} [radius1] Outer radius of a star.
  * @property {number} [radius2] Inner radius of a star.
  * @property {number} [angle=0] Shape's angle in radians. A value of 0 will have one of the shape's point facing up.
- * @property {boolean} [snapToPixel=true] If `true` integral numbers of pixels are used as the X and Y pixel coordinate
- * when drawing the shape in the output canvas. If `false` fractional numbers may be used. Using `true` allows for
- * "sharp" rendering (no blur), while using `false` allows for "accurate" rendering. Note that accuracy is important if
- * the shape's position is animated. Without it, the shape may jitter noticeably.
  * @property {module:ol/style/Stroke} [stroke] Stroke style.
  * @property {number} [rotation=0] Rotation in radians (positive rotation clockwise).
  * @property {boolean} [rotateWithView=false] Whether to rotate the shape with the view.
@@ -58,12 +54,6 @@ class RegularShape extends ImageStyle {
    * @param {module:ol/style/RegularShape~Options} options Options.
    */
   constructor(options) {
-    /**
-     * @type {boolean}
-     */
-    const snapToPixel = options.snapToPixel !== undefined ?
-      options.snapToPixel : true;
-
     /**
      * @type {boolean}
      */
@@ -74,8 +64,7 @@ class RegularShape extends ImageStyle {
       opacity: 1,
       rotateWithView: rotateWithView,
       rotation: options.rotation !== undefined ? options.rotation : 0,
-      scale: 1,
-      snapToPixel: snapToPixel
+      scale: 1
     });
 
     /**
@@ -185,7 +174,6 @@ class RegularShape extends ImageStyle {
       radius: this.getRadius(),
       radius2: this.getRadius2(),
       angle: this.getAngle(),
-      snapToPixel: this.getSnapToPixel(),
       stroke: this.getStroke() ? this.getStroke().clone() : undefined,
       rotation: this.getRotation(),
       rotateWithView: this.getRotateWithView(),

test/spec/ol/style/circle.test.js

@@ -91,8 +91,7 @@ describe('ol.style.Circle', function() {
         stroke: new Stroke({
           color: '#319FD3'
         }),
-        radius: 5,
-        snapToPixel: false
+        radius: 5
       });
       original.setOpacity(0.5);
       original.setScale(1.5);
@@ -101,7 +100,6 @@ describe('ol.style.Circle', function() {
       expect(original.getOpacity()).to.eql(clone.getOpacity());
       expect(original.getRadius()).to.eql(clone.getRadius());
       expect(original.getScale()).to.eql(clone.getScale());
-      expect(original.getSnapToPixel()).to.eql(clone.getSnapToPixel());
       expect(original.getStroke().getColor()).to.eql(clone.getStroke().getColor());
     });
 

test/spec/ol/style/icon.test.js

@@ -61,7 +61,6 @@ describe('ol.style.Icon', function() {
         offsetOrigin: 'bottom-left',
         opacity: 0.5,
         scale: 2,
-        snapToPixel: false,
         rotation: 4,
         size: [10, 12]
       });
@@ -82,7 +81,6 @@ describe('ol.style.Icon', function() {
       expect(original.getOpacity()).to.eql(clone.getOpacity());
       expect(original.getRotation()).to.eql(clone.getRotation());
       expect(original.getRotateWithView()).to.eql(clone.getRotateWithView());
-      expect(original.getSnapToPixel()).to.eql(clone.getSnapToPixel());
 
       const original2 = new Icon({
         src: src

test/spec/ol/style/regularshape.test.js

@@ -121,7 +121,6 @@ describe('ol.style.RegularShape', function() {
         radius: 4,
         radius2: 6,
         angle: 1,
-        snapToPixel: false,
         stroke: new Stroke({
           color: '#319FD3'
         }),
@@ -140,7 +139,6 @@ describe('ol.style.RegularShape', function() {
       expect(original.getRotation()).to.eql(clone.getRotation());
       expect(original.getRotateWithView()).to.eql(clone.getRotateWithView());
       expect(original.getScale()).to.eql(clone.getScale());
-      expect(original.getSnapToPixel()).to.eql(clone.getSnapToPixel());
       expect(original.getStroke().getColor()).to.eql(clone.getStroke().getColor());
     });