diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index 97b8bd5dee..41930724ac 100644 --- a/src/objectliterals.jsdoc +++ b/src/objectliterals.jsdoc @@ -629,6 +629,7 @@ * @property {ol.Pixel} anchor Anchor. * @property {HTMLCanvasElement|HTMLVideoElement|Image} image Image. * @property {number} rotation Rotation. + * @property {ol.Size} size Image size in pixel. * @property {boolean|undefined} snapToPixel Whether the image should be * snapped to the closed pixel at rendering time. * @property {boolean} subtractViewRotation Whether the image should be diff --git a/src/ol/render/canvas/canvasimmediate.js b/src/ol/render/canvas/canvasimmediate.js index 225d0e6809..129dc38abf 100644 --- a/src/ol/render/canvas/canvasimmediate.js +++ b/src/ol/render/canvas/canvasimmediate.js @@ -84,7 +84,8 @@ ol.render.canvas.Immediate.prototype.drawImages_ = function(geometry) { x = (x + 0.5) | 0; y = (y + 0.5) | 0; } - context.drawImage(imageStyle.image, x, y); + context.drawImage(imageStyle.image, x, y, + imageStyle.size[0], imageStyle.size[1]); } }; diff --git a/src/ol/render/canvas/canvasreplay.js b/src/ol/render/canvas/canvasreplay.js index bd921b6cc4..2caaf1c3f4 100644 --- a/src/ol/render/canvas/canvasreplay.js +++ b/src/ol/render/canvas/canvasreplay.js @@ -128,9 +128,11 @@ ol.render.canvas.Replay.prototype.draw = function(context, transform) { } else if (type == ol.render.canvas.Instruction.DRAW_IMAGE) { dd = /** @type {number} */ (instruction[1]); var anchor = /** @type {ol.Pixel} */ (instruction[2]); + var width = /** @type {number} */ (instruction[3]); + var height = /** @type {number} */ (instruction[4]); var image = /** @type {HTMLCanvasElement|HTMLVideoElement|Image} */ - (instruction[3]); - var snapToPixel = /** @type {boolean|undefined} */ (instruction[4]); + (instruction[5]); + var snapToPixel = /** @type {boolean|undefined} */ (instruction[6]); for (; d < dd; d += 2) { var x = pixelCoordinates[d] - anchor[0]; var y = pixelCoordinates[d + 1] - anchor[1]; @@ -138,7 +140,7 @@ ol.render.canvas.Replay.prototype.draw = function(context, transform) { x = (x + 0.5) | 0; y = (y + 0.5) | 0; } - context.drawImage(image, x, y); + context.drawImage(image, x, y, width, height); } ++i; } else if (type == ol.render.canvas.Instruction.FILL) { @@ -275,6 +277,18 @@ ol.render.canvas.ImageReplay = function() { */ this.image_ = null; + /** + * @private + * @type {number} + */ + this.height_ = undefined; + + /** + * @private + * @type {number} + */ + this.width_ = undefined; + /** * @private * @type {boolean|undefined} @@ -309,14 +323,18 @@ ol.render.canvas.ImageReplay.prototype.drawPointGeometry = return; } goog.asserts.assert(!goog.isNull(this.anchor_)); + goog.asserts.assert(goog.isDef(this.height_)); + goog.asserts.assert(goog.isDef(this.width_)); ol.extent.extend(this.extent_, pointGeometry.getExtent()); var flatCoordinates = pointGeometry.getFlatCoordinates(); var stride = pointGeometry.getStride(); var myEnd = this.drawCoordinates_( flatCoordinates, 0, flatCoordinates.length, stride); - this.instructions.push( - [ol.render.canvas.Instruction.DRAW_IMAGE, myEnd, - this.anchor_, this.image_, this.snapToPixel_]); + this.instructions.push([ + ol.render.canvas.Instruction.DRAW_IMAGE, myEnd, + this.anchor_, this.width_, this.height_, + this.image_, this.snapToPixel_ + ]); }; @@ -329,14 +347,18 @@ ol.render.canvas.ImageReplay.prototype.drawMultiPointGeometry = return; } goog.asserts.assert(!goog.isNull(this.anchor_)); + goog.asserts.assert(goog.isDef(this.height_)); + goog.asserts.assert(goog.isDef(this.width_)); ol.extent.extend(this.extent_, multiPointGeometry.getExtent()); var flatCoordinates = multiPointGeometry.getFlatCoordinates(); var stride = multiPointGeometry.getStride(); var myEnd = this.drawCoordinates_( flatCoordinates, 0, flatCoordinates.length, stride); - this.instructions.push( - [ol.render.canvas.Instruction.DRAW_IMAGE, myEnd, - this.anchor_, this.image_, this.snapToPixel_]); + this.instructions.push([ + ol.render.canvas.Instruction.DRAW_IMAGE, myEnd, + this.anchor_, this.width_, this.height_, + this.image_, this.snapToPixel_ + ]); }; @@ -347,6 +369,8 @@ ol.render.canvas.ImageReplay.prototype.finish = function() { // FIXME this doesn't really protect us against further calls to draw*Geometry this.anchor_ = null; this.image_ = null; + this.height_ = undefined; + this.width_ = undefined; this.snapToPixel_ = undefined; }; @@ -357,9 +381,12 @@ ol.render.canvas.ImageReplay.prototype.finish = function() { ol.render.canvas.ImageReplay.prototype.setImageStyle = function(imageStyle) { goog.asserts.assert(!goog.isNull(imageStyle)); goog.asserts.assert(!goog.isNull(imageStyle.anchor)); + goog.asserts.assert(goog.isDef(imageStyle.size)); goog.asserts.assert(!goog.isNull(imageStyle.image)); this.anchor_ = imageStyle.anchor; this.image_ = imageStyle.image; + this.width_ = imageStyle.size[0]; + this.height_ = imageStyle.size[1]; this.snapToPixel_ = imageStyle.snapToPixel; }; diff --git a/src/ol/shape.js b/src/ol/shape.js index 365e499d7d..c225806686 100644 --- a/src/ol/shape.js +++ b/src/ol/shape.js @@ -45,6 +45,7 @@ ol.shape.renderCircle = function(radius, fillStyle, strokeStyle) { return new ol.style.Image({ anchor: [size / 2, size / 2], + size: [size, size], image: canvas, rotation: 0, snapToPixel: undefined, diff --git a/src/ol/style/imagestyle.js b/src/ol/style/imagestyle.js index 596f7ecdbd..4f9af57ce5 100644 --- a/src/ol/style/imagestyle.js +++ b/src/ol/style/imagestyle.js @@ -25,6 +25,11 @@ ol.style.Image = function(options) { */ this.rotation = options.rotation; + /** + * @type {ol.Size} + */ + this.size = options.size; + /** * @type {boolean|undefined} */