Merge pull request #1696 from fredj/ol.style.image-opacity

Add new opacity property to ol.style.Image

examples/icon.js

@@ -23,6 +23,7 @@ var iconStyle = new ol.style.Style({
     anchor: [0.5, 46],
     anchorXUnits: 'fraction',
     anchorYUnits: 'pixels',
+    opacity: 0.75,
     src: 'data/icon.png'
   }))
 });

src/ol/render/canvas/canvasimmediate.js

@@ -114,6 +114,12 @@ ol.render.canvas.Immediate = function(context, pixelRatio, extent, transform) {
    */
   this.imageHeight_ = 0;
 
+  /**
+   * @private
+   * @type {number}
+   */
+  this.imageOpacity_ = 0;
+
   /**
    * @private
    * @type {number}
@@ -207,6 +213,10 @@ ol.render.canvas.Immediate.prototype.drawImages_ =
       flatCoordinates, 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 i, ii;
   for (i = 0, ii = pixelCoordinates.length; i < ii; i += 2) {
     var x = pixelCoordinates[i] - this.imageAnchorX_;
@@ -234,6 +244,9 @@ ol.render.canvas.Immediate.prototype.drawImages_ =
   if (this.imageRotation_ !== 0 || this.imageScale_ != 1) {
     context.setTransform(1, 0, 0, 1, 0, 0);
   }
+  if (this.imageOpacity_ != 1) {
+    context.globalAlpha = alpha;
+  }
 };
 
 
@@ -766,6 +779,7 @@ ol.render.canvas.Immediate.prototype.setImageStyle = function(imageStyle) {
     var imageAnchor = imageStyle.getAnchor();
     // FIXME pixel ratio
     var imageImage = imageStyle.getImage(1);
+    var imageOpacity = imageStyle.getOpacity();
     var imageRotation = imageStyle.getRotation();
     var imageScale = imageStyle.getScale();
     var imageSize = imageStyle.getSize();
@@ -777,6 +791,7 @@ ol.render.canvas.Immediate.prototype.setImageStyle = function(imageStyle) {
     this.imageAnchorY_ = imageAnchor[1];
     this.imageHeight_ = imageSize[1];
     this.image_ = imageImage;
+    this.imageOpacity_ = goog.isDef(imageOpacity) ? imageOpacity : 1;
     this.imageRotation_ = goog.isDef(imageRotation) ? imageRotation : 0;
     this.imageScale_ = goog.isDef(imageScale) ? imageScale : 1;
     this.imageSnapToPixel_ = goog.isDef(imageSnapToPixel) ?

src/ol/render/canvas/canvasreplay.js

@@ -229,10 +229,11 @@ ol.render.canvas.Replay.prototype.replay_ =
         var anchorX = /** @type {number} */ (instruction[4]) * pixelRatio;
         var anchorY = /** @type {number} */ (instruction[5]) * pixelRatio;
         var height = /** @type {number} */ (instruction[6]) * pixelRatio;
-        var rotation = /** @type {number} */ (instruction[7]);
-        var scale = /** @type {number} */ (instruction[8]);
-        var snapToPixel = /** @type {boolean|undefined} */ (instruction[9]);
-        var width = /** @type {number} */ (instruction[10]) * pixelRatio;
+        var opacity = /** @type {number} */ (instruction[7]);
+        var rotation = /** @type {number} */ (instruction[8]);
+        var scale = /** @type {number} */ (instruction[9]);
+        var snapToPixel = /** @type {boolean|undefined} */ (instruction[10]);
+        var width = /** @type {number} */ (instruction[11]) * pixelRatio;
         for (; d < dd; d += 2) {
           x = pixelCoordinates[d] - anchorX;
           y = pixelCoordinates[d + 1] - anchorY;
@@ -254,7 +255,16 @@ ol.render.canvas.Replay.prototype.replay_ =
                 goog.vec.Mat4.getElement(localTransform, 0, 3),
                 goog.vec.Mat4.getElement(localTransform, 1, 3));
           }
+          var alpha = context.globalAlpha;
+          if (opacity != 1) {
+            context.globalAlpha = alpha * opacity;
+          }
+
           context.drawImage(image, x, y, width, height);
+
+          if (opacity != 1) {
+            context.globalAlpha = alpha;
+          }
           if (scale != 1 || rotation !== 0) {
             context.setTransform(1, 0, 0, 1, 0, 0);
           }
@@ -601,6 +611,12 @@ ol.render.canvas.ImageReplay = function(tolerance) {
    */
   this.height_ = undefined;
 
+  /**
+   * @private
+   * @type {number|undefined}
+   */
+  this.opacity_ = undefined;
+
   /**
    * @private
    * @type {number|undefined}
@@ -655,6 +671,7 @@ ol.render.canvas.ImageReplay.prototype.drawPointGeometry =
   goog.asserts.assert(goog.isDef(this.anchorX_));
   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.rotation_));
   goog.asserts.assert(goog.isDef(this.scale_));
   goog.asserts.assert(goog.isDef(this.width_));
@@ -668,15 +685,15 @@ ol.render.canvas.ImageReplay.prototype.drawPointGeometry =
   this.instructions.push([
     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.rotation_, this.scale_,
-    this.snapToPixel_, this.width_
+    this.anchorX_, this.anchorY_, this.height_, this.opacity_, 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.rotation_, this.scale_,
-    this.snapToPixel_, this.width_
+    this.anchorX_, this.anchorY_, this.height_, this.opacity_, this.rotation_,
+    this.scale_, this.snapToPixel_, this.width_
   ]);
   this.endGeometry(pointGeometry, data);
 };
@@ -693,6 +710,7 @@ ol.render.canvas.ImageReplay.prototype.drawMultiPointGeometry =
   goog.asserts.assert(goog.isDef(this.anchorX_));
   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.rotation_));
   goog.asserts.assert(goog.isDef(this.scale_));
   goog.asserts.assert(goog.isDef(this.width_));
@@ -706,15 +724,15 @@ ol.render.canvas.ImageReplay.prototype.drawMultiPointGeometry =
   this.instructions.push([
     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.rotation_, this.scale_,
-    this.snapToPixel_, this.width_
+    this.anchorX_, this.anchorY_, this.height_, this.opacity_, 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.rotation_, this.scale_,
-    this.snapToPixel_, this.width_
+    this.anchorX_, this.anchorY_, this.height_, this.opacity_, this.rotation_,
+    this.scale_, this.snapToPixel_, this.width_
   ]);
   this.endGeometry(multiPointGeometry, data);
 };
@@ -732,6 +750,7 @@ ol.render.canvas.ImageReplay.prototype.finish = function() {
   this.image_ = null;
   this.height_ = undefined;
   this.scale_ = undefined;
+  this.opacity_ = undefined;
   this.rotation_ = undefined;
   this.snapToPixel_ = undefined;
   this.width_ = undefined;
@@ -756,6 +775,7 @@ ol.render.canvas.ImageReplay.prototype.setImageStyle = function(imageStyle) {
   this.hitDetectionImage_ = hitDetectionImage;
   this.image_ = image;
   this.height_ = size[1];
+  this.opacity_ = imageStyle.getOpacity();
   this.rotation_ = imageStyle.getRotation();
   this.scale_ = imageStyle.getScale();
   this.snapToPixel_ = imageStyle.getSnapToPixel();

src/ol/style/circlestyle.js

@@ -69,6 +69,7 @@ ol.style.Circle = function(opt_options) {
   this.size_ = [size, size];
 
   goog.base(this, {
+    opacity: 1,
     rotation: 0,
     scale: 1,
     snapToPixel: undefined,

src/ol/style/iconstyle.js

@@ -72,6 +72,11 @@ ol.style.Icon = function(opt_options) {
    */
   this.size_ = goog.isDef(options.size) ? options.size : null;
 
+  /**
+   * @type {number}
+   */
+  var opacity = goog.isDef(options.opacity) ? options.opacity : 1;
+
   /**
    * @type {number}
    */
@@ -83,6 +88,7 @@ ol.style.Icon = function(opt_options) {
   var scale = goog.isDef(options.scale) ? options.scale : 1;
 
   goog.base(this, {
+    opacity: opacity,
     rotation: rotation,
     scale: scale,
     snapToPixel: undefined,

src/ol/style/imagestyle.js

@@ -16,7 +16,8 @@ ol.style.ImageState = {
 
 
 /**
- * @typedef {{rotation: number,
+ * @typedef {{opacity: number,
+ *            rotation: number,
  *            scale: number,
  *            snapToPixel: (boolean|undefined),
  *            subtractViewRotation: boolean}}
@@ -31,6 +32,12 @@ ol.style.ImageOptions;
  */
 ol.style.Image = function(options) {
 
+  /**
+   * @private
+   * @type {number}
+   */
+  this.opacity_ = options.opacity;
+
   /**
    * @private
    * @type {number}
@@ -58,6 +65,14 @@ ol.style.Image = function(options) {
 };
 
 
+/**
+ * @return {number} Opacity.
+ */
+ol.style.Image.prototype.getOpacity = function() {
+  return this.opacity_;
+};
+
+
 /**
  * @return {number} Rotation.
  */