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

Store raw style values in immediate objects

Browse Source 
This commit also uses default style values (e.g.  ol.render.canvas.defaultStrokeFill) when no value is defined by the user.
This commit is contained in:
Éric Lemoine
2013-11-22 13:56:06 +01:00
parent 68caa8141c
commit 34ce9e478d
1 changed files with 102 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ol/render/canvas/canvasimmediate.js
+102 -41
View File
@@ -7,8 +7,7 @@ goog.require('goog.asserts');
goog.require('ol.color'); goog.require('ol.color');
goog.require('ol.extent'); goog.require('ol.extent');
goog.require('ol.render.IRender'); goog.require('ol.render.IRender');
goog.require('ol.style.Fill'); goog.require('ol.render.canvas');
goog.require('ol.style.Stroke');
goog.require('ol.style.Text'); goog.require('ol.style.Text');
@@ -42,15 +41,33 @@ ol.render.canvas.Immediate = function(context, extent, transform) {
/** /**
* @private * @private
* @type {{fillStyle: ol.style.Fill, * @type {{currentFillStyle: (string|undefined),
* imageStyle: ol.style.Image, * currentStrokeStyle: (string|undefined),
* strokeStyle: ol.style.Stroke, * currentLineWidth: (number|undefined),
* fillStyle: (string|undefined),
* strokeStyle: (string|undefined),
* lineWidth: (number|undefined),
* anchorX: (number|undefined),
* anchorY: (number|undefined),
* image: (HTMLCanvasElement|HTMLVideoElement|Image),
* height: (number|undefined),
* width: (number|undefined),
* snapToPixel: (boolean|undefined),
* textStyle: ol.style.Text}} * textStyle: ol.style.Text}}
*/ */
this.state_ = { this.state_ = {
fillStyle: null, currentFillStyle: undefined,
imageStyle: null, currentStrokeStyle: undefined,
strokeStyle: null, currentLineWidth: undefined,
fillStyle: undefined,
strokeStyle: undefined,
lineWidth: undefined,
anchorX: undefined,
anchorY: undefined,
image: null,
height: undefined,
width: undefined,
snapToPixel: undefined,
textStyle: null textStyle: null
}; };
@@ -68,24 +85,27 @@ ol.render.canvas.Immediate = function(context, extent, transform) {
* @private * @private
*/ */
ol.render.canvas.Immediate.prototype.drawImages_ = function(geometry) { ol.render.canvas.Immediate.prototype.drawImages_ = function(geometry) {
var state = this.state_;
var context = this.context_; var context = this.context_;
var imageStyle = this.state_.imageStyle;
if (!ol.extent.intersects(this.extent_, geometry.getExtent()) || if (!ol.extent.intersects(this.extent_, geometry.getExtent()) ||
!goog.isDefAndNotNull(imageStyle)) { goog.isNull(state.image)) {
return; return;
} }
goog.asserts.assert(goog.isDef(state.anchorX));
goog.asserts.assert(goog.isDef(state.anchorY));
goog.asserts.assert(goog.isDef(state.height));
goog.asserts.assert(goog.isDef(state.width));
var pixelCoordinates = ol.geom.transformGeometry2D( var pixelCoordinates = ol.geom.transformGeometry2D(
geometry, this.transform_, this.pixelCoordinates_); geometry, this.transform_, this.pixelCoordinates_);
var i, ii; var i, ii;
for (i = 0, ii = pixelCoordinates.length; i < ii; i += 2) { for (i = 0, ii = pixelCoordinates.length; i < ii; i += 2) {
var x = pixelCoordinates[i] - imageStyle.anchor[0]; var x = pixelCoordinates[i] - state.anchorX;
var y = pixelCoordinates[i + 1] - imageStyle.anchor[1]; var y = pixelCoordinates[i + 1] - state.anchorY;
if (imageStyle.snapToPixel) { if (state.snapToPixel) {
x = (x + 0.5) | 0; x = (x + 0.5) | 0;
y = (y + 0.5) | 0; y = (y + 0.5) | 0;
} }
context.drawImage(imageStyle.image, x, y, context.drawImage(state.image, x, y, state.width, state.height);
imageStyle.size[0], imageStyle.size[1]);
} }
}; };
@@ -102,10 +122,10 @@ ol.render.canvas.Immediate.prototype.drawText_ = function(geometry) {
var textStyle = state.textStyle; var textStyle = state.textStyle;
if (!ol.extent.intersects(this.extent_, geometry.getExtent()) || if (!ol.extent.intersects(this.extent_, geometry.getExtent()) ||
!goog.isDefAndNotNull(textStyle) || !goog.isDef(textStyle.text) || !goog.isDefAndNotNull(textStyle) || !goog.isDef(textStyle.text) ||
(!goog.isDefAndNotNull(fillStyle) && (!goog.isDef(fillStyle) && !goog.isDef(strokeStyle))) {
!goog.isDefAndNotNull(strokeStyle))) {
return; return;
} }
this.setFillStrokeStyles_();
var pixelCoordinates = ol.geom.transformGeometry2D( var pixelCoordinates = ol.geom.transformGeometry2D(
geometry, this.transform_, this.pixelCoordinates_); geometry, this.transform_, this.pixelCoordinates_);
var i, ii; var i, ii;
@@ -113,10 +133,10 @@ ol.render.canvas.Immediate.prototype.drawText_ = function(geometry) {
var x = pixelCoordinates[i]; var x = pixelCoordinates[i];
var y = pixelCoordinates[i + 1]; var y = pixelCoordinates[i + 1];
// FIXME stroke before fill or fill before stroke? // FIXME stroke before fill or fill before stroke?
if (goog.isDefAndNotNull(strokeStyle)) { if (goog.isDef(strokeStyle)) {
context.strokeText(textStyle.text, x, y); context.strokeText(textStyle.text, x, y);
} }
if (goog.isDefAndNotNull(fillStyle)) { if (goog.isDef(fillStyle)) {
context.fillText(textStyle.text, x, y); context.fillText(textStyle.text, x, y);
} }
} }
@@ -208,9 +228,10 @@ ol.render.canvas.Immediate.prototype.drawMultiPointGeometry =
ol.render.canvas.Immediate.prototype.drawLineStringGeometry = ol.render.canvas.Immediate.prototype.drawLineStringGeometry =
function(lineStringGeometry) { function(lineStringGeometry) {
if (!ol.extent.intersects(this.extent_, lineStringGeometry.getExtent()) || if (!ol.extent.intersects(this.extent_, lineStringGeometry.getExtent()) ||
!goog.isDefAndNotNull(this.state_.strokeStyle)) { !goog.isDef(this.state_.strokeStyle)) {
return; return;
} }
this.setFillStrokeStyles_();
var context = this.context_; var context = this.context_;
var pixelCoordinates = ol.geom.transformGeometry2D( var pixelCoordinates = ol.geom.transformGeometry2D(
lineStringGeometry, this.transform_, this.pixelCoordinates_); lineStringGeometry, this.transform_, this.pixelCoordinates_);
@@ -227,9 +248,10 @@ ol.render.canvas.Immediate.prototype.drawMultiLineStringGeometry =
function(multiLineStringGeometry) { function(multiLineStringGeometry) {
var geometryExtent = multiLineStringGeometry.getExtent(); var geometryExtent = multiLineStringGeometry.getExtent();
if (!ol.extent.intersects(this.extent_, geometryExtent) || if (!ol.extent.intersects(this.extent_, geometryExtent) ||
!goog.isDefAndNotNull(this.state_.strokeStyle)) { !goog.isDef(this.state_.strokeStyle)) {
return; return;
} }
this.setFillStrokeStyles_();
var context = this.context_; var context = this.context_;
var pixelCoordinates = ol.geom.transformGeometry2D( var pixelCoordinates = ol.geom.transformGeometry2D(
multiLineStringGeometry, this.transform_, this.pixelCoordinates_); multiLineStringGeometry, this.transform_, this.pixelCoordinates_);
@@ -253,20 +275,21 @@ ol.render.canvas.Immediate.prototype.drawPolygonGeometry =
return; return;
} }
var state = this.state_; var state = this.state_;
if (!goog.isDefAndNotNull(state.fillStyle) && if (!goog.isDef(state.fillStyle) && !goog.isDef(state.strokeStyle)) {
!goog.isDefAndNotNull(state.strokeStyle)) {
return; return;
} }
this.setFillStrokeStyles_();
var context = this.context_; var context = this.context_;
var pixelCoordinates = ol.geom.transformGeometry2D( var pixelCoordinates = ol.geom.transformGeometry2D(
polygonGeometry, this.transform_, this.pixelCoordinates_); polygonGeometry, this.transform_, this.pixelCoordinates_);
var ends = polygonGeometry.getEnds(); var ends = polygonGeometry.getEnds();
context.beginPath(); context.beginPath();
this.drawRings_(pixelCoordinates, 0, ends); this.drawRings_(pixelCoordinates, 0, ends);
if (goog.isDefAndNotNull(state.fillStyle)) { if (goog.isDef(state.fillStyle)) {
context.fill(); context.fill();
} }
if (goog.isDefAndNotNull(state.strokeStyle)) { if (goog.isDef(state.strokeStyle)) {
goog.asserts.assert(goog.isDef(state.lineWidth));
context.stroke(); context.stroke();
} }
}; };
@@ -281,10 +304,10 @@ ol.render.canvas.Immediate.prototype.drawMultiPolygonGeometry =
return; return;
} }
var state = this.state_; var state = this.state_;
if (!goog.isDefAndNotNull(state.fillStyle) && if (!goog.isDef(state.fillStyle) && !goog.isDef(state.strokeStyle)) {
!goog.isDefAndNotNull(state.strokeStyle)) {
return; return;
} }
this.setFillStrokeStyles_();
var context = this.context_; var context = this.context_;
var pixelCoordinates = ol.geom.transformGeometry2D( var pixelCoordinates = ol.geom.transformGeometry2D(
multiPolygonGeometry, this.transform_, this.pixelCoordinates_); multiPolygonGeometry, this.transform_, this.pixelCoordinates_);
@@ -295,10 +318,11 @@ ol.render.canvas.Immediate.prototype.drawMultiPolygonGeometry =
var ends = endss[i]; var ends = endss[i];
context.beginPath(); context.beginPath();
offset = this.drawRings_(pixelCoordinates, offset, ends); offset = this.drawRings_(pixelCoordinates, offset, ends);
if (goog.isDefAndNotNull(state.fillStyle)) { if (goog.isDef(state.fillStyle)) {
context.fill(); context.fill();
} }
if (goog.isDefAndNotNull(state.strokeStyle)) { if (goog.isDef(state.strokeStyle)) {
goog.asserts.assert(goog.isDef(state.lineWidth));
context.stroke(); context.stroke();
} }
} }
@@ -310,20 +334,46 @@ ol.render.canvas.Immediate.prototype.drawMultiPolygonGeometry =
*/ */
ol.render.canvas.Immediate.prototype.setFillStrokeStyle = ol.render.canvas.Immediate.prototype.setFillStrokeStyle =
function(fillStyle, strokeStyle) { function(fillStyle, strokeStyle) {
var context = this.context_;
var state = this.state_; var state = this.state_;
if (!ol.style.Fill.equals(state.fillStyle, fillStyle)) { if (!goog.isNull(fillStyle)) {
if (goog.isDefAndNotNull(fillStyle)) { state.fillStyle = !goog.isNull(fillStyle.color) ?
context.fillStyle = ol.color.asString(fillStyle.color); ol.color.asString(fillStyle.color) : ol.render.canvas.defaultFillStyle;
} } else {
state.fillStyle = fillStyle; state.fillStyle = undefined;
} }
if (!ol.style.Stroke.equals(state.strokeStyle, strokeStyle)) { if (!goog.isNull(strokeStyle)) {
if (goog.isDefAndNotNull(strokeStyle)) { state.strokeStyle = !goog.isNull(strokeStyle.color) ?
context.strokeStyle = ol.color.asString(strokeStyle.color); ol.color.asString(strokeStyle.color) :
context.lineWidth = goog.isDef(strokeStyle.width) ? strokeStyle.width : 1; ol.render.canvas.defaultStrokeStyle;
state.lineWidth = goog.isDef(strokeStyle.width) ?
strokeStyle.width : ol.render.canvas.defaultLineWidth;
} else {
state.strokeStyle = undefined;
state.lineWidth = undefined;
}
};
/**
* @private
*/
ol.render.canvas.Immediate.prototype.setFillStrokeStyles_ = function() {
var state = this.state_;
var context = this.context_;
var fillStyle = state.fillStyle;
var strokeStyle = state.strokeStyle;
var lineWidth = state.lineWidth;
if (goog.isDef(fillStyle) && state.currentFillStyle != fillStyle) {
context.fillStyle = fillStyle;
state.currentFillStyle = fillStyle;
}
if (goog.isDef(strokeStyle)) {
goog.asserts.assert(goog.isDef(lineWidth));
if (state.currentStrokeStyle != strokeStyle ||
state.currentLineWidth != lineWidth) {
context.strokeStyle = strokeStyle;
context.lineWidth = lineWidth;
} }
state.strokeStyle = strokeStyle;
} }
}; };
@@ -332,7 +382,18 @@ ol.render.canvas.Immediate.prototype.setFillStrokeStyle =
* @inheritDoc * @inheritDoc
*/ */
ol.render.canvas.Immediate.prototype.setImageStyle = function(imageStyle) { ol.render.canvas.Immediate.prototype.setImageStyle = function(imageStyle) {
this.state_.imageStyle = imageStyle; if (!goog.isNull(imageStyle)) {
goog.asserts.assert(!goog.isNull(imageStyle.anchor));
goog.asserts.assert(goog.isDef(imageStyle.size));
goog.asserts.assert(!goog.isNull(imageStyle.image));
var state = this.state_;
state.anchorX = imageStyle.anchor[0];
state.anchorY = imageStyle.anchor[1];
state.image = imageStyle.image;
state.width = imageStyle.size[0];
state.height = imageStyle.size[1];
state.snapToPixel = imageStyle.snapToPixel;
}
}; };