ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Remove snapToPixel option and deprecate getters/setters

Browse Source
This commit is contained in:
ahocevar
2018-08-09 18:12:59 +02:00
parent dbdaa73cf2
commit f382ddf230
12 changed files with 118 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
changelog/upgrade-notes.md
View File

@@ -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

3
examples/dynamic-data.js
View File

@@ -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'})
})
});

1
examples/feature-animation.js
View File

@@ -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

1
examples/feature-move-animation.js
View File

@@ -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

2
examples/street-labels.html
View File

@@ -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"

6
src/ol/style/Circle.js
View File

@@ -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());

12
src/ol/style/Icon.js
View File

@@ -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()
});

219
src/ol/style/Image.js
View File

@@ -9,7 +9,6 @@
* @property {boolean} rotateWithView
* @property {number} rotation
* @property {number} scale
* @property {boolean} snapToPixel
*/
@@ -27,208 +26,200 @@ class ImageStyle {
constructor(options) {
/**
* @private
* @type {number}
*/
* @private
* @type {number}
*/
this.opacity_ = options.opacity;
/**
* @private
* @type {boolean}
*/
* @private
* @type {boolean}
*/
this.rotateWithView_ = options.rotateWithView;
/**
* @private
* @type {number}
*/
* @private
* @type {number}
*/
this.rotation_ = options.rotation;
/**
* @private
* @type {number}
*/
* @private
* @type {number}
*/
this.scale_ = options.scale;
/**
* @private
* @type {boolean}
*/
this.snapToPixel_ = options.snapToPixel;
}
/**
* Get the symbolizer opacity.
* @return {number} Opacity.
* @api
*/
* Get the symbolizer opacity.
* @return {number} Opacity.
* @api
*/
getOpacity() {
return this.opacity_;
}
/**
* Determine whether the symbolizer rotates with the map.
* @return {boolean} Rotate with map.
* @api
*/
* Determine whether the symbolizer rotates with the map.
* @return {boolean} Rotate with map.
* @api
*/
getRotateWithView() {
return this.rotateWithView_;
}
/**
* Get the symoblizer rotation.
* @return {number} Rotation.
* @api
*/
* Get the symoblizer rotation.
* @return {number} Rotation.
* @api
*/
getRotation() {
return this.rotation_;
}
/**
* Get the symbolizer scale.
* @return {number} Scale.
* @api
*/
* Get the symbolizer scale.
* @return {number} Scale.
* @api
*/
getScale() {
return this.scale_;
}
/**
* Determine whether the symbolizer should be snapped to a pixel.
* @return {boolean} The symbolizer should snap to a pixel.
* @api
*/
* This method is deprecated and always returns false.
* @return {boolean} false.
* @deprecated
* @api
*/
getSnapToPixel() {
return this.snapToPixel_;
return false;
}
/**
* Get the anchor point in pixels. The anchor determines the center point for the
* symbolizer.
* @abstract
* @return {Array<number>} Anchor.
*/
* Get the anchor point in pixels. The anchor determines the center point for the
* symbolizer.
* @abstract
* @return {Array<number>} Anchor.
*/
getAnchor() {}
/**
* Get the image element for the symbolizer.
* @abstract
* @param {number} pixelRatio Pixel ratio.
* @return {HTMLCanvasElement|HTMLVideoElement|HTMLImageElement} Image element.
*/
* Get the image element for the symbolizer.
* @abstract
* @param {number} pixelRatio Pixel ratio.
* @return {HTMLCanvasElement|HTMLVideoElement|HTMLImageElement} Image element.
*/
getImage(pixelRatio) {}
/**
* @abstract
* @param {number} pixelRatio Pixel ratio.
* @return {HTMLCanvasElement|HTMLVideoElement|HTMLImageElement} Image element.
*/
* @abstract
* @param {number} pixelRatio Pixel ratio.
* @return {HTMLCanvasElement|HTMLVideoElement|HTMLImageElement} Image element.
*/
getHitDetectionImage(pixelRatio) {}
/**
* @abstract
* @return {module:ol/ImageState} Image state.
*/
* @abstract
* @return {module:ol/ImageState} Image state.
*/
getImageState() {}
/**
* @abstract
* @return {module:ol/size~Size} Image size.
*/
* @abstract
* @return {module:ol/size~Size} Image size.
*/
getImageSize() {}
/**
* @abstract
* @return {module:ol/size~Size} Size of the hit-detection image.
*/
* @abstract
* @return {module:ol/size~Size} Size of the hit-detection image.
*/
getHitDetectionImageSize() {}
/**
* Get the origin of the symbolizer.
* @abstract
* @return {Array<number>} Origin.
*/
* Get the origin of the symbolizer.
* @abstract
* @return {Array<number>} Origin.
*/
getOrigin() {}
/**
* Get the size of the symbolizer (in pixels).
* @abstract
* @return {module:ol/size~Size} Size.
*/
* Get the size of the symbolizer (in pixels).
* @abstract
* @return {module:ol/size~Size} Size.
*/
getSize() {}
/**
* Set the opacity.
*
* @param {number} opacity Opacity.
* @api
*/
* Set the opacity.
*
* @param {number} opacity Opacity.
* @api
*/
setOpacity(opacity) {
this.opacity_ = opacity;
}
/**
* Set whether to rotate the style with the view.
*
* @param {boolean} rotateWithView Rotate with map.
* @api
*/
* Set whether to rotate the style with the view.
*
* @param {boolean} rotateWithView Rotate with map.
* @api
*/
setRotateWithView(rotateWithView) {
this.rotateWithView_ = rotateWithView;
}
/**
* Set the rotation.
*
* @param {number} rotation Rotation.
* @api
*/
* Set the rotation.
*
* @param {number} rotation Rotation.
* @api
*/
setRotation(rotation) {
this.rotation_ = rotation;
}
/**
* Set the scale.
*
* @param {number} scale Scale.
* @api
*/
* Set the scale.
*
* @param {number} scale Scale.
* @api
*/
setScale(scale) {
this.scale_ = scale;
}
/**
* Set whether to snap the image to the closest pixel.
*
* @param {boolean} snapToPixel Snap to pixel?
* @api
*/
setSnapToPixel(snapToPixel) {
this.snapToPixel_ = snapToPixel;
}
* This method is deprecated and does nothing.
* @param {boolean} snapToPixel Snap to pixel?
* @deprecated
* @api
*/
setSnapToPixel(snapToPixel) {}
/**
* @abstract
* @param {function(this: T, module:ol/events/Event)} listener Listener function.
* @param {T} thisArg Value to use as `this` when executing `listener`.
* @return {module:ol/events~EventsKey|undefined} Listener key.
* @template T
*/
* @abstract
* @param {function(this: T, module:ol/events/Event)} listener Listener function.
* @param {T} thisArg Value to use as `this` when executing `listener`.
* @return {module:ol/events~EventsKey|undefined} Listener key.
* @template T
*/
listenImageChange(listener, thisArg) {}
/**
* Load not yet loaded URI.
* @abstract
*/
* Load not yet loaded URI.
* @abstract
*/
load() {}
/**
* @abstract
* @param {function(this: T, module:ol/events/Event)} listener Listener function.
* @param {T} thisArg Value to use as `this` when executing `listener`.
* @template T
*/
* @abstract
* @param {function(this: T, module:ol/events/Event)} listener Listener function.
* @param {T} thisArg Value to use as `this` when executing `listener`.
* @template T
*/
unlistenImageChange(listener, thisArg) {}
}

14
src/ol/style/RegularShape.js
View File

@@ -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(),

4
test/spec/ol/style/circle.test.js
View File

@@ -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());
});

2
test/spec/ol/style/icon.test.js
View File

@@ -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

2
test/spec/ol/style/regularshape.test.js
View File

@@ -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());
});