Merge pull request #1595 from elemoine/icon-hit-detection

Hit detect circle points with no fill

src/ol/style/circlestyle.js

@@ -29,6 +29,12 @@ ol.style.Circle = function(opt_options) {
   this.canvas_ = /** @type {HTMLCanvasElement} */
       (goog.dom.createElement(goog.dom.TagName.CANVAS));
 
+  /**
+   * @private
+   * @type {HTMLCanvasElement}
+   */
+  this.hitDetectionCanvas_ = null;
+
   /**
    * @private
    * @type {ol.style.Fill}
@@ -75,7 +81,7 @@ ol.style.Circle.prototype.getFill = function() {
  * @inheritDoc
  */
 ol.style.Circle.prototype.getHitDetectionImage = function(pixelRatio) {
-  return this.canvas_;
+  return this.hitDetectionCanvas_;
 };
 
 
@@ -115,11 +121,12 @@ ol.style.Circle.prototype.load = goog.nullFunction;
  */
 ol.style.Circle.prototype.render_ = function() {
   var canvas = this.canvas_;
+  var strokeStyle, strokeWidth;
 
-  var strokeWidth;
   if (goog.isNull(this.stroke_)) {
     strokeWidth = 0;
   } else {
+    strokeStyle = ol.color.asString(this.stroke_.getColor());
     strokeWidth = this.stroke_.getWidth();
     if (!goog.isDef(strokeWidth)) {
       strokeWidth = ol.render.canvas.defaultLineWidth;
@@ -128,6 +135,8 @@ ol.style.Circle.prototype.render_ = function() {
 
   var size = 2 * (this.radius_ + strokeWidth) + 1;
 
+  // draw the circle on the canvas
+
   canvas.height = size;
   canvas.width = size;
 
@@ -140,11 +149,35 @@ ol.style.Circle.prototype.render_ = function() {
     context.fill();
   }
   if (!goog.isNull(this.stroke_)) {
-    var strokeColor = this.stroke_.getColor();
+    context.strokeStyle = strokeStyle;
-    context.strokeStyle = ol.color.asString(strokeColor);
     context.lineWidth = strokeWidth;
     context.stroke();
   }
 
+  // deal with the hit detection canvas
+
+  if (!goog.isNull(this.fill_)) {
+    this.hitDetectionCanvas_ = canvas;
+  } else {
+    this.hitDetectionCanvas_ = /** @type {HTMLCanvasElement} */
+        (goog.dom.createElement(goog.dom.TagName.CANVAS));
+    canvas = this.hitDetectionCanvas_;
+
+    canvas.height = size;
+    canvas.width = size;
+
+    context = /** @type {CanvasRenderingContext2D} */
+        (canvas.getContext('2d'));
+    context.arc(size / 2, size / 2, this.radius_, 0, 2 * Math.PI, true);
+
+    context.fillStyle = ol.render.canvas.defaultFillStyle;
+    context.fill();
+    if (!goog.isNull(this.stroke_)) {
+      context.strokeStyle = strokeStyle;
+      context.lineWidth = strokeWidth;
+      context.stroke();
+    }
+  }
+
   return size;
 };