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

Merge pull request #5863 from fredj/stroke_pattern

Browse Source 
Allow CanvasPattern or CanvasGradient as stroke style
This commit is contained in:
Frédéric Junod
2016-09-14 08:38:41 +02:00
committed by GitHub
parent 4864306d0c e48fda6bef
commit 7ec100f3f8
12 changed files with 97 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
externs/olx.js
View File

@@ -6932,7 +6932,7 @@ olx.style.RegularShapeOptions.prototype.atlasManager;
/**
* @typedef {{color: (ol.Color|string|undefined),
* @typedef {{color: (ol.Color|ol.ColorLike|undefined),
* lineCap: (string|undefined),
* lineJoin: (string|undefined),
* lineDash: (Array.<number>|undefined),
@@ -6943,9 +6943,10 @@ olx.style.StrokeOptions;
/**
* Color. See {@link ol.color} for possible formats. Default null; if null,
* the Canvas/renderer default black will be used.
* @type {ol.Color|string|undefined}
* A color, gradient or pattern. See {@link ol.color}
* and {@link ol.colorlike} for possible formats. Default null;
* if null, the Canvas/renderer default black will be used.
* @type {ol.Color|ol.ColorLike|undefined}
* @api
*/
olx.style.StrokeOptions.prototype.color;

5
src/ol/render/canvas/immediate.js
View File

@@ -6,7 +6,6 @@ goog.provide('ol.render.canvas.Immediate');
goog.require('ol');
goog.require('ol.array');
goog.require('ol.color');
goog.require('ol.colorlike');
goog.require('ol.extent');
goog.require('ol.geom.GeometryType');
@@ -841,7 +840,7 @@ ol.render.canvas.Immediate.prototype.setFillStrokeStyle = function(fillStyle, st
strokeStyleWidth : ol.render.canvas.defaultLineWidth),
miterLimit: strokeStyleMiterLimit !== undefined ?
strokeStyleMiterLimit : ol.render.canvas.defaultMiterLimit,
strokeStyle: ol.color.asString(strokeStyleColor ?
strokeStyle: ol.colorlike.asColorLike(strokeStyleColor ?
strokeStyleColor : ol.render.canvas.defaultStrokeStyle)
};
}
@@ -921,7 +920,7 @@ ol.render.canvas.Immediate.prototype.setTextStyle = function(textStyle) {
textStrokeStyleWidth : ol.render.canvas.defaultLineWidth,
miterLimit: textStrokeStyleMiterLimit !== undefined ?
textStrokeStyleMiterLimit : ol.render.canvas.defaultMiterLimit,
strokeStyle: ol.color.asString(textStrokeStyleColor ?
strokeStyle: ol.colorlike.asColorLike(textStrokeStyleColor ?
textStrokeStyleColor : ol.render.canvas.defaultStrokeStyle)
};
}

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

@@ -2,7 +2,7 @@ goog.provide('ol.render.canvas.LineStringReplay');
goog.require('ol');
goog.require('ol.array');
goog.require('ol.color');
goog.require('ol.colorlike');
goog.require('ol.extent');
goog.require('ol.render.canvas');
goog.require('ol.render.canvas.Instruction');
@@ -30,14 +30,14 @@ ol.render.canvas.LineStringReplay = function(tolerance, maxExtent, resolution, o
/**
* @private
* @type {{currentStrokeStyle: (string|undefined),
* @type {{currentStrokeStyle: (ol.ColorLike|undefined),
* currentLineCap: (string|undefined),
* currentLineDash: Array.<number>,
* currentLineJoin: (string|undefined),
* currentLineWidth: (number|undefined),
* currentMiterLimit: (number|undefined),
* lastStroke: number,
* strokeStyle: (string|undefined),
* strokeStyle: (ol.ColorLike|undefined),
* lineCap: (string|undefined),
* lineDash: Array.<number>,
* lineJoin: (string|undefined),
@@ -223,7 +223,7 @@ ol.render.canvas.LineStringReplay.prototype.setFillStrokeStyle = function(fillSt
ol.DEBUG && console.assert(!fillStyle, 'fillStyle should be null');
ol.DEBUG && console.assert(strokeStyle, 'strokeStyle should not be null');
var strokeStyleColor = strokeStyle.getColor();
this.state_.strokeStyle = ol.color.asString(strokeStyleColor ?
this.state_.strokeStyle = ol.colorlike.asColorLike(strokeStyleColor ?
strokeStyleColor : ol.render.canvas.defaultStrokeStyle);
var strokeStyleLineCap = strokeStyle.getLineCap();
this.state_.lineCap = strokeStyleLineCap !== undefined ?

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

@@ -32,14 +32,14 @@ ol.render.canvas.PolygonReplay = function(tolerance, maxExtent, resolution, over
/**
* @private
* @type {{currentFillStyle: (ol.ColorLike|undefined),
* currentStrokeStyle: (string|undefined),
* currentStrokeStyle: (ol.ColorLike|undefined),
* currentLineCap: (string|undefined),
* currentLineDash: Array.<number>,
* currentLineJoin: (string|undefined),
* currentLineWidth: (number|undefined),
* currentMiterLimit: (number|undefined),
* fillStyle: (ol.ColorLike|undefined),
* strokeStyle: (string|undefined),
* strokeStyle: (ol.ColorLike|undefined),
* lineCap: (string|undefined),
* lineDash: Array.<number>,
* lineJoin: (string|undefined),
@@ -296,7 +296,7 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyle = function(fillStyle
}
if (strokeStyle) {
var strokeStyleColor = strokeStyle.getColor();
state.strokeStyle = ol.color.asString(strokeStyleColor ?
state.strokeStyle = ol.colorlike.asColorLike(strokeStyleColor ?
strokeStyleColor : ol.render.canvas.defaultStrokeStyle);
var strokeStyleLineCap = strokeStyle.getLineCap();
state.lineCap = strokeStyleLineCap !== undefined ?

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

@@ -476,8 +476,8 @@ ol.render.canvas.Replay.prototype.replay_ = function(
++i;
break;
case ol.render.canvas.Instruction.SET_STROKE_STYLE:
ol.DEBUG && console.assert(typeof instruction[1] === 'string',
'2nd instruction should be a string');
ol.DEBUG && console.assert(ol.colorlike.isColorLike(instruction[1]),
'2nd instruction should be a string, CanvasPattern, or CanvasGradient');
ol.DEBUG && console.assert(typeof instruction[2] === 'number',
'3rd instruction should be a number');
ol.DEBUG && console.assert(typeof instruction[3] === 'string',
@@ -495,7 +495,7 @@ ol.render.canvas.Replay.prototype.replay_ = function(
context.stroke();
pendingStroke = 0;
}
context.strokeStyle = /** @type {string} */ (instruction[1]);
context.strokeStyle = /** @type {ol.ColorLike} */ (instruction[1]);
context.lineWidth = usePixelRatio ? lineWidth * pixelRatio : lineWidth;
context.lineCap = /** @type {string} */ (instruction[3]);
context.lineJoin = /** @type {string} */ (instruction[4]);

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

@@ -1,7 +1,6 @@
goog.provide('ol.render.canvas.TextReplay');
goog.require('ol');
goog.require('ol.color');
goog.require('ol.colorlike');
goog.require('ol.render.canvas');
goog.require('ol.render.canvas.Instruction');
@@ -267,7 +266,7 @@ ol.render.canvas.TextReplay.prototype.setTextStyle = function(textStyle) {
textStrokeStyleWidth : ol.render.canvas.defaultLineWidth;
var miterLimit = textStrokeStyleMiterLimit !== undefined ?
textStrokeStyleMiterLimit : ol.render.canvas.defaultMiterLimit;
var strokeStyle = ol.color.asString(textStrokeStyleColor ?
var strokeStyle = ol.colorlike.asColorLike(textStrokeStyleColor ?
textStrokeStyleColor : ol.render.canvas.defaultStrokeStyle);
if (!this.textStrokeState_) {
this.textStrokeState_ = {

2
src/ol/style/circle.js
View File

@@ -260,7 +260,7 @@ ol.style.Circle.prototype.render_ = function(atlasManager) {
var strokeWidth = 0;
if (this.stroke_) {
strokeStyle = ol.color.asString(this.stroke_.getColor());
strokeStyle = ol.colorlike.asColorLike(this.stroke_.getColor());
strokeWidth = this.stroke_.getWidth();
if (strokeWidth === undefined) {
strokeWidth = ol.render.canvas.defaultLineWidth;

3
src/ol/style/regularshape.js
View File

@@ -1,7 +1,6 @@
goog.provide('ol.style.RegularShape');
goog.require('ol');
goog.require('ol.color');
goog.require('ol.colorlike');
goog.require('ol.dom');
goog.require('ol.has');
@@ -329,7 +328,7 @@ ol.style.RegularShape.prototype.render_ = function(atlasManager) {
var strokeWidth = 0;
if (this.stroke_) {
strokeStyle = ol.color.asString(this.stroke_.getColor());
strokeStyle = ol.colorlike.asColorLike(this.stroke_.getColor());
strokeWidth = this.stroke_.getWidth();
if (strokeWidth === undefined) {
strokeWidth = ol.render.canvas.defaultLineWidth;

22
src/ol/style/stroke.js
View File

@@ -1,7 +1,5 @@
goog.provide('ol.style.Stroke');
goog.require('ol.color');
/**
* @classdesc
@@ -20,7 +18,7 @@ ol.style.Stroke = function(opt_options) {
/**
* @private
* @type {ol.Color|string}
* @type {ol.Color|ol.ColorLike}
*/
this.color_ = options.color !== undefined ? options.color : null;
@@ -82,7 +80,7 @@ ol.style.Stroke.prototype.clone = function() {
/**
* Get the stroke color.
* @return {ol.Color|string} Color.
* @return {ol.Color|ol.ColorLike} Color.
* @api
*/
ol.style.Stroke.prototype.getColor = function() {
@@ -143,7 +141,7 @@ ol.style.Stroke.prototype.getWidth = function() {
/**
* Set the color.
*
* @param {ol.Color|string} color Color.
* @param {ol.Color|ol.ColorLike} color Color.
* @api
*/
ol.style.Stroke.prototype.setColor = function(color) {
@@ -223,9 +221,17 @@ ol.style.Stroke.prototype.setWidth = function(width) {
*/
ol.style.Stroke.prototype.getChecksum = function() {
if (this.checksum_ === undefined) {
this.checksum_ = 's' +
(this.color_ ?
ol.color.asString(this.color_) : '-') + ',' +
this.checksum_ = 's';
if (this.color_) {
if (typeof this.color_ === 'string') {
this.checksum_ += this.color_;
} else {
this.checksum_ += ol.getUid(this.color_).toString();
}
} else {
this.checksum_ += '-';
}
this.checksum_ += ',' +
(this.lineCap_ !== undefined ?
this.lineCap_.toString() : '-') + ',' +
(this.lineDash_ ?

9
src/ol/typedefs.js
View File

@@ -75,7 +75,7 @@ ol.CanvasFunctionType;
* lineJoin: string,
* lineWidth: number,
* miterLimit: number,
* strokeStyle: string}}
* strokeStyle: ol.ColorLike}}
*/
ol.CanvasStrokeState;
@@ -95,7 +95,7 @@ ol.CenterConstraintType;
/**
* @typedef {{strokeStyle: (string|undefined), strokeWidth: number,
* @typedef {{strokeStyle: (ol.ColorLike|undefined), strokeWidth: number,
* size: number, lineDash: Array.<number>}}
*/
ol.CircleRenderOptions;
@@ -112,7 +112,8 @@ ol.Color;
/**
* A type accepted by CanvasRenderingContext2D.fillStyle.
* A type accepted by CanvasRenderingContext2D.fillStyle
* or CanvasRenderingContext2D.strokeStyle.
* Represents a color, pattern, or gradient.
*
* @typedef {string|CanvasPattern|CanvasGradient}
@@ -405,7 +406,7 @@ ol.RasterOperation;
/**
* @typedef {{
* strokeStyle: (string|undefined),
* strokeStyle: (ol.ColorLike|undefined),
* strokeWidth: number,
* size: number,
* lineCap: string,

BIN
test_rendering/spec/ol/style/expected/polygon-pattern-gradient-canvas.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

58
test_rendering/spec/ol/style/polygon.test.js
View File

@@ -260,4 +260,62 @@ describe('ol.rendering.style.Polygon', function() {
IMAGE_TOLERANCE, done);
});
});
describe('CanvasPattern and LinearGradient as fills and strokes', function() {
afterEach(function() {
disposeMap(map);
});
function createRainbowGradient() {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var gradient = context.createLinearGradient(0,0,30,0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1 / 6, 'orange');
gradient.addColorStop(2 / 6, 'yellow');
gradient.addColorStop(3 / 6, 'green');
gradient.addColorStop(4 / 6, 'aqua');
gradient.addColorStop(5 / 6, 'blue');
gradient.addColorStop(1, 'purple');
return gradient;
}
function createPattern() {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = 11;
canvas.height = 11;
context.fillStyle = 'rgba(102, 0, 102, 0.5)';
context.beginPath();
context.arc(5, 5, 4, 0, 2 * Math.PI);
context.fill();
context.fillStyle = 'rgb(55, 0, 170)';
context.beginPath();
context.arc(5, 5, 2, 0, 2 * Math.PI);
context.fill();
return context.createPattern(canvas, 'repeat');
}
function createFeatures() {
var feature = new ol.Feature({
geometry: new ol.geom.Polygon([
[[-20, -20], [-20, 20], [18, 20], [-20, -20]]
])
});
feature.setStyle(new ol.style.Style({
fill: new ol.style.Fill({color: createPattern()}),
stroke: new ol.style.Stroke({color: createRainbowGradient(), width: 3})
}));
vectorSource.addFeature(feature);
}
it('tests the canvas renderer', function(done) {
map = createMap('canvas');
createFeatures();
expectResemble(
map, 'spec/ol/style/expected/polygon-pattern-gradient-canvas.png',
2.75, done);
});
});
});