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

Add new canvas instruction array in ol/render/canvas/Instruction

Browse Source 
Don't re-create the arrays on every replay group
This commit is contained in:
Frederic Junod
2018-02-12 18:25:02 +01:00
parent ba460554a1
commit 95dff19070
3 changed files with 40 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/ol/render/canvas/Instruction.js
View File

@@ -5,7 +5,7 @@
/**
* @enum {number}
*/
export default {
const Instruction = {
BEGIN_GEOMETRY: 0,
BEGIN_PATH: 1,
CIRCLE: 2,
@@ -20,3 +20,30 @@ export default {
SET_STROKE_STYLE: 11,
STROKE: 12
};
/**
* @type {Array.<Instruction>}
*/
export const fillInstruction = [Instruction.FILL];
/**
* @type {Array.<Instruction>}
*/
export const strokeInstruction = [Instruction.STROKE];
/**
* @type {Array.<Instruction>}
*/
export const beginPathInstruction = [Instruction.BEGIN_PATH];
/**
* @type {Array.<Instruction>}
*/
export const closePathInstruction = [Instruction.CLOSE_PATH];
export default Instruction;

20
src/ol/render/canvas/LineStringReplay.js
View File

@@ -2,7 +2,7 @@
* @module ol/render/canvas/LineStringReplay
*/
import {inherits} from '../../index.js';
import CanvasInstruction from '../canvas/Instruction.js';
import CanvasInstruction, {strokeInstruction, beginPathInstruction} from '../canvas/Instruction.js';
import CanvasReplay from '../canvas/Replay.js';
/**
@@ -60,13 +60,11 @@ CanvasLineStringReplay.prototype.drawLineString = function(lineStringGeometry, f
CanvasInstruction.SET_STROKE_STYLE,
state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
state.miterLimit, state.lineDash, state.lineDashOffset
], [
CanvasInstruction.BEGIN_PATH
]);
], beginPathInstruction);
const flatCoordinates = lineStringGeometry.getFlatCoordinates();
const stride = lineStringGeometry.getStride();
this.drawFlatCoordinates_(flatCoordinates, 0, flatCoordinates.length, stride);
this.hitDetectionInstructions.push([CanvasInstruction.STROKE]);
this.hitDetectionInstructions.push(strokeInstruction);
this.endGeometry(lineStringGeometry, feature);
};
@@ -87,9 +85,7 @@ CanvasLineStringReplay.prototype.drawMultiLineString = function(multiLineStringG
CanvasInstruction.SET_STROKE_STYLE,
state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
state.miterLimit, state.lineDash, state.lineDashOffset
], [
CanvasInstruction.BEGIN_PATH
]);
], beginPathInstruction);
const ends = multiLineStringGeometry.getEnds();
const flatCoordinates = multiLineStringGeometry.getFlatCoordinates();
const stride = multiLineStringGeometry.getStride();
@@ -98,7 +94,7 @@ CanvasLineStringReplay.prototype.drawMultiLineString = function(multiLineStringG
offset = this.drawFlatCoordinates_(
flatCoordinates, offset, ends[i], stride);
}
this.hitDetectionInstructions.push([CanvasInstruction.STROKE]);
this.hitDetectionInstructions.push(strokeInstruction);
this.endGeometry(multiLineStringGeometry, feature);
};
@@ -109,7 +105,7 @@ CanvasLineStringReplay.prototype.drawMultiLineString = function(multiLineStringG
CanvasLineStringReplay.prototype.finish = function() {
const state = this.state;
if (state.lastStroke != undefined && state.lastStroke != this.coordinates.length) {
this.instructions.push([CanvasInstruction.STROKE]);
this.instructions.push(strokeInstruction);
}
this.reverseHitDetectionInstructions();
this.state = null;
@@ -121,11 +117,11 @@ CanvasLineStringReplay.prototype.finish = function() {
*/
CanvasLineStringReplay.prototype.applyStroke = function(state) {
if (state.lastStroke != undefined && state.lastStroke != this.coordinates.length) {
this.instructions.push([CanvasInstruction.STROKE]);
this.instructions.push(strokeInstruction);
state.lastStroke = this.coordinates.length;
}
state.lastStroke = 0;
CanvasReplay.prototype.applyStroke.call(this, state);
this.instructions.push([CanvasInstruction.BEGIN_PATH]);
this.instructions.push(beginPathInstruction);
};
export default CanvasLineStringReplay;

12
src/ol/render/canvas/PolygonReplay.js
View File

@@ -5,9 +5,12 @@ import {inherits} from '../../index.js';
import {asString} from '../../color.js';
import _ol_geom_flat_simplify_ from '../../geom/flat/simplify.js';
import _ol_render_canvas_ from '../canvas.js';
import CanvasInstruction from '../canvas/Instruction.js';
import CanvasInstruction, {
fillInstruction, strokeInstruction, beginPathInstruction, closePathInstruction
} from '../canvas/Instruction.js';
import CanvasReplay from '../canvas/Replay.js';
/**
* @constructor
* @extends {ol.render.canvas.Replay}
@@ -41,7 +44,6 @@ CanvasPolygonReplay.prototype.drawFlatCoordinatess_ = function(flatCoordinates,
const fill = state.fillStyle !== undefined;
const stroke = state.strokeStyle != undefined;
const numEnds = ends.length;
const beginPathInstruction = [CanvasInstruction.BEGIN_PATH];
this.instructions.push(beginPathInstruction);
this.hitDetectionInstructions.push(beginPathInstruction);
for (let i = 0; i < numEnds; ++i) {
@@ -55,19 +57,16 @@ CanvasPolygonReplay.prototype.drawFlatCoordinatess_ = function(flatCoordinates,
if (stroke) {
// Performance optimization: only call closePath() when we have a stroke.
// Otherwise the ring is closed already (see appendFlatCoordinates above).
const closePathInstruction = [CanvasInstruction.CLOSE_PATH];
this.instructions.push(closePathInstruction);
this.hitDetectionInstructions.push(closePathInstruction);
}
offset = end;
}
const fillInstruction = [CanvasInstruction.FILL];
this.hitDetectionInstructions.push(fillInstruction);
if (fill) {
this.instructions.push(fillInstruction);
}
if (stroke) {
const strokeInstruction = [CanvasInstruction.STROKE];
this.instructions.push(strokeInstruction);
this.hitDetectionInstructions.push(strokeInstruction);
}
@@ -104,17 +103,14 @@ CanvasPolygonReplay.prototype.drawCircle = function(circleGeometry, feature) {
const myBegin = this.coordinates.length;
this.appendFlatCoordinates(
flatCoordinates, 0, flatCoordinates.length, stride, false, false);
const beginPathInstruction = [CanvasInstruction.BEGIN_PATH];
const circleInstruction = [CanvasInstruction.CIRCLE, myBegin];
this.instructions.push(beginPathInstruction, circleInstruction);
this.hitDetectionInstructions.push(beginPathInstruction, circleInstruction);
const fillInstruction = [CanvasInstruction.FILL];
this.hitDetectionInstructions.push(fillInstruction);
if (state.fillStyle !== undefined) {
this.instructions.push(fillInstruction);
}
if (state.strokeStyle !== undefined) {
const strokeInstruction = [CanvasInstruction.STROKE];
this.instructions.push(strokeInstruction);
this.hitDetectionInstructions.push(strokeInstruction);
}