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

Handle pixelRatio on replay creation instead of replay

Browse Source
This commit is contained in:
Andreas Hocevar
2017-08-31 16:20:33 +02:00
parent 35bd92b713
commit 6469d3e864
10 changed files with 72 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/ol/render/canvas/imagereplay.js
View File

@@ -132,7 +132,7 @@ ol.render.canvas.ImageReplay.prototype.drawPoint = function(pointGeometry, featu
// Remaining arguments to DRAW_IMAGE are in alphabetical order
this.anchorX_, this.anchorY_, this.height_, this.opacity_,
this.originX_, this.originY_, this.rotateWithView_, this.rotation_,
this.scale_, this.snapToPixel_, this.width_
this.scale_ * this.pixelRatio, this.snapToPixel_, this.width_
]);
this.hitDetectionInstructions.push([
ol.render.canvas.Instruction.DRAW_IMAGE, myBegin, myEnd,

7
src/ol/render/canvas/linestringreplay.js
View File

@@ -130,7 +130,8 @@ ol.render.canvas.LineStringReplay.prototype.setStrokeStyle_ = function() {
state.lastStroke = 0;
this.instructions.push([
ol.render.canvas.Instruction.SET_STROKE_STYLE,
strokeStyle, lineWidth, lineCap, lineJoin, miterLimit, lineDash, lineDashOffset, true, 1
strokeStyle, lineWidth * this.pixelRatio, lineCap, lineJoin, miterLimit,
this.applyPixelRatio(lineDash), lineDashOffset * this.pixelRatio
], [
ol.render.canvas.Instruction.BEGIN_PATH
]);
@@ -160,7 +161,7 @@ ol.render.canvas.LineStringReplay.prototype.drawLineString = function(lineString
this.hitDetectionInstructions.push([
ol.render.canvas.Instruction.SET_STROKE_STYLE,
state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
state.miterLimit, state.lineDash, state.lineDashOffset, true, 1
state.miterLimit, state.lineDash, state.lineDashOffset
], [
ol.render.canvas.Instruction.BEGIN_PATH
]);
@@ -187,7 +188,7 @@ ol.render.canvas.LineStringReplay.prototype.drawMultiLineString = function(multi
this.hitDetectionInstructions.push([
ol.render.canvas.Instruction.SET_STROKE_STYLE,
state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
state.miterLimit, state.lineDash, state.lineDashOffset, true, 1
state.miterLimit, state.lineDash, state.lineDashOffset
], [
ol.render.canvas.Instruction.BEGIN_PATH
]);

9
src/ol/render/canvas/polygonreplay.js
View File

@@ -142,7 +142,7 @@ ol.render.canvas.PolygonReplay.prototype.drawCircle = function(circleGeometry, f
this.hitDetectionInstructions.push([
ol.render.canvas.Instruction.SET_STROKE_STYLE,
state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
state.miterLimit, state.lineDash, state.lineDashOffset, true, 1
state.miterLimit, state.lineDash, state.lineDashOffset
]);
}
var flatCoordinates = circleGeometry.getFlatCoordinates();
@@ -184,7 +184,7 @@ ol.render.canvas.PolygonReplay.prototype.drawPolygon = function(polygonGeometry,
this.hitDetectionInstructions.push([
ol.render.canvas.Instruction.SET_STROKE_STYLE,
state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
state.miterLimit, state.lineDash, state.lineDashOffset, true, 1
state.miterLimit, state.lineDash, state.lineDashOffset
]);
}
var ends = polygonGeometry.getEnds();
@@ -216,7 +216,7 @@ ol.render.canvas.PolygonReplay.prototype.drawMultiPolygon = function(multiPolygo
this.hitDetectionInstructions.push([
ol.render.canvas.Instruction.SET_STROKE_STYLE,
state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
state.miterLimit, state.lineDash, state.lineDashOffset, true, 1
state.miterLimit, state.lineDash, state.lineDashOffset
]);
}
var endss = multiPolygonGeometry.getEndss();
@@ -353,7 +353,8 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyles_ = function(geometr
state.currentMiterLimit != miterLimit) {
this.instructions.push([
ol.render.canvas.Instruction.SET_STROKE_STYLE,
strokeStyle, lineWidth, lineCap, lineJoin, miterLimit, lineDash, lineDashOffset, true, 1
strokeStyle, lineWidth * this.pixelRatio, lineCap, lineJoin, miterLimit,
this.applyPixelRatio(lineDash), lineDashOffset * this.pixelRatio
]);
state.currentStrokeStyle = strokeStyle;
state.currentLineCap = lineCap;

62
src/ol/render/canvas/replay.js
View File

@@ -51,6 +51,7 @@ ol.render.canvas.Replay = function(tolerance, maxExtent, resolution, pixelRatio,
* @type {number}
*/
this.pixelRatio = pixelRatio;
/**
* @protected
* @type {number}
@@ -133,6 +134,19 @@ ol.render.canvas.Replay = function(tolerance, maxExtent, resolution, pixelRatio,
ol.inherits(ol.render.canvas.Replay, ol.render.VectorContext);
/**
* @protected
* @param {Array.<number>} dashArray Dash array.
* @return {Array.<number>} Dash array with pixel ratio applied
*/
ol.render.canvas.Replay.prototype.applyPixelRatio = function(dashArray) {
var pixelRatio = this.pixelRatio;
return pixelRatio == 1 ? dashArray : dashArray.map(function(dash) {
return dash * pixelRatio;
});
};
/**
* @param {Array.<number>} flatCoordinates Flat coordinates.
* @param {number} offset Offset.
@@ -293,7 +307,6 @@ ol.render.canvas.Replay.prototype.fill_ = function(context, rotation) {
/**
* @private
* @param {CanvasRenderingContext2D} context Context.
* @param {number} pixelRatio Pixel ratio.
* @param {ol.Transform} transform Transform.
* @param {number} viewRotation View rotation.
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features
@@ -307,7 +320,7 @@ ol.render.canvas.Replay.prototype.fill_ = function(context, rotation) {
* @template T
*/
ol.render.canvas.Replay.prototype.replay_ = function(
context, pixelRatio, transform, viewRotation, skippedFeaturesHash,
context, transform, viewRotation, skippedFeaturesHash,
instructions, featureCallback, opt_hitExtent) {
/** @type {Array.<number>} */
var pixelCoordinates;
@@ -336,7 +349,7 @@ ol.render.canvas.Replay.prototype.replay_ = function(
var state = /** @type {olx.render.State} */ ({
context: context,
pixelRatio: pixelRatio,
pixelRatio: this.pixelRatio,
resolution: this.resolution,
rotation: viewRotation
});
@@ -422,16 +435,16 @@ ol.render.canvas.Replay.prototype.replay_ = function(
dd = /** @type {number} */ (instruction[2]);
var image = /** @type {HTMLCanvasElement|HTMLVideoElement|Image} */
(instruction[3]);
var scale = /** @type {number} */ (instruction[12]);
// Remaining arguments in DRAW_IMAGE are in alphabetical order
var anchorX = /** @type {number} */ (instruction[4]) * pixelRatio;
var anchorY = /** @type {number} */ (instruction[5]) * pixelRatio;
var anchorX = /** @type {number} */ (instruction[4]) * scale;
var anchorY = /** @type {number} */ (instruction[5]) * scale;
var height = /** @type {number} */ (instruction[6]);
var opacity = /** @type {number} */ (instruction[7]);
var originX = /** @type {number} */ (instruction[8]);
var originY = /** @type {number} */ (instruction[9]);
var rotateWithView = /** @type {boolean} */ (instruction[10]);
var rotation = /** @type {number} */ (instruction[11]);
var scale = /** @type {number} */ (instruction[12]);
var snapToPixel = /** @type {boolean} */ (instruction[13]);
var width = /** @type {number} */ (instruction[14]);
if (rotateWithView) {
@@ -444,11 +457,11 @@ ol.render.canvas.Replay.prototype.replay_ = function(
x = Math.round(x);
y = Math.round(y);
}
if (scale != 1 || rotation !== 0) {
if (rotation !== 0) {
var centerX = x + anchorX;
var centerY = y + anchorY;
ol.transform.compose(localTransform,
centerX, centerY, scale, scale, rotation, -centerX, -centerY);
centerX, centerY, 1, 1, rotation, -centerX, -centerY);
context.setTransform.apply(context, localTransform);
}
var alpha = context.globalAlpha;
@@ -460,12 +473,12 @@ ol.render.canvas.Replay.prototype.replay_ = function(
var h = (height + originY > image.height) ? image.height - originY : height;
context.drawImage(image, originX, originY, w, h,
x, y, w * pixelRatio, h * pixelRatio);
x, y, w * scale, h * scale);
if (opacity != 1) {
context.globalAlpha = alpha;
}
if (scale != 1 || rotation !== 0) {
if (rotation !== 0) {
context.setTransform.apply(context, resetTransform);
}
}
@@ -530,34 +543,18 @@ ol.render.canvas.Replay.prototype.replay_ = function(
++i;
break;
case ol.render.canvas.Instruction.SET_STROKE_STYLE:
var usePixelRatio = instruction[8] !== undefined ?
instruction[8] : true;
var renderedPixelRatio = instruction[9];
var lineWidth = /** @type {number} */ (instruction[2]);
if (pendingStroke) {
context.stroke();
pendingStroke = 0;
}
context.strokeStyle = /** @type {ol.ColorLike} */ (instruction[1]);
context.lineWidth = usePixelRatio ? lineWidth * pixelRatio : lineWidth;
context.lineWidth = /** @type {number} */ (instruction[2]);
context.lineCap = /** @type {string} */ (instruction[3]);
context.lineJoin = /** @type {string} */ (instruction[4]);
context.miterLimit = /** @type {number} */ (instruction[5]);
if (ol.has.CANVAS_LINE_DASH) {
var lineDash = /** @type {Array.<number>} */ (instruction[6]);
var lineDashOffset = /** @type {number} */ (instruction[7]);
if (usePixelRatio && pixelRatio !== renderedPixelRatio) {
lineDash = lineDash.map(function(dash) {
return dash * pixelRatio / renderedPixelRatio;
});
lineDashOffset *= pixelRatio / renderedPixelRatio;
instruction[6] = lineDash;
instruction[7] = lineDashOffset;
instruction[9] = pixelRatio;
}
context.lineDashOffset = lineDashOffset;
context.setLineDash(lineDash);
context.lineDashOffset = /** @type {number} */ (instruction[7]);
context.setLineDash(/** @type {Array.<number>} */ (instruction[6]));
}
++i;
break;
@@ -586,16 +583,15 @@ ol.render.canvas.Replay.prototype.replay_ = function(
/**
* @param {CanvasRenderingContext2D} context Context.
* @param {number} pixelRatio Pixel ratio.
* @param {ol.Transform} transform Transform.
* @param {number} viewRotation View rotation.
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features
* to skip.
*/
ol.render.canvas.Replay.prototype.replay = function(
context, pixelRatio, transform, viewRotation, skippedFeaturesHash) {
context, transform, viewRotation, skippedFeaturesHash) {
var instructions = this.instructions;
this.replay_(context, pixelRatio, transform, viewRotation,
this.replay_(context, transform, viewRotation,
skippedFeaturesHash, instructions, undefined, undefined);
};
@@ -617,7 +613,7 @@ ol.render.canvas.Replay.prototype.replayHitDetection = function(
context, transform, viewRotation, skippedFeaturesHash,
opt_featureCallback, opt_hitExtent) {
var instructions = this.hitDetectionInstructions;
return this.replay_(context, 1, transform, viewRotation,
return this.replay_(context, transform, viewRotation,
skippedFeaturesHash, instructions, opt_featureCallback, opt_hitExtent);
};

6
src/ol/render/canvas/replaygroup.js
View File

@@ -320,7 +320,6 @@ ol.render.canvas.ReplayGroup.prototype.isEmpty = function() {
/**
* @param {CanvasRenderingContext2D} context Context.
* @param {number} pixelRatio Pixel ratio.
* @param {ol.Transform} transform Transform.
* @param {number} viewRotation View rotation.
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features
@@ -328,7 +327,7 @@ ol.render.canvas.ReplayGroup.prototype.isEmpty = function() {
* @param {Array.<ol.render.ReplayType>=} opt_replayTypes Ordered replay types
* to replay. Default is {@link ol.render.replay.ORDER}
*/
ol.render.canvas.ReplayGroup.prototype.replay = function(context, pixelRatio,
ol.render.canvas.ReplayGroup.prototype.replay = function(context,
transform, viewRotation, skippedFeaturesHash, opt_replayTypes) {
/** @type {Array.<number>} */
@@ -353,8 +352,7 @@ ol.render.canvas.ReplayGroup.prototype.replay = function(context, pixelRatio,
for (j = 0, jj = replayTypes.length; j < jj; ++j) {
replay = replays[replayTypes[j]];
if (replay !== undefined) {
replay.replay(context, pixelRatio, transform, viewRotation,
skippedFeaturesHash);
replay.replay(context, transform, viewRotation, skippedFeaturesHash);
}
}
}

18
src/ol/render/canvas/textreplay.js
View File

@@ -210,16 +210,18 @@ ol.render.canvas.TextReplay.prototype.drawText = function(flatCoordinates, offse
var anchorX = align * label.width / pixelRatio + 2 * (0.5 - align) * strokeWidth;
var anchorY = baseline * label.height / pixelRatio + 2 * (0.5 - baseline) * strokeWidth;
var drawTextInstruction = [
this.instructions.push([
ol.render.canvas.Instruction.DRAW_IMAGE, myBegin, myEnd, label,
anchorX - this.textOffsetX_ * pixelRatio, anchorY - this.textOffsetY_ * pixelRatio,
(anchorX - this.textOffsetX_) * pixelRatio, (anchorY - this.textOffsetY_) * pixelRatio,
label.height, 1, 0, 0, this.textRotateWithView_, this.textRotation_,
this.textScale_ / pixelRatio, //FIXME missing HiDPI support in DRAW_IMAGE
true, label.width
];
this.instructions.push(drawTextInstruction);
this.hitDetectionInstructions.push(drawTextInstruction);
this.textScale_, true, label.width
]);
this.hitDetectionInstructions.push([
ol.render.canvas.Instruction.DRAW_IMAGE, myBegin, myEnd, label,
(anchorX - this.textOffsetX_) * pixelRatio, (anchorY - this.textOffsetY_) * pixelRatio,
label.height, 1, 0, 0, this.textRotateWithView_, this.textRotation_,
this.textScale_ / pixelRatio, true, label.width
]);
this.endGeometry(geometry, feature);
};

9
src/ol/renderer/canvas/vectorlayer.js
View File

@@ -157,8 +157,7 @@ ol.renderer.canvas.VectorLayer.prototype.composeFrame = function(frameState, lay
var height = frameState.size[1] * pixelRatio;
ol.render.canvas.rotateAtOffset(replayContext, -rotation,
width / 2, height / 2);
replayGroup.replay(replayContext, pixelRatio, transform, rotation,
skippedFeatureUids);
replayGroup.replay(replayContext, transform, rotation, skippedFeatureUids);
if (vectorSource.getWrapX() && projection.canWrapX() &&
!ol.extent.containsExtent(projectionExtent, extent)) {
var startX = extent[0];
@@ -169,8 +168,7 @@ ol.renderer.canvas.VectorLayer.prototype.composeFrame = function(frameState, lay
--world;
offsetX = worldWidth * world;
transform = this.getTransform(frameState, offsetX);
replayGroup.replay(replayContext, pixelRatio, transform, rotation,
skippedFeatureUids);
replayGroup.replay(replayContext, transform, rotation, skippedFeatureUids);
startX += worldWidth;
}
world = 0;
@@ -179,8 +177,7 @@ ol.renderer.canvas.VectorLayer.prototype.composeFrame = function(frameState, lay
++world;
offsetX = worldWidth * world;
transform = this.getTransform(frameState, offsetX);
replayGroup.replay(replayContext, pixelRatio, transform, rotation,
skippedFeatureUids);
replayGroup.replay(replayContext, transform, rotation, skippedFeatureUids);
startX -= worldWidth;
}
// restore original transform for render and compose events

4
src/ol/renderer/canvas/vectortilelayer.js
View File

@@ -388,7 +388,7 @@ ol.renderer.canvas.VectorTileLayer.prototype.postCompose = function(context, fra
context.clip();
}
}
replayGroup.replay(context, pixelRatio, transform, rotation, {}, replays);
replayGroup.replay(context, transform, rotation, {}, replays);
context.restore();
clips.push(currentClip);
zs.push(currentZ);
@@ -461,7 +461,7 @@ ol.renderer.canvas.VectorTileLayer.prototype.renderTileImage_ = function(
ol.transform.scale(transform, pixelScale, -pixelScale);
ol.transform.translate(transform, -tileExtent[0], -tileExtent[3]);
var replayGroup = sourceTile.getReplayGroup(layer, tile.tileCoord.toString());
replayGroup.replay(context, pixelRatio, transform, 0, {}, replays, true);
replayGroup.replay(context, transform, 0, {}, replays, true);
}
}
};

2
src/ol/source/imagevector.js
View File

@@ -143,7 +143,7 @@ ol.source.ImageVector.prototype.canvasFunctionInternal_ = function(extent, resol
var transform = this.getTransform_(ol.extent.getCenter(extent),
resolution, pixelRatio, size);
replayGroup.replay(this.canvasContext_, pixelRatio, transform, 0, {});
replayGroup.replay(this.canvasContext_, transform, 0, {});
this.replayGroup_ = replayGroup;

27
test/spec/ol/renderer/canvas/replay.test.js
View File

@@ -91,18 +91,18 @@ describe('ol.render.canvas.ReplayGroup', function() {
it('omits lineTo for repeated coordinates', function() {
ol.renderer.vector.renderFeature(replay, feature0, fill0, 1);
replay.replay(context, 1, transform, 0, {});
replay.replay(context, transform, 0, {});
expect(lineToCount).to.be(4);
lineToCount = 0;
ol.transform.scale(transform, 0.25, 0.25);
replay.replay(context, 1, transform, 0, {});
replay.replay(context, transform, 0, {});
expect(lineToCount).to.be(3);
});
it('does not omit moveTo for repeated coordinates', function() {
ol.renderer.vector.renderFeature(replay, feature0, fill0, 1);
ol.renderer.vector.renderFeature(replay, feature1, fill1, 1);
replay.replay(context, 1, transform, 0, {});
replay.replay(context, transform, 0, {});
expect(moveToCount).to.be(2);
});
@@ -110,7 +110,7 @@ describe('ol.render.canvas.ReplayGroup', function() {
ol.renderer.vector.renderFeature(replay, feature1, style1, 1);
ol.renderer.vector.renderFeature(replay, feature2, style1, 1);
ol.renderer.vector.renderFeature(replay, feature3, style1, 1);
replay.replay(context, 1, transform, 0, {});
replay.replay(context, transform, 0, {});
expect(fillCount).to.be(1);
expect(strokeCount).to.be(1);
expect(beginPathCount).to.be(1);
@@ -120,7 +120,7 @@ describe('ol.render.canvas.ReplayGroup', function() {
ol.renderer.vector.renderFeature(replay, feature1, style1, 1);
ol.renderer.vector.renderFeature(replay, feature2, style1, 1);
ol.renderer.vector.renderFeature(replay, feature3, style2, 1);
replay.replay(context, 1, transform, 0, {});
replay.replay(context, transform, 0, {});
expect(fillCount).to.be(2);
expect(strokeCount).to.be(2);
expect(beginPathCount).to.be(2);
@@ -130,7 +130,7 @@ describe('ol.render.canvas.ReplayGroup', function() {
ol.renderer.vector.renderFeature(replay, feature1, style1, 1);
ol.renderer.vector.renderFeature(replay, feature2, style2, 1);
ol.renderer.vector.renderFeature(replay, feature3, style1, 1);
replay.replay(context, 1, transform, 0, {});
replay.replay(context, transform, 0, {});
expect(fillCount).to.be(3);
expect(strokeCount).to.be(3);
expect(beginPathCount).to.be(3);
@@ -142,7 +142,7 @@ describe('ol.render.canvas.ReplayGroup', function() {
ol.renderer.vector.renderFeature(replay, feature3, style2, 1);
var skippedUids = {};
skippedUids[ol.getUid(feature1)] = true;
replay.replay(context, 1, transform, 0, skippedUids);
replay.replay(context, transform, 0, skippedUids);
expect(fillCount).to.be(1);
expect(strokeCount).to.be(1);
expect(beginPathCount).to.be(1);
@@ -154,7 +154,7 @@ describe('ol.render.canvas.ReplayGroup', function() {
ol.renderer.vector.renderFeature(replay, feature3, style2, 1);
var skippedUids = {};
skippedUids[ol.getUid(feature3)] = true;
replay.replay(context, 1, transform, 0, skippedUids);
replay.replay(context, transform, 0, skippedUids);
expect(fillCount).to.be(1);
expect(strokeCount).to.be(1);
expect(beginPathCount).to.be(1);
@@ -167,7 +167,7 @@ describe('ol.render.canvas.ReplayGroup', function() {
var skippedUids = {};
skippedUids[ol.getUid(feature1)] = true;
skippedUids[ol.getUid(feature2)] = true;
replay.replay(context, 1, transform, 0, skippedUids);
replay.replay(context, transform, 0, skippedUids);
expect(fillCount).to.be(1);
expect(strokeCount).to.be(1);
expect(beginPathCount).to.be(1);
@@ -178,13 +178,16 @@ describe('ol.render.canvas.ReplayGroup', function() {
ol.renderer.vector.renderFeature(replay, feature1, style1, 1);
ol.renderer.vector.renderFeature(replay, feature2, style1, 1);
ol.renderer.vector.renderFeature(replay, feature3, style1, 1);
replay.replay(context, 1, transform, 0, {});
replay.replay(context, transform, 0, {});
expect(fillCount).to.be(3);
expect(strokeCount).to.be(3);
expect(beginPathCount).to.be(3);
});
it('applies the pixelRatio to the linedash array and offset', function() {
// replay with a pixelRatio of 2
replay = new ol.render.canvas.ReplayGroup(1, [-180, -90, 180, 90], 1, 2, true);
var lineDash, lineDashCount = 0,
lineDashOffset, lineDashOffsetCount = 0;
@@ -202,7 +205,7 @@ describe('ol.render.canvas.ReplayGroup', function() {
ol.renderer.vector.renderFeature(replay, feature1, style2, 1);
ol.renderer.vector.renderFeature(replay, feature2, style2, 1);
replay.replay(context, 2, transform, 0, {});
replay.replay(context, transform, 0, {});
expect(lineDashCount).to.be(1);
expect(style2.getStroke().getLineDash()).to.eql([3, 6]);
@@ -249,7 +252,7 @@ describe('ol.render.canvas.ReplayGroup', function() {
ol.renderer.vector.renderFeature(replay, multipolygon, style, 1);
ol.renderer.vector.renderFeature(replay, geometrycollection, style, 1);
ol.transform.scale(transform, 0.1, 0.1);
replay.replay(context, 1, transform, 0, {});
replay.replay(context, transform, 0, {});
expect(calls.length).to.be(9);
expect(calls[0].geometry).to.be(point.getGeometry());
expect(calls[0].feature).to.be(point);