// FIXME test, especially polygons with holes and multipolygons // FIXME need to handle large thick features (where pixel size matters) // FIXME add offset and end to ol.geom.flat.transform.transform2D? goog.provide('ol.render.canvas.Immediate'); goog.require('goog.array'); goog.require('goog.asserts'); goog.require('goog.object'); goog.require('goog.vec.Mat4'); goog.require('ol.color'); goog.require('ol.extent'); goog.require('ol.geom.flat.transform'); goog.require('ol.has'); goog.require('ol.render.IVectorContext'); goog.require('ol.render.canvas'); goog.require('ol.vec.Mat4'); /** * @classdesc * A concrete subclass of {@link ol.render.IVectorContext} that implements * direct rendering of features and geometries to an HTML5 Canvas context. * Instances of this class are created internally by the library and * provided to application code as vectorContext member of the * {@link ol.render.Event} object associated with postcompose, precompose and * render events emitted by layers and maps. * * @constructor * @implements {ol.render.IVectorContext} * @param {CanvasRenderingContext2D} context Context. * @param {number} pixelRatio Pixel ratio. * @param {ol.Extent} extent Extent. * @param {goog.vec.Mat4.Number} transform Transform. * @param {number} viewRotation View rotation. * @struct */ ol.render.canvas.Immediate = function(context, pixelRatio, extent, transform, viewRotation) { /** * @private * @type {Object.>} */ this.callbacksByZIndex_ = {}; /** * @private * @type {CanvasRenderingContext2D} */ this.context_ = context; /** * @private * @type {number} */ this.pixelRatio_ = pixelRatio; /** * @private * @type {ol.Extent} */ this.extent_ = extent; /** * @private * @type {goog.vec.Mat4.Number} */ this.transform_ = transform; /** * @private * @type {number} */ this.viewRotation_ = viewRotation; /** * @private * @type {?ol.render.canvas.FillState} */ this.contextFillState_ = null; /** * @private * @type {?ol.render.canvas.StrokeState} */ this.contextStrokeState_ = null; /** * @private * @type {?ol.render.canvas.TextState} */ this.contextTextState_ = null; /** * @private * @type {?ol.render.canvas.FillState} */ this.fillState_ = null; /** * @private * @type {?ol.render.canvas.StrokeState} */ this.strokeState_ = null; /** * @private * @type {HTMLCanvasElement|HTMLVideoElement|Image} */ this.image_ = null; /** * @private * @type {number} */ this.imageAnchorX_ = 0; /** * @private * @type {number} */ this.imageAnchorY_ = 0; /** * @private * @type {number} */ this.imageHeight_ = 0; /** * @private * @type {number} */ this.imageOpacity_ = 0; /** * @private * @type {number} */ this.imageOriginX_ = 0; /** * @private * @type {number} */ this.imageOriginY_ = 0; /** * @private * @type {boolean} */ this.imageRotateWithView_ = false; /** * @private * @type {number} */ this.imageRotation_ = 0; /** * @private * @type {number} */ this.imageScale_ = 0; /** * @private * @type {boolean} */ this.imageSnapToPixel_ = false; /** * @private * @type {number} */ this.imageWidth_ = 0; /** * @private * @type {string} */ this.text_ = ''; /** * @private * @type {number} */ this.textOffsetX_ = 0; /** * @private * @type {number} */ this.textOffsetY_ = 0; /** * @private * @type {number} */ this.textRotation_ = 0; /** * @private * @type {number} */ this.textScale_ = 0; /** * @private * @type {?ol.render.canvas.FillState} */ this.textFillState_ = null; /** * @private * @type {?ol.render.canvas.StrokeState} */ this.textStrokeState_ = null; /** * @private * @type {?ol.render.canvas.TextState} */ this.textState_ = null; /** * @private * @type {Array.} */ this.pixelCoordinates_ = []; /** * @private * @type {!goog.vec.Mat4.Number} */ this.tmpLocalTransform_ = goog.vec.Mat4.createNumber(); }; /** * @param {Array.} flatCoordinates Flat coordinates. * @param {number} offset Offset. * @param {number} end End. * @param {number} stride Stride. * @private */ ol.render.canvas.Immediate.prototype.drawImages_ = function(flatCoordinates, offset, end, stride) { if (goog.isNull(this.image_)) { return; } goog.asserts.assert(offset === 0); goog.asserts.assert(end == flatCoordinates.length); var pixelCoordinates = ol.geom.flat.transform.transform2D( flatCoordinates, offset, end, 2, this.transform_, this.pixelCoordinates_); var context = this.context_; var localTransform = this.tmpLocalTransform_; var alpha = context.globalAlpha; if (this.imageOpacity_ != 1) { context.globalAlpha = alpha * this.imageOpacity_; } var rotation = this.imageRotation_; if (this.imageRotateWithView_) { rotation += this.viewRotation_; } var i, ii; for (i = 0, ii = pixelCoordinates.length; i < ii; i += 2) { var x = pixelCoordinates[i] - this.imageAnchorX_; var y = pixelCoordinates[i + 1] - this.imageAnchorY_; if (this.imageSnapToPixel_) { x = (x + 0.5) | 0; y = (y + 0.5) | 0; } if (rotation !== 0 || this.imageScale_ != 1) { var centerX = x + this.imageAnchorX_; var centerY = y + this.imageAnchorY_; ol.vec.Mat4.makeTransform2D(localTransform, centerX, centerY, this.imageScale_, this.imageScale_, rotation, -centerX, -centerY); context.setTransform( goog.vec.Mat4.getElement(localTransform, 0, 0), goog.vec.Mat4.getElement(localTransform, 1, 0), goog.vec.Mat4.getElement(localTransform, 0, 1), goog.vec.Mat4.getElement(localTransform, 1, 1), goog.vec.Mat4.getElement(localTransform, 0, 3), goog.vec.Mat4.getElement(localTransform, 1, 3)); } context.drawImage(this.image_, this.imageOriginX_, this.imageOriginY_, this.imageWidth_, this.imageHeight_, x, y, this.imageWidth_, this.imageHeight_); } if (rotation !== 0 || this.imageScale_ != 1) { context.setTransform(1, 0, 0, 1, 0, 0); } if (this.imageOpacity_ != 1) { context.globalAlpha = alpha; } }; /** * @param {Array.} flatCoordinates Flat coordinates. * @param {number} offset Offset. * @param {number} end End. * @param {number} stride Stride. * @private */ ol.render.canvas.Immediate.prototype.drawText_ = function(flatCoordinates, offset, end, stride) { if (goog.isNull(this.textState_) || this.text_ === '') { return; } if (!goog.isNull(this.textFillState_)) { this.setContextFillState_(this.textFillState_); } if (!goog.isNull(this.textStrokeState_)) { this.setContextStrokeState_(this.textStrokeState_); } this.setContextTextState_(this.textState_); goog.asserts.assert(offset === 0); goog.asserts.assert(end == flatCoordinates.length); var pixelCoordinates = ol.geom.flat.transform.transform2D( flatCoordinates, offset, end, stride, this.transform_, this.pixelCoordinates_); var context = this.context_; for (; offset < end; offset += stride) { var x = pixelCoordinates[offset] + this.textOffsetX_; var y = pixelCoordinates[offset + 1] + this.textOffsetY_; if (this.textRotation_ !== 0 || this.textScale_ != 1) { var localTransform = ol.vec.Mat4.makeTransform2D(this.tmpLocalTransform_, x, y, this.textScale_, this.textScale_, this.textRotation_, -x, -y); context.setTransform( goog.vec.Mat4.getElement(localTransform, 0, 0), goog.vec.Mat4.getElement(localTransform, 1, 0), goog.vec.Mat4.getElement(localTransform, 0, 1), goog.vec.Mat4.getElement(localTransform, 1, 1), goog.vec.Mat4.getElement(localTransform, 0, 3), goog.vec.Mat4.getElement(localTransform, 1, 3)); } if (!goog.isNull(this.textStrokeState_)) { context.strokeText(this.text_, x, y); } if (!goog.isNull(this.textFillState_)) { context.fillText(this.text_, x, y); } } if (this.textRotation_ !== 0 || this.textScale_ != 1) { context.setTransform(1, 0, 0, 1, 0, 0); } }; /** * @param {Array.} flatCoordinates Flat coordinates. * @param {number} offset Offset. * @param {number} end End. * @param {number} stride Stride. * @param {boolean} close Close. * @private * @return {number} end End. */ ol.render.canvas.Immediate.prototype.moveToLineTo_ = function(flatCoordinates, offset, end, stride, close) { var context = this.context_; var pixelCoordinates = ol.geom.flat.transform.transform2D( flatCoordinates, offset, end, stride, this.transform_, this.pixelCoordinates_); context.moveTo(pixelCoordinates[0], pixelCoordinates[1]); var i; for (i = 2; i < pixelCoordinates.length; i += 2) { context.lineTo(pixelCoordinates[i], pixelCoordinates[i + 1]); } if (close) { context.lineTo(pixelCoordinates[0], pixelCoordinates[1]); } return end; }; /** * @param {Array.} flatCoordinates Flat coordinates. * @param {number} offset Offset. * @param {Array.} ends Ends. * @param {number} stride Stride. * @private * @return {number} End. */ ol.render.canvas.Immediate.prototype.drawRings_ = function(flatCoordinates, offset, ends, stride) { var context = this.context_; var i, ii; for (i = 0, ii = ends.length; i < ii; ++i) { offset = this.moveToLineTo_( flatCoordinates, offset, ends[i], stride, true); context.closePath(); // FIXME is this needed here? } return offset; }; /** * Register a function to be called for rendering at a given zIndex. The * function will be called asynchronously. The callback will receive a * reference to {@link ol.render.canvas.Immediate} context for drawing. * * @param {number} zIndex Z index. * @param {function(ol.render.canvas.Immediate)} callback Callback. * @api */ ol.render.canvas.Immediate.prototype.drawAsync = function(zIndex, callback) { var zIndexKey = zIndex.toString(); var callbacks = this.callbacksByZIndex_[zIndexKey]; if (goog.isDef(callbacks)) { callbacks.push(callback); } else { this.callbacksByZIndex_[zIndexKey] = [callback]; } }; /** * Render a circle geometry into the canvas. Rendering is immediate and uses * the current fill and stroke styles. * * @param {ol.geom.Circle} circleGeometry Circle geometry. * @param {ol.Feature} feature Feature, * @api */ ol.render.canvas.Immediate.prototype.drawCircleGeometry = function(circleGeometry, feature) { if (!ol.extent.intersects(this.extent_, circleGeometry.getExtent())) { return; } if (!goog.isNull(this.fillState_) || !goog.isNull(this.strokeState_)) { if (!goog.isNull(this.fillState_)) { this.setContextFillState_(this.fillState_); } if (!goog.isNull(this.strokeState_)) { this.setContextStrokeState_(this.strokeState_); } var pixelCoordinates = ol.geom.transformSimpleGeometry2D( circleGeometry, this.transform_, this.pixelCoordinates_); var dx = pixelCoordinates[2] - pixelCoordinates[0]; var dy = pixelCoordinates[3] - pixelCoordinates[1]; var radius = Math.sqrt(dx * dx + dy * dy); var context = this.context_; context.beginPath(); context.arc( pixelCoordinates[0], pixelCoordinates[1], radius, 0, 2 * Math.PI); if (!goog.isNull(this.fillState_)) { context.fill(); } if (!goog.isNull(this.strokeState_)) { context.stroke(); } } if (this.text_ !== '') { this.drawText_(circleGeometry.getCenter(), 0, 2, 2); } }; /** * Render a feature into the canvas. In order to respect the zIndex of the * style this method draws asynchronously and thus *after* calls to * drawXxxxGeometry have been finished, effectively drawing the feature * *on top* of everything else. You probably should be using * {@link ol.FeatureOverlay} instead of calling this method directly. * * @param {ol.Feature} feature Feature. * @param {ol.style.Style} style Style. * @api */ ol.render.canvas.Immediate.prototype.drawFeature = function(feature, style) { var geometry = style.getGeometryFunction()(feature); if (!goog.isDefAndNotNull(geometry) || !ol.extent.intersects(this.extent_, geometry.getExtent())) { return; } var zIndex = style.getZIndex(); if (!goog.isDef(zIndex)) { zIndex = 0; } this.drawAsync(zIndex, function(render) { render.setFillStrokeStyle(style.getFill(), style.getStroke()); render.setImageStyle(style.getImage()); render.setTextStyle(style.getText()); var renderGeometry = ol.render.canvas.Immediate.GEOMETRY_RENDERERS_[geometry.getType()]; goog.asserts.assert(goog.isDef(renderGeometry)); renderGeometry.call(render, geometry, null); }); }; /** * Render a GeometryCollection to the canvas. Rendering is immediate and * uses the current styles appropriate for each geometry in the collection. * * @param {ol.geom.GeometryCollection} geometryCollectionGeometry Geometry * collection. * @param {ol.Feature} feature Feature. */ ol.render.canvas.Immediate.prototype.drawGeometryCollectionGeometry = function(geometryCollectionGeometry, feature) { var geometries = geometryCollectionGeometry.getGeometriesArray(); var i, ii; for (i = 0, ii = geometries.length; i < ii; ++i) { var geometry = geometries[i]; var geometryRenderer = ol.render.canvas.Immediate.GEOMETRY_RENDERERS_[geometry.getType()]; goog.asserts.assert(goog.isDef(geometryRenderer)); geometryRenderer.call(this, geometry, feature); } }; /** * Render a Point geometry into the canvas. Rendering is immediate and uses * the current style. * * @param {ol.geom.Point} pointGeometry Point geometry. * @param {ol.Feature} feature Feature. * @api */ ol.render.canvas.Immediate.prototype.drawPointGeometry = function(pointGeometry, feature) { var flatCoordinates = pointGeometry.getFlatCoordinates(); var stride = pointGeometry.getStride(); if (!goog.isNull(this.image_)) { this.drawImages_(flatCoordinates, 0, flatCoordinates.length, stride); } if (this.text_ !== '') { this.drawText_(flatCoordinates, 0, flatCoordinates.length, stride); } }; /** * Render a MultiPoint geometry into the canvas. Rendering is immediate and * uses the current style. * * @param {ol.geom.MultiPoint} multiPointGeometry MultiPoint geometry. * @param {ol.Feature} feature Feature. * @api */ ol.render.canvas.Immediate.prototype.drawMultiPointGeometry = function(multiPointGeometry, feature) { var flatCoordinates = multiPointGeometry.getFlatCoordinates(); var stride = multiPointGeometry.getStride(); if (!goog.isNull(this.image_)) { this.drawImages_(flatCoordinates, 0, flatCoordinates.length, stride); } if (this.text_ !== '') { this.drawText_(flatCoordinates, 0, flatCoordinates.length, stride); } }; /** * Render a LineString into the canvas. Rendering is immediate and uses * the current style. * * @param {ol.geom.LineString} lineStringGeometry Line string geometry. * @param {ol.Feature} feature Feature. * @api */ ol.render.canvas.Immediate.prototype.drawLineStringGeometry = function(lineStringGeometry, feature) { if (!ol.extent.intersects(this.extent_, lineStringGeometry.getExtent())) { return; } if (!goog.isNull(this.strokeState_)) { this.setContextStrokeState_(this.strokeState_); var context = this.context_; var flatCoordinates = lineStringGeometry.getFlatCoordinates(); context.beginPath(); this.moveToLineTo_(flatCoordinates, 0, flatCoordinates.length, lineStringGeometry.getStride(), false); context.stroke(); } if (this.text_ !== '') { var flatMidpoint = lineStringGeometry.getFlatMidpoint(); this.drawText_(flatMidpoint, 0, 2, 2); } }; /** * Render a MultiLineString geometry into the canvas. Rendering is immediate * and uses the current style. * * @param {ol.geom.MultiLineString} multiLineStringGeometry * MultiLineString geometry. * @param {ol.Feature} feature Feature. * @api */ ol.render.canvas.Immediate.prototype.drawMultiLineStringGeometry = function(multiLineStringGeometry, feature) { var geometryExtent = multiLineStringGeometry.getExtent(); if (!ol.extent.intersects(this.extent_, geometryExtent)) { return; } if (!goog.isNull(this.strokeState_)) { this.setContextStrokeState_(this.strokeState_); var context = this.context_; var flatCoordinates = multiLineStringGeometry.getFlatCoordinates(); var offset = 0; var ends = multiLineStringGeometry.getEnds(); var stride = multiLineStringGeometry.getStride(); context.beginPath(); var i, ii; for (i = 0, ii = ends.length; i < ii; ++i) { offset = this.moveToLineTo_( flatCoordinates, offset, ends[i], stride, false); } context.stroke(); } if (this.text_ !== '') { var flatMidpoints = multiLineStringGeometry.getFlatMidpoints(); this.drawText_(flatMidpoints, 0, flatMidpoints.length, 2); } }; /** * Render a Polygon geometry into the canvas. Rendering is immediate and uses * the current style. * * @param {ol.geom.Polygon} polygonGeometry Polygon geometry. * @param {ol.Feature} feature Feature. * @api */ ol.render.canvas.Immediate.prototype.drawPolygonGeometry = function(polygonGeometry, feature) { if (!ol.extent.intersects(this.extent_, polygonGeometry.getExtent())) { return; } if (!goog.isNull(this.strokeState_) || !goog.isNull(this.fillState_)) { if (!goog.isNull(this.fillState_)) { this.setContextFillState_(this.fillState_); } if (!goog.isNull(this.strokeState_)) { this.setContextStrokeState_(this.strokeState_); } var context = this.context_; context.beginPath(); this.drawRings_(polygonGeometry.getOrientedFlatCoordinates(), 0, polygonGeometry.getEnds(), polygonGeometry.getStride()); if (!goog.isNull(this.fillState_)) { context.fill(); } if (!goog.isNull(this.strokeState_)) { context.stroke(); } } if (this.text_ !== '') { var flatInteriorPoint = polygonGeometry.getFlatInteriorPoint(); this.drawText_(flatInteriorPoint, 0, 2, 2); } }; /** * Render MultiPolygon geometry into the canvas. Rendering is immediate and * uses the current style. * @param {ol.geom.MultiPolygon} multiPolygonGeometry MultiPolygon geometry. * @param {ol.Feature} feature Feature. * @api */ ol.render.canvas.Immediate.prototype.drawMultiPolygonGeometry = function(multiPolygonGeometry, feature) { if (!ol.extent.intersects(this.extent_, multiPolygonGeometry.getExtent())) { return; } if (!goog.isNull(this.strokeState_) || !goog.isNull(this.fillState_)) { if (!goog.isNull(this.fillState_)) { this.setContextFillState_(this.fillState_); } if (!goog.isNull(this.strokeState_)) { this.setContextStrokeState_(this.strokeState_); } var context = this.context_; var flatCoordinates = multiPolygonGeometry.getOrientedFlatCoordinates(); var offset = 0; var endss = multiPolygonGeometry.getEndss(); var stride = multiPolygonGeometry.getStride(); var i, ii; for (i = 0, ii = endss.length; i < ii; ++i) { var ends = endss[i]; context.beginPath(); offset = this.drawRings_(flatCoordinates, offset, ends, stride); if (!goog.isNull(this.fillState_)) { context.fill(); } if (!goog.isNull(this.strokeState_)) { context.stroke(); } } } if (this.text_ !== '') { var flatInteriorPoints = multiPolygonGeometry.getFlatInteriorPoints(); this.drawText_(flatInteriorPoints, 0, flatInteriorPoints.length, 2); } }; /** * @inheritDoc */ ol.render.canvas.Immediate.prototype.drawText = goog.abstractMethod; /** * FIXME: empty description for jsdoc */ ol.render.canvas.Immediate.prototype.flush = function() { /** @type {Array.} */ var zs = goog.array.map(goog.object.getKeys(this.callbacksByZIndex_), Number); goog.array.sort(zs); var i, ii, callbacks, j, jj; for (i = 0, ii = zs.length; i < ii; ++i) { callbacks = this.callbacksByZIndex_[zs[i].toString()]; for (j = 0, jj = callbacks.length; j < jj; ++j) { callbacks[j](this); } } }; /** * @param {ol.render.canvas.FillState} fillState Fill state. * @private */ ol.render.canvas.Immediate.prototype.setContextFillState_ = function(fillState) { var context = this.context_; var contextFillState = this.contextFillState_; if (goog.isNull(contextFillState)) { context.fillStyle = fillState.fillStyle; this.contextFillState_ = { fillStyle: fillState.fillStyle }; } else { if (contextFillState.fillStyle != fillState.fillStyle) { contextFillState.fillStyle = context.fillStyle = fillState.fillStyle; } } }; /** * @param {ol.render.canvas.StrokeState} strokeState Stroke state. * @private */ ol.render.canvas.Immediate.prototype.setContextStrokeState_ = function(strokeState) { var context = this.context_; var contextStrokeState = this.contextStrokeState_; if (goog.isNull(contextStrokeState)) { context.lineCap = strokeState.lineCap; if (ol.has.CANVAS_LINE_DASH) { context.setLineDash(strokeState.lineDash); } context.lineJoin = strokeState.lineJoin; context.lineWidth = strokeState.lineWidth; context.miterLimit = strokeState.miterLimit; context.strokeStyle = strokeState.strokeStyle; this.contextStrokeState_ = { lineCap: strokeState.lineCap, lineDash: strokeState.lineDash, lineJoin: strokeState.lineJoin, lineWidth: strokeState.lineWidth, miterLimit: strokeState.miterLimit, strokeStyle: strokeState.strokeStyle }; } else { if (contextStrokeState.lineCap != strokeState.lineCap) { contextStrokeState.lineCap = context.lineCap = strokeState.lineCap; } if (ol.has.CANVAS_LINE_DASH) { if (!goog.array.equals( contextStrokeState.lineDash, strokeState.lineDash)) { context.setLineDash(contextStrokeState.lineDash = strokeState.lineDash); } } if (contextStrokeState.lineJoin != strokeState.lineJoin) { contextStrokeState.lineJoin = context.lineJoin = strokeState.lineJoin; } if (contextStrokeState.lineWidth != strokeState.lineWidth) { contextStrokeState.lineWidth = context.lineWidth = strokeState.lineWidth; } if (contextStrokeState.miterLimit != strokeState.miterLimit) { contextStrokeState.miterLimit = context.miterLimit = strokeState.miterLimit; } if (contextStrokeState.strokeStyle != strokeState.strokeStyle) { contextStrokeState.strokeStyle = context.strokeStyle = strokeState.strokeStyle; } } }; /** * @param {ol.render.canvas.TextState} textState Text state. * @private */ ol.render.canvas.Immediate.prototype.setContextTextState_ = function(textState) { var context = this.context_; var contextTextState = this.contextTextState_; if (goog.isNull(contextTextState)) { context.font = textState.font; context.textAlign = textState.textAlign; context.textBaseline = textState.textBaseline; this.contextTextState_ = { font: textState.font, textAlign: textState.textAlign, textBaseline: textState.textBaseline }; } else { if (contextTextState.font != textState.font) { contextTextState.font = context.font = textState.font; } if (contextTextState.textAlign != textState.textAlign) { contextTextState.textAlign = context.textAlign = textState.textAlign; } if (contextTextState.textBaseline != textState.textBaseline) { contextTextState.textBaseline = context.textBaseline = textState.textBaseline; } } }; /** * Set the fill and stroke style for subsequent draw operations. To clear * either fill or stroke styles, pass null for the appropriate parameter. * * @param {ol.style.Fill} fillStyle Fill style. * @param {ol.style.Stroke} strokeStyle Stroke style. * @api */ ol.render.canvas.Immediate.prototype.setFillStrokeStyle = function(fillStyle, strokeStyle) { if (goog.isNull(fillStyle)) { this.fillState_ = null; } else { var fillStyleColor = fillStyle.getColor(); this.fillState_ = { fillStyle: ol.color.asString(!goog.isNull(fillStyleColor) ? fillStyleColor : ol.render.canvas.defaultFillStyle) }; } if (goog.isNull(strokeStyle)) { this.strokeState_ = null; } else { var strokeStyleColor = strokeStyle.getColor(); var strokeStyleLineCap = strokeStyle.getLineCap(); var strokeStyleLineDash = strokeStyle.getLineDash(); var strokeStyleLineJoin = strokeStyle.getLineJoin(); var strokeStyleWidth = strokeStyle.getWidth(); var strokeStyleMiterLimit = strokeStyle.getMiterLimit(); this.strokeState_ = { lineCap: goog.isDef(strokeStyleLineCap) ? strokeStyleLineCap : ol.render.canvas.defaultLineCap, lineDash: goog.isDefAndNotNull(strokeStyleLineDash) ? strokeStyleLineDash : ol.render.canvas.defaultLineDash, lineJoin: goog.isDef(strokeStyleLineJoin) ? strokeStyleLineJoin : ol.render.canvas.defaultLineJoin, lineWidth: this.pixelRatio_ * (goog.isDef(strokeStyleWidth) ? strokeStyleWidth : ol.render.canvas.defaultLineWidth), miterLimit: goog.isDef(strokeStyleMiterLimit) ? strokeStyleMiterLimit : ol.render.canvas.defaultMiterLimit, strokeStyle: ol.color.asString(!goog.isNull(strokeStyleColor) ? strokeStyleColor : ol.render.canvas.defaultStrokeStyle) }; } }; /** * Set the image style for subsequent draw operations. Pass null to remove * the image style. * * @param {ol.style.Image} imageStyle Image style. * @api */ ol.render.canvas.Immediate.prototype.setImageStyle = function(imageStyle) { if (goog.isNull(imageStyle)) { this.image_ = null; } else { var imageAnchor = imageStyle.getAnchor(); // FIXME pixel ratio var imageImage = imageStyle.getImage(1); var imageOrigin = imageStyle.getOrigin(); var imageSize = imageStyle.getSize(); goog.asserts.assert(!goog.isNull(imageAnchor)); goog.asserts.assert(!goog.isNull(imageImage)); goog.asserts.assert(!goog.isNull(imageOrigin)); goog.asserts.assert(!goog.isNull(imageSize)); this.imageAnchorX_ = imageAnchor[0]; this.imageAnchorY_ = imageAnchor[1]; this.imageHeight_ = imageSize[1]; this.image_ = imageImage; this.imageOpacity_ = imageStyle.getOpacity(); this.imageOriginX_ = imageOrigin[0]; this.imageOriginY_ = imageOrigin[1]; this.imageRotateWithView_ = imageStyle.getRotateWithView(); this.imageRotation_ = imageStyle.getRotation(); this.imageScale_ = imageStyle.getScale(); this.imageSnapToPixel_ = imageStyle.getSnapToPixel(); this.imageWidth_ = imageSize[0]; } }; /** * Set the text style for subsequent draw operations. Pass null to * remove the text style. * * @param {ol.style.Text} textStyle Text style. * @api */ ol.render.canvas.Immediate.prototype.setTextStyle = function(textStyle) { if (goog.isNull(textStyle)) { this.text_ = ''; } else { var textFillStyle = textStyle.getFill(); if (goog.isNull(textFillStyle)) { this.textFillState_ = null; } else { var textFillStyleColor = textFillStyle.getColor(); this.textFillState_ = { fillStyle: ol.color.asString(!goog.isNull(textFillStyleColor) ? textFillStyleColor : ol.render.canvas.defaultFillStyle) }; } var textStrokeStyle = textStyle.getStroke(); if (goog.isNull(textStrokeStyle)) { this.textStrokeState_ = null; } else { var textStrokeStyleColor = textStrokeStyle.getColor(); var textStrokeStyleLineCap = textStrokeStyle.getLineCap(); var textStrokeStyleLineDash = textStrokeStyle.getLineDash(); var textStrokeStyleLineJoin = textStrokeStyle.getLineJoin(); var textStrokeStyleWidth = textStrokeStyle.getWidth(); var textStrokeStyleMiterLimit = textStrokeStyle.getMiterLimit(); this.textStrokeState_ = { lineCap: goog.isDef(textStrokeStyleLineCap) ? textStrokeStyleLineCap : ol.render.canvas.defaultLineCap, lineDash: goog.isDefAndNotNull(textStrokeStyleLineDash) ? textStrokeStyleLineDash : ol.render.canvas.defaultLineDash, lineJoin: goog.isDef(textStrokeStyleLineJoin) ? textStrokeStyleLineJoin : ol.render.canvas.defaultLineJoin, lineWidth: goog.isDef(textStrokeStyleWidth) ? textStrokeStyleWidth : ol.render.canvas.defaultLineWidth, miterLimit: goog.isDef(textStrokeStyleMiterLimit) ? textStrokeStyleMiterLimit : ol.render.canvas.defaultMiterLimit, strokeStyle: ol.color.asString(!goog.isNull(textStrokeStyleColor) ? textStrokeStyleColor : ol.render.canvas.defaultStrokeStyle) }; } var textFont = textStyle.getFont(); var textOffsetX = textStyle.getOffsetX(); var textOffsetY = textStyle.getOffsetY(); var textRotation = textStyle.getRotation(); var textScale = textStyle.getScale(); var textText = textStyle.getText(); var textTextAlign = textStyle.getTextAlign(); var textTextBaseline = textStyle.getTextBaseline(); this.textState_ = { font: goog.isDef(textFont) ? textFont : ol.render.canvas.defaultFont, textAlign: goog.isDef(textTextAlign) ? textTextAlign : ol.render.canvas.defaultTextAlign, textBaseline: goog.isDef(textTextBaseline) ? textTextBaseline : ol.render.canvas.defaultTextBaseline }; this.text_ = goog.isDef(textText) ? textText : ''; this.textOffsetX_ = goog.isDef(textOffsetX) ? (this.pixelRatio_ * textOffsetX) : 0; this.textOffsetY_ = goog.isDef(textOffsetY) ? (this.pixelRatio_ * textOffsetY) : 0; this.textRotation_ = goog.isDef(textRotation) ? textRotation : 0; this.textScale_ = this.pixelRatio_ * (goog.isDef(textScale) ? textScale : 1); } }; /** * @const * @private * @type {Object.} */ ol.render.canvas.Immediate.GEOMETRY_RENDERERS_ = { 'Point': ol.render.canvas.Immediate.prototype.drawPointGeometry, 'LineString': ol.render.canvas.Immediate.prototype.drawLineStringGeometry, 'Polygon': ol.render.canvas.Immediate.prototype.drawPolygonGeometry, 'MultiPoint': ol.render.canvas.Immediate.prototype.drawMultiPointGeometry, 'MultiLineString': ol.render.canvas.Immediate.prototype.drawMultiLineStringGeometry, 'MultiPolygon': ol.render.canvas.Immediate.prototype.drawMultiPolygonGeometry, 'GeometryCollection': ol.render.canvas.Immediate.prototype.drawGeometryCollectionGeometry, 'Circle': ol.render.canvas.Immediate.prototype.drawCircleGeometry };