Compare commits

...

5 Commits

Author SHA1 Message Date
Andreas Hocevar
43637e2de8 Temporary release changes for v4.6.0-beta.1 2017-11-30 10:27:43 +01:00
Andreas Hocevar
0d1dead5c1 Add pixel ratio to label cache key 2017-11-30 10:24:14 +01:00
Andreas Hocevar
9c1561a496 Fix tests 2017-11-30 10:24:14 +01:00
Andreas Hocevar
84fd7477ed Improve vertical font placement in Firefox 2017-11-30 10:24:14 +01:00
Andreas Hocevar
23ccd0e56e Snap view center to pixel 2017-11-30 10:24:14 +01:00
18 changed files with 108 additions and 99 deletions

View File

@@ -1,6 +1,6 @@
{ {
"name": "openlayers", "name": "openlayers",
"version": "4.5.0", "version": "4.6.0-beta.1",
"description": "Build tools and sources for developing OpenLayers based mapping applications", "description": "Build tools and sources for developing OpenLayers based mapping applications",
"keywords": [ "keywords": [
"map", "map",

View File

@@ -1139,11 +1139,15 @@ ol.PluggableMap.prototype.renderFrame_ = function(time) {
layerStates[ol.getUid(layerStatesArray[i].layer)] = layerStatesArray[i]; layerStates[ol.getUid(layerStatesArray[i].layer)] = layerStatesArray[i];
} }
viewState = view.getState(); viewState = view.getState();
var center = viewState.center;
var pixelResolution = viewState.resolution / this.pixelRatio_;
center[0] = Math.round(center[0] / pixelResolution) * pixelResolution;
center[1] = Math.round(center[1] / pixelResolution) * pixelResolution;
frameState = /** @type {olx.FrameState} */ ({ frameState = /** @type {olx.FrameState} */ ({
animate: false, animate: false,
coordinateToPixelTransform: this.coordinateToPixelTransform_, coordinateToPixelTransform: this.coordinateToPixelTransform_,
extent: extent, extent: extent,
focus: !this.focus_ ? viewState.center : this.focus_, focus: !this.focus_ ? center : this.focus_,
index: this.frameIndex_++, index: this.frameIndex_++,
layerStates: layerStates, layerStates: layerStates,
layerStatesArray: layerStatesArray, layerStatesArray: layerStatesArray,

View File

@@ -281,7 +281,7 @@ ol.render.canvas.TextReplay.prototype.drawText = function(geometry, feature) {
*/ */
ol.render.canvas.TextReplay.prototype.getImage = function(text, textKey, fillKey, strokeKey) { ol.render.canvas.TextReplay.prototype.getImage = function(text, textKey, fillKey, strokeKey) {
var label; var label;
var key = strokeKey + textKey + text + fillKey; var key = strokeKey + textKey + text + fillKey + this.pixelRatio;
var labelCache = ol.render.canvas.labelCache; var labelCache = ol.render.canvas.labelCache;
if (!labelCache.containsKey(key)) { if (!labelCache.containsKey(key)) {
@@ -323,19 +323,19 @@ ol.render.canvas.TextReplay.prototype.getImage = function(text, textKey, fillKey
if (fillKey) { if (fillKey) {
context.fillStyle = fillState.fillStyle; context.fillStyle = fillState.fillStyle;
} }
context.textBaseline = 'top'; context.textBaseline = 'middle';
context.textAlign = 'center'; context.textAlign = 'center';
var leftRight = (0.5 - align); var leftRight = (0.5 - align);
var x = align * label.width / scale + leftRight * strokeWidth; var x = align * label.width / scale + leftRight * strokeWidth;
var i; var i;
if (strokeKey) { if (strokeKey) {
for (i = 0; i < numLines; ++i) { for (i = 0; i < numLines; ++i) {
context.strokeText(lines[i], x + leftRight * widths[i], 0.5 * strokeWidth + i * lineHeight); context.strokeText(lines[i], x + leftRight * widths[i], 0.5 * (strokeWidth + lineHeight) + i * lineHeight);
} }
} }
if (fillKey) { if (fillKey) {
for (i = 0; i < numLines; ++i) { for (i = 0; i < numLines; ++i) {
context.fillText(lines[i], x + leftRight * widths[i], 0.5 * strokeWidth + i * lineHeight); context.fillText(lines[i], x + leftRight * widths[i], 0.5 * (strokeWidth + lineHeight) + i * lineHeight);
} }
} }
} }

View File

@@ -21,7 +21,7 @@ BUILDS=dist
# #
# URL for canonical repo. # URL for canonical repo.
# #
REMOTE=https://github.com/openlayers/openlayers.git REMOTE=https://github.com/ahocevar/openlayers.git
# #
# Display usage and exit. # Display usage and exit.
@@ -98,7 +98,7 @@ main() {
npm install npm install
build_js ${PROFILES} build_js ${PROFILES}
build_css build_css
npm publish npm publish --tag beta
} }
if test ${#} -ne 1; then if test ${#} -ne 1; then

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.6 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.6 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

View File

@@ -163,7 +163,7 @@ describe('ol.rendering.style.Text', function() {
it('renders correct stroke with pixelRatio != 1', function(done) { it('renders correct stroke with pixelRatio != 1', function(done) {
createMap('canvas', 2); createMap('canvas', 2);
createFeatures(); createFeatures();
expectResemble(map, 'rendering/ol/style/expected/text-canvas-hidpi.png', 2.8, done); expectResemble(map, 'rendering/ol/style/expected/text-canvas-hidpi.png', 2.9, done);
}); });
it('renders text correctly with scale != 1', function(done) { it('renders text correctly with scale != 1', function(done) {
@@ -260,6 +260,101 @@ describe('ol.rendering.style.Text', function() {
expectResemble(map, 'rendering/ol/style/expected/text-align-offset-canvas.png', 6, done); expectResemble(map, 'rendering/ol/style/expected/text-align-offset-canvas.png', 6, done);
}); });
it('renders text along a MultiLineString', function(done) {
createMap('canvas');
var line = new ol.geom.LineString();
line.setFlatCoordinates('XY', nicePath);
var geom = new ol.geom.MultiLineString(null);
geom.appendLineString(line);
line = line.clone();
line.translate(0, 50);
geom.appendLineString(line);
line = line.clone();
line.translate(0, -100);
geom.appendLineString(line);
var feature = new ol.Feature(geom);
feature.setStyle(new ol.style.Style({
text: new ol.style.Text({
text: 'Hello world',
placement: 'line',
font: 'bold 30px sans-serif'
})
}));
vectorSource.addFeature(feature);
map.getView().fit(vectorSource.getExtent());
expectResemble(map, 'rendering/ol/style/expected/text-multilinestring.png', 7, done);
});
it('renders text along a Polygon', function(done) {
createMap('canvas');
var geom = new ol.geom.Polygon(null);
geom.setFlatCoordinates('XY', polygon, [polygon.length]);
var feature = new ol.Feature(geom);
feature.setStyle(new ol.style.Style({
text: new ol.style.Text({
text: 'Hello world',
font: 'bold 24px sans-serif',
placement: 'line',
overflow: true
})
}));
vectorSource.addFeature(feature);
map.getView().fit(vectorSource.getExtent());
expectResemble(map, 'rendering/ol/style/expected/text-polygon.png', IMAGE_TOLERANCE, done);
});
it('renders text along a MultiPolygon', function(done) {
createMap('canvas');
var geom = new ol.geom.Polygon(null);
geom.setFlatCoordinates('XY', polygon, [polygon.length]);
var multiPolygon = new ol.geom.MultiPolygon(null);
multiPolygon.appendPolygon(geom);
geom = geom.clone();
geom.translate(0, 30);
multiPolygon.appendPolygon(geom);
geom = geom.clone();
geom.translate(0, -60);
multiPolygon.appendPolygon(geom);
var feature = new ol.Feature(multiPolygon);
feature.setStyle(new ol.style.Style({
text: new ol.style.Text({
text: 'Hello world',
font: 'bold 24px sans-serif',
placement: 'line',
overflow: true
})
}));
vectorSource.addFeature(feature);
map.getView().fit(vectorSource.getExtent());
expectResemble(map, 'rendering/ol/style/expected/text-multipolygon.png', 4.4, done);
});
it('renders text background', function(done) {
createMap('canvas');
createFeatures();
var features = vectorSource.getFeatures();
features[0].getStyle().getText().setBackgroundFill(new ol.style.Fill({
color: 'red'
}));
features[1].getStyle().getText().setBackgroundFill(new ol.style.Fill({
color: 'red'
}));
features[1].getStyle().getText().setBackgroundStroke(new ol.style.Stroke({
color: 'blue',
width: 3
}));
features[2].getStyle().getText().setBackgroundFill(new ol.style.Fill({
color: 'red'
}));
features[2].getStyle().getText().setBackgroundStroke(new ol.style.Stroke({
color: 'blue',
width: 3
}));
features[2].getStyle().getText().setPadding([5, 10, 15, 0]);
map.getView().fit(vectorSource.getExtent());
expectResemble(map, 'rendering/ol/style/expected/text-background.png', IMAGE_TOLERANCE, done);
});
describe('Text along an ugly upside down path, keep text upright', function() { describe('Text along an ugly upside down path, keep text upright', function() {
it('renders text along a linestring with auto-align', function(done) { it('renders text along a linestring with auto-align', function(done) {
@@ -347,97 +442,7 @@ describe('ol.rendering.style.Text', function() {
createLineString(nicePath, 'left'); createLineString(nicePath, 'left');
expectResemble(map, 'rendering/ol/style/expected/text-linestring-left-nice-rotated.png', 4.5, done); expectResemble(map, 'rendering/ol/style/expected/text-linestring-left-nice-rotated.png', 4.5, done);
}); });
});
it('renders text along a MultiLineString', function(done) {
createMap('canvas');
var line = new ol.geom.LineString();
line.setFlatCoordinates('XY', nicePath);
var geom = new ol.geom.MultiLineString(null);
geom.appendLineString(line);
line.translate(0, 50);
geom.appendLineString(line);
line.translate(0, -100);
geom.appendLineString(line);
var feature = new ol.Feature(geom);
feature.setStyle(new ol.style.Style({
text: new ol.style.Text({
text: 'Hello world',
placement: 'line',
font: 'bold 30px sans-serif'
})
}));
vectorSource.addFeature(feature);
map.getView().fit(vectorSource.getExtent());
expectResemble(map, 'rendering/ol/style/expected/text-multilinestring.png', 7, done);
});
it('renders text along a Polygon', function(done) {
createMap('canvas');
var geom = new ol.geom.Polygon(null);
geom.setFlatCoordinates('XY', polygon, [polygon.length]);
var feature = new ol.Feature(geom);
feature.setStyle(new ol.style.Style({
text: new ol.style.Text({
text: 'Hello world',
font: 'bold 24px sans-serif',
placement: 'line',
overflow: true
})
}));
vectorSource.addFeature(feature);
map.getView().fit(vectorSource.getExtent());
expectResemble(map, 'rendering/ol/style/expected/text-polygon.png', IMAGE_TOLERANCE, done);
});
it('renders text along a MultiPolygon', function(done) {
createMap('canvas');
var geom = new ol.geom.Polygon(null);
geom.setFlatCoordinates('XY', polygon, [polygon.length]);
var multiPolygon = new ol.geom.MultiPolygon(null);
multiPolygon.appendPolygon(geom);
geom.translate(0, 30);
multiPolygon.appendPolygon(geom);
geom.translate(0, -60);
multiPolygon.appendPolygon(geom);
var feature = new ol.Feature(multiPolygon);
feature.setStyle(new ol.style.Style({
text: new ol.style.Text({
text: 'Hello world',
font: 'bold 24px sans-serif',
placement: 'line',
overflow: true
})
}));
vectorSource.addFeature(feature);
map.getView().fit(vectorSource.getExtent());
expectResemble(map, 'rendering/ol/style/expected/text-multipolygon.png', 4.4, done);
});
it('renders text background', function(done) {
createMap('canvas');
createFeatures();
var features = vectorSource.getFeatures();
features[0].getStyle().getText().setBackgroundFill(new ol.style.Fill({
color: 'red'
}));
features[1].getStyle().getText().setBackgroundFill(new ol.style.Fill({
color: 'red'
}));
features[1].getStyle().getText().setBackgroundStroke(new ol.style.Stroke({
color: 'blue',
width: 3
}));
features[2].getStyle().getText().setBackgroundFill(new ol.style.Fill({
color: 'red'
}));
features[2].getStyle().getText().setBackgroundStroke(new ol.style.Stroke({
color: 'blue',
width: 3
}));
features[2].getStyle().getText().setPadding([5, 10, 15, 0]);
map.getView().fit(vectorSource.getExtent());
expectResemble(map, 'rendering/ol/style/expected/text-background.png', IMAGE_TOLERANCE, done);
}); });
where('WebGL').it('tests the webgl renderer without rotation', function(done) { where('WebGL').it('tests the webgl renderer without rotation', function(done) {