From a62fd53d36de86eeafc17ac1c8c717a3ee6bbc6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Mon, 5 May 2014 09:30:35 +0200 Subject: [PATCH 1/3] Add "origin" option to ol.style.Image --- externs/olx.js | 10 ++++++++++ src/ol/style/circlestyle.js | 1 + src/ol/style/iconstyle.js | 7 +++++++ src/ol/style/imagestyle.js | 15 +++++++++++++++ 4 files changed, 33 insertions(+) diff --git a/externs/olx.js b/externs/olx.js index c939b81be9..a0c3d4933b 100644 --- a/externs/olx.js +++ b/externs/olx.js @@ -4365,6 +4365,7 @@ olx.style.FillOptions.prototype.color; * anchorXUnits: (ol.style.IconAnchorUnits|undefined), * anchorYUnits: (ol.style.IconAnchorUnits|undefined), * crossOrigin: (null|string|undefined), + * origin: (Array.|undefined), * scale: (number|undefined), * rotateWithView: (boolean|undefined), * rotation: (number|undefined), @@ -4415,6 +4416,15 @@ olx.style.IconOptions.prototype.anchorYUnits; olx.style.IconOptions.prototype.crossOrigin; +/** + * The top left corner, which, together with the size, define the + * sub-rectangle to use from the original icon image. Default value + * is `[0, 0]`. + * @type {Array.|undefined} + */ +olx.style.IconOptions.prototype.origin; + + /** * Scale. * @type {number|undefined} diff --git a/src/ol/style/circlestyle.js b/src/ol/style/circlestyle.js index 34e4e4c71a..8504431bd6 100644 --- a/src/ol/style/circlestyle.js +++ b/src/ol/style/circlestyle.js @@ -70,6 +70,7 @@ ol.style.Circle = function(opt_options) { goog.base(this, { opacity: 1, + origin: [0, 0], rotateWithView: false, rotation: 0, scale: 1, diff --git a/src/ol/style/iconstyle.js b/src/ol/style/iconstyle.js index b3f6f148de..3b5c00b0d4 100644 --- a/src/ol/style/iconstyle.js +++ b/src/ol/style/iconstyle.js @@ -102,6 +102,12 @@ ol.style.Icon = function(opt_options) { */ var opacity = goog.isDef(options.opacity) ? options.opacity : 1; + /** + * @private + * @type {Array.} + */ + var origin = goog.isDef(options.origin) ? options.origin : [0, 0]; + /** * @type {boolean} */ @@ -120,6 +126,7 @@ ol.style.Icon = function(opt_options) { goog.base(this, { opacity: opacity, + origin: origin, rotation: rotation, scale: scale, snapToPixel: undefined, diff --git a/src/ol/style/imagestyle.js b/src/ol/style/imagestyle.js index 3928d92a5c..7fe5b08a87 100644 --- a/src/ol/style/imagestyle.js +++ b/src/ol/style/imagestyle.js @@ -17,6 +17,7 @@ ol.style.ImageState = { /** * @typedef {{opacity: number, + * origin: Array., * rotateWithView: boolean, * rotation: number, * scale: number, @@ -39,6 +40,12 @@ ol.style.Image = function(options) { */ this.opacity_ = options.opacity; + /** + * @private + * @type {Array.} + */ + this.origin_ = options.origin; + /** * @private * @type {boolean} @@ -74,6 +81,14 @@ ol.style.Image.prototype.getOpacity = function() { }; +/** + * @return {Array.} Origin. + */ +ol.style.Image.prototype.getOrigin = function() { + return this.origin_; +}; + + /** * @return {boolean} Rotate with map. */ From 562d74dbed3043050e772b6bf95c8dc34ea253ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Mon, 5 May 2014 09:55:58 +0200 Subject: [PATCH 2/3] Make Replay API use ol.style.Image "origin" --- src/ol/render/canvas/canvasreplay.js | 53 ++++++++++++++++++++-------- 1 file changed, 39 insertions(+), 14 deletions(-) diff --git a/src/ol/render/canvas/canvasreplay.js b/src/ol/render/canvas/canvasreplay.js index 14ad84fc78..4eae5b3d6f 100644 --- a/src/ol/render/canvas/canvasreplay.js +++ b/src/ol/render/canvas/canvasreplay.js @@ -286,11 +286,13 @@ ol.render.canvas.Replay.prototype.replay_ = function( var anchorY = /** @type {number} */ (instruction[5]) * pixelRatio; var height = /** @type {number} */ (instruction[6]) * pixelRatio; var opacity = /** @type {number} */ (instruction[7]); - var rotateWithView = /** @type {boolean} */ (instruction[8]); - var rotation = /** @type {number} */ (instruction[9]); - var scale = /** @type {number} */ (instruction[10]); - var snapToPixel = /** @type {boolean|undefined} */ (instruction[11]); - var width = /** @type {number} */ (instruction[12]) * pixelRatio; + var originX = /** @type {number} */ (instruction[8]); + var originY = /** @type {number} */ (instruction[9]); + var rotateWithView = /** @type {boolean} */ (instruction[10]); + var rotation = /** @type {number} */ (instruction[11]); + var scale = /** @type {number} */ (instruction[12]); + var snapToPixel = /** @type {boolean|undefined} */ (instruction[13]); + var width = /** @type {number} */ (instruction[14]) * pixelRatio; if (rotateWithView) { rotation += viewRotation; } @@ -320,7 +322,8 @@ ol.render.canvas.Replay.prototype.replay_ = function( context.globalAlpha = alpha * opacity; } - context.drawImage(image, x, y, width, height); + context.drawImage(image, originX, originY, width, height, + x, y, width, height); if (opacity != 1) { context.globalAlpha = alpha; @@ -697,6 +700,18 @@ ol.render.canvas.ImageReplay = function(tolerance, maxExtent, resolution) { */ this.opacity_ = undefined; + /** + * @private + * @type {number|undefined} + */ + this.originX_ = undefined; + + /** + * @private + * @type {number|undefined} + */ + this.originY_ = undefined; + /** * @private * @type {boolean|undefined} @@ -758,6 +773,8 @@ ol.render.canvas.ImageReplay.prototype.drawPointGeometry = goog.asserts.assert(goog.isDef(this.anchorY_)); goog.asserts.assert(goog.isDef(this.height_)); goog.asserts.assert(goog.isDef(this.opacity_)); + goog.asserts.assert(goog.isDef(this.originX_)); + goog.asserts.assert(goog.isDef(this.originY_)); goog.asserts.assert(goog.isDef(this.rotateWithView_)); goog.asserts.assert(goog.isDef(this.rotation_)); goog.asserts.assert(goog.isDef(this.scale_)); @@ -773,16 +790,16 @@ ol.render.canvas.ImageReplay.prototype.drawPointGeometry = ol.render.canvas.Instruction.DRAW_IMAGE, myBegin, myEnd, this.image_, // Remaining arguments to DRAW_IMAGE are in alphabetical order this.anchorX_, this.anchorY_, this.height_, this.opacity_, - this.rotateWithView_, this.rotation_, this.scale_, this.snapToPixel_, - this.width_ + this.originX_, this.originY_, this.rotateWithView_, this.rotation_, + this.scale_, this.snapToPixel_, this.width_ ]); this.hitDetectionInstructions.push([ ol.render.canvas.Instruction.DRAW_IMAGE, myBegin, myEnd, this.hitDetectionImage_, // Remaining arguments to DRAW_IMAGE are in alphabetical order this.anchorX_, this.anchorY_, this.height_, this.opacity_, - this.rotateWithView_, this.rotation_, this.scale_, this.snapToPixel_, - this.width_ + this.originX_, this.originY_, this.rotateWithView_, this.rotation_, + this.scale_, this.snapToPixel_, this.width_ ]); this.endGeometry(pointGeometry, data); }; @@ -800,6 +817,8 @@ ol.render.canvas.ImageReplay.prototype.drawMultiPointGeometry = goog.asserts.assert(goog.isDef(this.anchorY_)); goog.asserts.assert(goog.isDef(this.height_)); goog.asserts.assert(goog.isDef(this.opacity_)); + goog.asserts.assert(goog.isDef(this.originX_)); + goog.asserts.assert(goog.isDef(this.originY_)); goog.asserts.assert(goog.isDef(this.rotateWithView_)); goog.asserts.assert(goog.isDef(this.rotation_)); goog.asserts.assert(goog.isDef(this.scale_)); @@ -815,16 +834,16 @@ ol.render.canvas.ImageReplay.prototype.drawMultiPointGeometry = ol.render.canvas.Instruction.DRAW_IMAGE, myBegin, myEnd, this.image_, // Remaining arguments to DRAW_IMAGE are in alphabetical order this.anchorX_, this.anchorY_, this.height_, this.opacity_, - this.rotateWithView_, this.rotation_, this.scale_, this.snapToPixel_, - this.width_ + this.originX_, this.originY_, this.rotateWithView_, this.rotation_, + this.scale_, this.snapToPixel_, this.width_ ]); this.hitDetectionInstructions.push([ ol.render.canvas.Instruction.DRAW_IMAGE, myBegin, myEnd, this.hitDetectionImage_, // Remaining arguments to DRAW_IMAGE are in alphabetical order this.anchorX_, this.anchorY_, this.height_, this.opacity_, - this.rotateWithView_, this.rotation_, this.scale_, this.snapToPixel_, - this.width_ + this.originX_, this.originY_, this.rotateWithView_, this.rotation_, + this.scale_, this.snapToPixel_, this.width_ ]); this.endGeometry(multiPointGeometry, data); }; @@ -843,6 +862,8 @@ ol.render.canvas.ImageReplay.prototype.finish = function() { this.height_ = undefined; this.scale_ = undefined; this.opacity_ = undefined; + this.originX_ = undefined; + this.originY_ = undefined; this.rotateWithView_ = undefined; this.rotation_ = undefined; this.snapToPixel_ = undefined; @@ -863,12 +884,16 @@ ol.render.canvas.ImageReplay.prototype.setImageStyle = function(imageStyle) { goog.asserts.assert(!goog.isNull(hitDetectionImage)); var image = imageStyle.getImage(1); goog.asserts.assert(!goog.isNull(image)); + var origin = imageStyle.getOrigin(); + goog.asserts.assert(!goog.isNull(origin)); this.anchorX_ = anchor[0]; this.anchorY_ = anchor[1]; this.hitDetectionImage_ = hitDetectionImage; this.image_ = image; this.height_ = size[1]; this.opacity_ = imageStyle.getOpacity(); + this.originX_ = origin[0]; + this.originY_ = origin[1]; this.rotateWithView_ = imageStyle.getRotateWithView(); this.rotation_ = imageStyle.getRotation(); this.scale_ = imageStyle.getScale(); From a7aab4eb47aca69f2de51c320bab916c2ad12de3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Mon, 5 May 2014 09:56:12 +0200 Subject: [PATCH 3/3] Make Immediate API use ol.style.Image "origin" --- src/ol/render/canvas/canvasimmediate.js | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/ol/render/canvas/canvasimmediate.js b/src/ol/render/canvas/canvasimmediate.js index 1968b406d7..b38c36dfb4 100644 --- a/src/ol/render/canvas/canvasimmediate.js +++ b/src/ol/render/canvas/canvasimmediate.js @@ -128,6 +128,18 @@ ol.render.canvas.Immediate = */ this.imageOpacity_ = 0; + /** + * @private + * @type {number} + */ + this.imageOriginX_ = 0; + + /** + * @private + * @type {number} + */ + this.imageOriginY_ = 0; + /** * @private * @type {boolean} @@ -269,7 +281,9 @@ ol.render.canvas.Immediate.prototype.drawImages_ = goog.vec.Mat4.getElement(localTransform, 0, 3), goog.vec.Mat4.getElement(localTransform, 1, 3)); } - context.drawImage(this.image_, x, y, this.imageWidth_, this.imageHeight_); + 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); @@ -873,6 +887,7 @@ ol.render.canvas.Immediate.prototype.setImageStyle = function(imageStyle) { // FIXME pixel ratio var imageImage = imageStyle.getImage(1); var imageOpacity = imageStyle.getOpacity(); + var imageOrigin = imageStyle.getOrigin(); var imageRotateWithView = imageStyle.getRotateWithView(); var imageRotation = imageStyle.getRotation(); var imageScale = imageStyle.getScale(); @@ -880,12 +895,15 @@ ol.render.canvas.Immediate.prototype.setImageStyle = function(imageStyle) { var imageSnapToPixel = imageStyle.getSnapToPixel(); 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_ = goog.isDef(imageOpacity) ? imageOpacity : 1; + this.imageOriginX_ = imageOrigin[0]; + this.imageOriginY_ = imageOrigin[1]; this.imageRotateWithView_ = goog.isDef(imageRotateWithView) ? imageRotateWithView : false; this.imageRotation_ = goog.isDef(imageRotation) ? imageRotation : 0;