Line Dash offset

This commit is contained in:
Thomas Chandelle
2016-11-08 15:38:00 +01:00
parent fd1029600b
commit 7a4ae3a6ac
17 changed files with 150 additions and 15 deletions

View File

@@ -29,6 +29,13 @@ ol.render.canvas.defaultLineCap = 'round';
ol.render.canvas.defaultLineDash = [];
/**
* @const
* @type {number}
*/
ol.render.canvas.defaultLineDashOffset = 0;
/**
* @const
* @type {string}

View File

@@ -819,6 +819,7 @@ ol.render.canvas.Immediate.prototype.setFillStrokeStyle = function(fillStyle, st
var strokeStyleColor = strokeStyle.getColor();
var strokeStyleLineCap = strokeStyle.getLineCap();
var strokeStyleLineDash = strokeStyle.getLineDash();
var strokeStyleLineDashOffset = strokeStyle.getLineDashOffset();
var strokeStyleLineJoin = strokeStyle.getLineJoin();
var strokeStyleWidth = strokeStyle.getWidth();
var strokeStyleMiterLimit = strokeStyle.getMiterLimit();
@@ -827,6 +828,8 @@ ol.render.canvas.Immediate.prototype.setFillStrokeStyle = function(fillStyle, st
strokeStyleLineCap : ol.render.canvas.defaultLineCap,
lineDash: strokeStyleLineDash ?
strokeStyleLineDash : ol.render.canvas.defaultLineDash,
lineDashOffset: strokeStyleLineDashOffset ?
strokeStyleLineDashOffset : ol.render.canvas.defaultLineDashOffset,
lineJoin: strokeStyleLineJoin !== undefined ?
strokeStyleLineJoin : ol.render.canvas.defaultLineJoin,
lineWidth: this.pixelRatio_ * (strokeStyleWidth !== undefined ?
@@ -898,6 +901,7 @@ ol.render.canvas.Immediate.prototype.setTextStyle = function(textStyle) {
var textStrokeStyleColor = textStrokeStyle.getColor();
var textStrokeStyleLineCap = textStrokeStyle.getLineCap();
var textStrokeStyleLineDash = textStrokeStyle.getLineDash();
var textStrokeStyleLineDashOffset = textStrokeStyle.getLineDashOffset();
var textStrokeStyleLineJoin = textStrokeStyle.getLineJoin();
var textStrokeStyleWidth = textStrokeStyle.getWidth();
var textStrokeStyleMiterLimit = textStrokeStyle.getMiterLimit();
@@ -906,6 +910,8 @@ ol.render.canvas.Immediate.prototype.setTextStyle = function(textStyle) {
textStrokeStyleLineCap : ol.render.canvas.defaultLineCap,
lineDash: textStrokeStyleLineDash ?
textStrokeStyleLineDash : ol.render.canvas.defaultLineDash,
lineDashOffset: textStrokeStyleLineDashOffset ?
textStrokeStyleLineDashOffset : ol.render.canvas.defaultLineDashOffset,
lineJoin: textStrokeStyleLineJoin !== undefined ?
textStrokeStyleLineJoin : ol.render.canvas.defaultLineJoin,
lineWidth: textStrokeStyleWidth !== undefined ?

View File

@@ -33,6 +33,7 @@ ol.render.canvas.LineStringReplay = function(tolerance, maxExtent, resolution, o
* @type {{currentStrokeStyle: (ol.ColorLike|undefined),
* currentLineCap: (string|undefined),
* currentLineDash: Array.<number>,
* currentLineDashOffset: (number|undefined),
* currentLineJoin: (string|undefined),
* currentLineWidth: (number|undefined),
* currentMiterLimit: (number|undefined),
@@ -40,6 +41,7 @@ ol.render.canvas.LineStringReplay = function(tolerance, maxExtent, resolution, o
* strokeStyle: (ol.ColorLike|undefined),
* lineCap: (string|undefined),
* lineDash: Array.<number>,
* lineDashOffset: (number|undefined),
* lineJoin: (string|undefined),
* lineWidth: (number|undefined),
* miterLimit: (number|undefined)}|null}
@@ -48,6 +50,7 @@ ol.render.canvas.LineStringReplay = function(tolerance, maxExtent, resolution, o
currentStrokeStyle: undefined,
currentLineCap: undefined,
currentLineDash: null,
currentLineDashOffset: undefined,
currentLineJoin: undefined,
currentLineWidth: undefined,
currentMiterLimit: undefined,
@@ -55,6 +58,7 @@ ol.render.canvas.LineStringReplay = function(tolerance, maxExtent, resolution, o
strokeStyle: undefined,
lineCap: undefined,
lineDash: null,
lineDashOffset: undefined,
lineJoin: undefined,
lineWidth: undefined,
miterLimit: undefined
@@ -107,12 +111,14 @@ ol.render.canvas.LineStringReplay.prototype.setStrokeStyle_ = function() {
var strokeStyle = state.strokeStyle;
var lineCap = state.lineCap;
var lineDash = state.lineDash;
var lineDashOffset = state.lineDashOffset;
var lineJoin = state.lineJoin;
var lineWidth = state.lineWidth;
var miterLimit = state.miterLimit;
if (state.currentStrokeStyle != strokeStyle ||
state.currentLineCap != lineCap ||
!ol.array.equals(state.currentLineDash, lineDash) ||
state.currentLineDashOffset != lineDashOffset ||
state.currentLineJoin != lineJoin ||
state.currentLineWidth != lineWidth ||
state.currentMiterLimit != miterLimit) {
@@ -122,13 +128,14 @@ ol.render.canvas.LineStringReplay.prototype.setStrokeStyle_ = function() {
}
this.instructions.push([
ol.render.canvas.Instruction.SET_STROKE_STYLE,
strokeStyle, lineWidth, lineCap, lineJoin, miterLimit, lineDash, true, 1
strokeStyle, lineWidth, lineCap, lineJoin, miterLimit, lineDash, lineDashOffset, true, 1
], [
ol.render.canvas.Instruction.BEGIN_PATH
]);
state.currentStrokeStyle = strokeStyle;
state.currentLineCap = lineCap;
state.currentLineDash = lineDash;
state.currentLineDashOffset = lineDashOffset;
state.currentLineJoin = lineJoin;
state.currentLineWidth = lineWidth;
state.currentMiterLimit = miterLimit;
@@ -151,7 +158,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, true, 1
state.miterLimit, state.lineDash, state.lineDashOffset, true, 1
], [
ol.render.canvas.Instruction.BEGIN_PATH
]);
@@ -178,7 +185,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, true, 1
state.miterLimit, state.lineDash, state.lineDashOffset, true, 1
], [
ol.render.canvas.Instruction.BEGIN_PATH
]);
@@ -222,6 +229,9 @@ ol.render.canvas.LineStringReplay.prototype.setFillStrokeStyle = function(fillSt
var strokeStyleLineDash = strokeStyle.getLineDash();
this.state_.lineDash = strokeStyleLineDash ?
strokeStyleLineDash : ol.render.canvas.defaultLineDash;
var strokeStyleLineDashOffset = strokeStyle.getLineDashOffset();
this.state_.lineDashOffset = strokeStyleLineDashOffset ?
strokeStyleLineDashOffset : ol.render.canvas.defaultLineDashOffset;
var strokeStyleLineJoin = strokeStyle.getLineJoin();
this.state_.lineJoin = strokeStyleLineJoin !== undefined ?
strokeStyleLineJoin : ol.render.canvas.defaultLineJoin;

View File

@@ -36,6 +36,7 @@ ol.render.canvas.PolygonReplay = function(tolerance, maxExtent, resolution, over
* currentStrokeStyle: (ol.ColorLike|undefined),
* currentLineCap: (string|undefined),
* currentLineDash: Array.<number>,
* currentLineDashOffset: (number|undefined),
* currentLineJoin: (string|undefined),
* currentLineWidth: (number|undefined),
* currentMiterLimit: (number|undefined),
@@ -43,6 +44,7 @@ ol.render.canvas.PolygonReplay = function(tolerance, maxExtent, resolution, over
* strokeStyle: (ol.ColorLike|undefined),
* lineCap: (string|undefined),
* lineDash: Array.<number>,
* lineDashOffset: (number|undefined),
* lineJoin: (string|undefined),
* lineWidth: (number|undefined),
* miterLimit: (number|undefined)}|null}
@@ -52,6 +54,7 @@ ol.render.canvas.PolygonReplay = function(tolerance, maxExtent, resolution, over
currentStrokeStyle: undefined,
currentLineCap: undefined,
currentLineDash: null,
currentLineDashOffset: undefined,
currentLineJoin: undefined,
currentLineWidth: undefined,
currentMiterLimit: undefined,
@@ -59,6 +62,7 @@ ol.render.canvas.PolygonReplay = function(tolerance, maxExtent, resolution, over
strokeStyle: undefined,
lineCap: undefined,
lineDash: null,
lineDashOffset: undefined,
lineJoin: undefined,
lineWidth: undefined,
miterLimit: undefined
@@ -137,7 +141,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, true, 1
state.miterLimit, state.lineDash, state.lineDashOffset, true, 1
]);
}
var flatCoordinates = circleGeometry.getFlatCoordinates();
@@ -179,7 +183,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, true, 1
state.miterLimit, state.lineDash, state.lineDashOffset, true, 1
]);
}
var ends = polygonGeometry.getEnds();
@@ -211,7 +215,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, true, 1
state.miterLimit, state.lineDash, state.lineDashOffset, true, 1
]);
}
var endss = multiPolygonGeometry.getEndss();
@@ -285,6 +289,9 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyle = function(fillStyle
var strokeStyleLineDash = strokeStyle.getLineDash();
state.lineDash = strokeStyleLineDash ?
strokeStyleLineDash.slice() : ol.render.canvas.defaultLineDash;
var strokeStyleLineDashOffset = strokeStyle.getLineDashOffset();
state.lineDashOffset = strokeStyleLineDashOffset ?
strokeStyleLineDashOffset : ol.render.canvas.defaultLineDashOffset;
var strokeStyleLineJoin = strokeStyle.getLineJoin();
state.lineJoin = strokeStyleLineJoin !== undefined ?
strokeStyleLineJoin : ol.render.canvas.defaultLineJoin;
@@ -304,6 +311,7 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyle = function(fillStyle
state.strokeStyle = undefined;
state.lineCap = undefined;
state.lineDash = null;
state.lineDashOffset = undefined;
state.lineJoin = undefined;
state.lineWidth = undefined;
state.miterLimit = undefined;
@@ -321,6 +329,7 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyles_ = function(geometr
var strokeStyle = state.strokeStyle;
var lineCap = state.lineCap;
var lineDash = state.lineDash;
var lineDashOffset = state.lineDashOffset;
var lineJoin = state.lineJoin;
var lineWidth = state.lineWidth;
var miterLimit = state.miterLimit;
@@ -337,16 +346,18 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyles_ = function(geometr
if (state.currentStrokeStyle != strokeStyle ||
state.currentLineCap != lineCap ||
!ol.array.equals(state.currentLineDash, lineDash) ||
state.currentLineDashOffset != lineDashOffset ||
state.currentLineJoin != lineJoin ||
state.currentLineWidth != lineWidth ||
state.currentMiterLimit != miterLimit) {
this.instructions.push([
ol.render.canvas.Instruction.SET_STROKE_STYLE,
strokeStyle, lineWidth, lineCap, lineJoin, miterLimit, lineDash, true, 1
strokeStyle, lineWidth, lineCap, lineJoin, miterLimit, lineDash, lineDashOffset, true, 1
]);
state.currentStrokeStyle = strokeStyle;
state.currentLineCap = lineCap;
state.currentLineDash = lineDash;
state.currentLineDashOffset = lineDashOffset;
state.currentLineJoin = lineJoin;
state.currentLineWidth = lineWidth;
state.currentMiterLimit = miterLimit;

View File

@@ -465,9 +465,9 @@ ol.render.canvas.Replay.prototype.replay_ = function(
++i;
break;
case ol.render.canvas.Instruction.SET_STROKE_STYLE:
var usePixelRatio = instruction[7] !== undefined ?
instruction[7] : true;
var renderedPixelRatio = instruction[8];
var usePixelRatio = instruction[8] !== undefined ?
instruction[8] : true;
var renderedPixelRatio = instruction[9];
var lineWidth = /** @type {number} */ (instruction[2]);
if (pendingStroke) {
@@ -481,13 +481,17 @@ ol.render.canvas.Replay.prototype.replay_ = function(
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[8] = pixelRatio;
instruction[7] = lineDashOffset;
instruction[9] = pixelRatio;
}
context.lineDashOffset = lineDashOffset;
context.setLineDash(lineDash);
}
prevX = NaN;

View File

@@ -160,6 +160,7 @@ ol.render.canvas.TextReplay.prototype.setReplayStrokeState_ = function(strokeSta
if (replayStrokeState &&
replayStrokeState.lineCap == strokeState.lineCap &&
replayStrokeState.lineDash == strokeState.lineDash &&
replayStrokeState.lineDashOffset == strokeState.lineDashOffset &&
replayStrokeState.lineJoin == strokeState.lineJoin &&
replayStrokeState.lineWidth == strokeState.lineWidth &&
replayStrokeState.miterLimit == strokeState.miterLimit &&
@@ -169,7 +170,7 @@ ol.render.canvas.TextReplay.prototype.setReplayStrokeState_ = function(strokeSta
var setStrokeStyleInstruction = [
ol.render.canvas.Instruction.SET_STROKE_STYLE, strokeState.strokeStyle,
strokeState.lineWidth, strokeState.lineCap, strokeState.lineJoin,
strokeState.miterLimit, strokeState.lineDash, false, 1
strokeState.miterLimit, strokeState.lineDash, strokeState.lineDashOffset, false, 1
];
this.instructions.push(setStrokeStyleInstruction);
this.hitDetectionInstructions.push(setStrokeStyleInstruction);
@@ -177,6 +178,7 @@ ol.render.canvas.TextReplay.prototype.setReplayStrokeState_ = function(strokeSta
this.replayStrokeState_ = {
lineCap: strokeState.lineCap,
lineDash: strokeState.lineDash,
lineDashOffset: strokeState.lineDashOffset,
lineJoin: strokeState.lineJoin,
lineWidth: strokeState.lineWidth,
miterLimit: strokeState.miterLimit,
@@ -185,6 +187,7 @@ ol.render.canvas.TextReplay.prototype.setReplayStrokeState_ = function(strokeSta
} else {
replayStrokeState.lineCap = strokeState.lineCap;
replayStrokeState.lineDash = strokeState.lineDash;
replayStrokeState.lineDashOffset = strokeState.lineDashOffset;
replayStrokeState.lineJoin = strokeState.lineJoin;
replayStrokeState.lineWidth = strokeState.lineWidth;
replayStrokeState.miterLimit = strokeState.miterLimit;
@@ -253,6 +256,7 @@ ol.render.canvas.TextReplay.prototype.setTextStyle = function(textStyle) {
var textStrokeStyleColor = textStrokeStyle.getColor();
var textStrokeStyleLineCap = textStrokeStyle.getLineCap();
var textStrokeStyleLineDash = textStrokeStyle.getLineDash();
var textStrokeStyleLineDashOffset = textStrokeStyle.getLineDashOffset();
var textStrokeStyleLineJoin = textStrokeStyle.getLineJoin();
var textStrokeStyleWidth = textStrokeStyle.getWidth();
var textStrokeStyleMiterLimit = textStrokeStyle.getMiterLimit();
@@ -260,6 +264,8 @@ ol.render.canvas.TextReplay.prototype.setTextStyle = function(textStyle) {
textStrokeStyleLineCap : ol.render.canvas.defaultLineCap;
var lineDash = textStrokeStyleLineDash ?
textStrokeStyleLineDash.slice() : ol.render.canvas.defaultLineDash;
var lineDashOffset = textStrokeStyleLineDashOffset !== undefined ?
textStrokeStyleLineDashOffset : ol.render.canvas.defaultLineDashOffset;
var lineJoin = textStrokeStyleLineJoin !== undefined ?
textStrokeStyleLineJoin : ol.render.canvas.defaultLineJoin;
var lineWidth = textStrokeStyleWidth !== undefined ?
@@ -272,6 +278,7 @@ ol.render.canvas.TextReplay.prototype.setTextStyle = function(textStyle) {
this.textStrokeState_ = {
lineCap: lineCap,
lineDash: lineDash,
lineDashOffset: lineDashOffset,
lineJoin: lineJoin,
lineWidth: lineWidth,
miterLimit: miterLimit,
@@ -281,6 +288,7 @@ ol.render.canvas.TextReplay.prototype.setTextStyle = function(textStyle) {
var textStrokeState = this.textStrokeState_;
textStrokeState.lineCap = lineCap;
textStrokeState.lineDash = lineDash;
textStrokeState.lineDashOffset = lineDashOffset;
textStrokeState.lineJoin = lineJoin;
textStrokeState.lineWidth = lineWidth;
textStrokeState.miterLimit = miterLimit;

View File

@@ -22,6 +22,13 @@ if (ol.ENABLE_WEBGL) {
ol.render.webgl.defaultLineDash = [];
/**
* @const
* @type {number}
*/
ol.render.webgl.defaultLineDashOffset = 0;
/**
* @const
* @type {string}

View File

@@ -54,6 +54,7 @@ if (ol.ENABLE_WEBGL) {
* @type {{fillColor: (Array.<number>|null),
* strokeColor: (Array.<number>|null),
* lineDash: Array.<number>,
* lineDashOffset: (number|undefined),
* lineWidth: (number|undefined),
* changed: boolean}|null}
*/
@@ -61,6 +62,7 @@ if (ol.ENABLE_WEBGL) {
fillColor: null,
strokeColor: null,
lineDash: null,
lineDashOffset: undefined,
lineWidth: undefined,
changed: false
};
@@ -380,6 +382,9 @@ if (ol.ENABLE_WEBGL) {
var strokeStyleLineDash = strokeStyle.getLineDash();
this.state_.lineDash = strokeStyleLineDash ?
strokeStyleLineDash : ol.render.webgl.defaultLineDash;
var strokeStyleLineDashOffset = strokeStyle.getLineDashOffset();
this.state_.lineDashOffset = strokeStyleLineDashOffset ?
strokeStyleLineDashOffset : ol.render.webgl.defaultLineDashOffset;
strokeStyleColor = strokeStyle.getColor();
if (!(strokeStyleColor instanceof CanvasGradient) &&
!(strokeStyleColor instanceof CanvasPattern)) {

View File

@@ -50,6 +50,7 @@ if (ol.ENABLE_WEBGL) {
* @type {{strokeColor: (Array.<number>|null),
* lineCap: (string|undefined),
* lineDash: Array.<number>,
* lineDashOffset: (number|undefined),
* lineJoin: (string|undefined),
* lineWidth: (number|undefined),
* miterLimit: (number|undefined),
@@ -59,6 +60,7 @@ if (ol.ENABLE_WEBGL) {
strokeColor: null,
lineCap: undefined,
lineDash: null,
lineDashOffset: undefined,
lineJoin: undefined,
lineWidth: undefined,
miterLimit: undefined,
@@ -634,6 +636,9 @@ if (ol.ENABLE_WEBGL) {
var strokeStyleLineDash = strokeStyle.getLineDash();
this.state_.lineDash = strokeStyleLineDash ?
strokeStyleLineDash : ol.render.webgl.defaultLineDash;
var strokeStyleLineDashOffset = strokeStyle.getLineDashOffset();
this.state_.lineDashOffset = strokeStyleLineDashOffset ?
strokeStyleLineDashOffset : ol.render.webgl.defaultLineDashOffset;
var strokeStyleLineJoin = strokeStyle.getLineJoin();
this.state_.lineJoin = strokeStyleLineJoin !== undefined ?
strokeStyleLineJoin : ol.render.webgl.defaultLineJoin;