[OpenLayers-Commits] r12362 - in sandbox/aabt/openlayers/lib/OpenLayers: Feature Renderer

commits-20090109 at openlayers.org commits-20090109 at openlayers.org
Wed Sep 14 09:34:23 EDT 2011


Author: aabt
Date: 2011-09-14 06:34:23 -0700 (Wed, 14 Sep 2011)
New Revision: 12362

Modified:
   sandbox/aabt/openlayers/lib/OpenLayers/Feature/Vector.js
   sandbox/aabt/openlayers/lib/OpenLayers/Renderer/Canvas.js
Log:
Add label outline to canvas renderer

Modified: sandbox/aabt/openlayers/lib/OpenLayers/Feature/Vector.js
===================================================================
--- sandbox/aabt/openlayers/lib/OpenLayers/Feature/Vector.js	2011-09-14 07:06:27 UTC (rev 12361)
+++ sandbox/aabt/openlayers/lib/OpenLayers/Feature/Vector.js	2011-09-14 13:34:23 UTC (rev 12362)
@@ -419,6 +419,8 @@
  * labelYOffset - {Number} Pixel offset along the positive y axis for displacing the label. Not supported by the canvas renderer.
  * labelSelect - {Boolean} If set to true, labels will be selectable using SelectFeature or similar controls.
  *     Default is false.
+ * labelOutlineColor - {String} The color of the label outline. Default is 'white'. Only supported by the canvas renderer.
+ * labelOutlineWidth - {Number} The width of the label outline. Default is 3. Only supported by the canvas renderer.
  * fontColor - {String} The font color for the label, to be provided like CSS.
  * fontOpacity - {Number} Opacity (0-1) for the label
  * fontFamily - {String} The font family for the label, to be provided like in CSS.

Modified: sandbox/aabt/openlayers/lib/OpenLayers/Renderer/Canvas.js
===================================================================
--- sandbox/aabt/openlayers/lib/OpenLayers/Renderer/Canvas.js	2011-09-14 07:06:27 UTC (rev 12361)
+++ sandbox/aabt/openlayers/lib/OpenLayers/Renderer/Canvas.js	2011-09-14 13:34:23 UTC (rev 12362)
@@ -1,5 +1,5 @@
-/* Copyright (c) 2006-2011 by OpenLayers Contributors (see authors.txt for 
- * full list of contributors). Published under the Clear BSD license.  
+/* Copyright (c) 2006-2011 by OpenLayers Contributors (see authors.txt for
+ * full list of contributors). Published under the Clear BSD license.
  * See http://svn.openlayers.org/trunk/openlayers/license.txt for the
  * full text of the license. */
 
@@ -8,26 +8,26 @@
  */
 
 /**
- * Class: OpenLayers.Renderer.Canvas 
+ * Class: OpenLayers.Renderer.Canvas
  * A renderer based on the 2D 'canvas' drawing element.
- * 
+ *
  * Inherits:
  *  - <OpenLayers.Renderer>
  */
 OpenLayers.Renderer.Canvas = OpenLayers.Class(OpenLayers.Renderer, {
-    
+
     /**
      * APIProperty: hitDetection
      * {Boolean} Allow for hit detection of features.  Default is true.
      */
     hitDetection: true,
-    
+
     /**
      * Property: hitOverflow
      * {Number} The method for converting feature identifiers to color values
-     *     supports 16777215 sequential values.  Two features cannot be 
+     *     supports 16777215 sequential values.  Two features cannot be
      *     predictably detected if their identifiers differ by more than this
-     *     value.  The hitOverflow allows for bigger numbers (but the 
+     *     value.  The hitOverflow allows for bigger numbers (but the
      *     difference in values is still limited).
      */
     hitOverflow: 0,
@@ -36,21 +36,21 @@
      * Property: canvas
      * {Canvas} The canvas context object.
      */
-    canvas: null, 
-    
+    canvas: null,
+
     /**
      * Property: features
      * {Object} Internal object of feature/style pairs for use in redrawing the layer.
      */
     features: null,
-    
+
     /**
      * Property: pendingRedraw
      * {Boolean} The renderer needs a redraw call to render features added while
      *     the renderer was locked.
      */
     pendingRedraw: false,
-    
+
     /**
      * Constructor: OpenLayers.Renderer.Canvas
      *
@@ -69,13 +69,13 @@
             this.hitContext = this.hitCanvas.getContext("2d");
         }
     },
-    
-    /** 
+
+    /**
      * Method: eraseGeometry
      * Erase a geometry from the renderer. Because the Canvas renderer has
      *     'memory' of the features that it has drawn, we have to remove the
-     *     feature so it doesn't redraw.   
-     * 
+     *     feature so it doesn't redraw.
+     *
      * Parameters:
      * geometry - {<OpenLayers.Geometry>}
      * featureId - {String}
@@ -86,15 +86,15 @@
 
     /**
      * APIMethod: supported
-     * 
+     *
      * Returns:
      * {Boolean} Whether or not the browser supports the renderer class
      */
     supported: function() {
         var canvas = document.createElement("canvas");
         return !!canvas.getContext;
-    },    
-    
+    },
+
     /**
      * Method: setSize
      * Sets the size of the drawing surface.
@@ -102,7 +102,7 @@
      * Once the size is updated, redraw the canvas.
      *
      * Parameters:
-     * size - {<OpenLayers.Size>} 
+     * size - {<OpenLayers.Size>}
      */
     setSize: function(size) {
         this.size = size.clone();
@@ -120,15 +120,15 @@
             hitCanvas.height = size.h;
         }
     },
-    
+
     /**
      * Method: drawFeature
      * Draw the feature. Stores the feature in the features list,
-     * then redraws the layer. 
+     * then redraws the layer.
      *
      * Parameters:
-     * feature - {<OpenLayers.Feature.Vector>} 
-     * style - {<Object>} 
+     * feature - {<OpenLayers.Feature.Vector>}
+     * style - {<Object>}
      *
      * Returns:
      * {Boolean} The feature has been drawn completely.  If the feature has no
@@ -159,14 +159,14 @@
         return rendered;
     },
 
-    /** 
+    /**
      * Method: drawGeometry
      * Used when looping (in redraw) over the features; draws
-     * the canvas. 
+     * the canvas.
      *
      * Parameters:
-     * geometry - {<OpenLayers.Geometry>} 
-     * style - {Object} 
+     * geometry - {<OpenLayers.Geometry>}
+     * style - {Object}
      */
     drawGeometry: function(geometry, style, featureId) {
         var className = geometry.CLASS_NAME;
@@ -199,18 +199,18 @@
 
     /**
      * Method: drawExternalGraphic
-     * Called to draw External graphics. 
-     * 
-     * Parameters: 
+     * Called to draw External graphics.
+     *
+     * Parameters:
      * geometry - {<OpenLayers.Geometry>}
      * style    - {Object}
      * featureId - {String}
-     */ 
+     */
     drawExternalGraphic: function(geometry, style, featureId) {
         var img = new Image();
 
         if (style.graphicTitle) {
-            img.title = style.graphicTitle;           
+            img.title = style.graphicTitle;
         }
 
         var width = style.graphicWidth || style.graphicHeight;
@@ -223,7 +223,7 @@
            style.graphicYOffset : -(0.5 * height);
 
         var opacity = style.graphicOpacity || style.fillOpacity;
-        
+
         var onLoad = function() {
             if(!this.features[featureId]) {
                 return;
@@ -266,10 +266,10 @@
      * style - {Object} Symbolizer hash
      */
     setCanvasStyle: function(type, style) {
-        if (type === "fill") {     
+        if (type === "fill") {
             this.canvas.globalAlpha = style['fillOpacity'];
             this.canvas.fillStyle = style['fillColor'];
-        } else if (type === "stroke") {  
+        } else if (type === "stroke") {
             this.canvas.globalAlpha = style['strokeOpacity'];
             this.canvas.strokeStyle = style['strokeColor'];
             this.canvas.lineWidth = style['strokeWidth'];
@@ -278,7 +278,7 @@
             this.canvas.lineWidth = 1;
         }
     },
-    
+
     /**
      * Method: featureIdToHex
      * Convert a feature ID string into an RGB hex string.
@@ -300,7 +300,7 @@
         hex = "#" + hex.substring(len-6, len);
         return hex;
     },
-    
+
     /**
      * Method: setHitContextStyle
      * Prepare the hit canvas for drawing by setting various global settings.
@@ -315,7 +315,7 @@
         if (type == "fill") {
             this.hitContext.globalAlpha = 1.0;
             this.hitContext.fillStyle = hex;
-        } else if (type == "stroke") {  
+        } else if (type == "stroke") {
             this.hitContext.globalAlpha = 1.0;
             this.hitContext.strokeStyle = hex;
             // bump up stroke width to deal with antialiasing
@@ -329,12 +329,12 @@
     /**
      * Method: drawPoint
      * This method is only called by the renderer itself.
-     * 
-     * Parameters: 
+     *
+     * Parameters:
      * geometry - {<OpenLayers.Geometry>}
      * style    - {Object}
      * featureId - {String}
-     */ 
+     */
     drawPoint: function(geometry, style, featureId) {
         if(style.graphic !== false) {
             if(style.externalGraphic) {
@@ -376,30 +376,30 @@
             }
         }
     },
-    
+
     /**
      * Method: drawLineString
      * This method is only called by the renderer itself.
-     * 
-     * Parameters: 
+     *
+     * Parameters:
      * geometry - {<OpenLayers.Geometry>}
      * style    - {Object}
      * featureId - {String}
-     */ 
+     */
     drawLineString: function(geometry, style, featureId) {
         style = OpenLayers.Util.applyDefaults({fill: false}, style);
         this.drawLinearRing(geometry, style, featureId);
-    },    
-    
+    },
+
     /**
      * Method: drawLinearRing
      * This method is only called by the renderer itself.
-     * 
-     * Parameters: 
+     *
+     * Parameters:
      * geometry - {<OpenLayers.Geometry>}
      * style    - {Object}
      * featureId - {String}
-     */ 
+     */
     drawLinearRing: function(geometry, style, featureId) {
         if (style.fill !== false) {
             this.setCanvasStyle("fill", style);
@@ -419,7 +419,7 @@
         }
         this.setCanvasStyle("reset");
     },
-    
+
     /**
      * Method: renderPath
      * Render a path with stroke and optional fill.
@@ -444,36 +444,36 @@
             }
         }
     },
-    
+
     /**
      * Method: drawPolygon
      * This method is only called by the renderer itself.
-     * 
-     * Parameters: 
+     *
+     * Parameters:
      * geometry - {<OpenLayers.Geometry>}
      * style    - {Object}
      * featureId - {String}
-     */ 
+     */
     drawPolygon: function(geometry, style, featureId) {
         var components = geometry.components;
         var len = components.length;
         this.drawLinearRing(components[0], style, featureId);
         // erase inner rings
         for (var i=1; i<len; ++i) {
-            /** 
-             * Note that this is overly agressive.  Here we punch holes through 
-             * all previously rendered features on the same canvas.  A better 
-             * solution for polygons with interior rings would be to draw the 
-             * polygon on a sketch canvas first.  We could erase all holes 
-             * there and then copy the drawing to the layer canvas. 
-             * TODO: http://trac.osgeo.org/openlayers/ticket/3130 
+            /**
+             * Note that this is overly agressive.  Here we punch holes through
+             * all previously rendered features on the same canvas.  A better
+             * solution for polygons with interior rings would be to draw the
+             * polygon on a sketch canvas first.  We could erase all holes
+             * there and then copy the drawing to the layer canvas.
+             * TODO: http://trac.osgeo.org/openlayers/ticket/3130
              */
             this.canvas.globalCompositeOperation = "destination-out";
             if (this.hitDetection) {
                 this.hitContext.globalCompositeOperation = "destination-out";
             }
             this.drawLinearRing(
-                components[i], 
+                components[i],
                 OpenLayers.Util.applyDefaults({stroke: false, fillOpacity: 1.0}, style),
                 featureId
             );
@@ -482,13 +482,13 @@
                 this.hitContext.globalCompositeOperation = "source-over";
             }
             this.drawLinearRing(
-                components[i], 
+                components[i],
                 OpenLayers.Util.applyDefaults({fill: false}, style),
                 featureId
             );
         }
     },
-    
+
     /**
      * Method: drawText
      * This method is only called by the renderer itself.
@@ -500,7 +500,9 @@
     drawText: function(location, style) {
         style = OpenLayers.Util.extend({
             fontColor: "#000000",
-            labelAlign: "cm"
+            labelAlign: "cm",
+            labelOutlineColor: "white",
+            labelOutlineWidth: 3
         }, style);
         var pt = this.getLocalXY(location);
 
@@ -533,6 +535,11 @@
                 this.canvas.measureText('xx').width;
             pt[1] += lineHeight*vfactor*(numRows-1);
             for (var i = 0; i < numRows; i++) {
+                this.canvas.save();
+                this.canvas.strokeStyle = style.labelOutlineColor;
+                this.canvas.lineWidth = style.labelOutlineWidth;
+                this.canvas.strokeText(labelRows[i], pt[0], pt[1] + (lineHeight*i));
+                this.canvas.restore();
                 this.canvas.fillText(labelRows[i], pt[0], pt[1] + (lineHeight*i));
             }
         } else if (this.canvas.mozDrawText) {
@@ -561,12 +568,12 @@
         }
         this.setCanvasStyle("reset");
     },
-    
+
     /**
      * Method: getLocalXY
      * transform geographic xy into pixel xy
      *
-     * Parameters: 
+     * Parameters:
      * point - {<OpenLayers.Geometry.Point>}
      */
     getLocalXY: function(point) {
@@ -580,7 +587,7 @@
     /**
      * Method: clear
      * Clear all vectors from the renderer.
-     */    
+     */
     clear: function() {
         var height = this.root.height;
         var width = this.root.width;
@@ -593,13 +600,13 @@
 
     /**
      * Method: getFeatureIdFromEvent
-     * Returns a feature id from an event on the renderer.  
-     * 
+     * Returns a feature id from an event on the renderer.
+     *
      * Parameters:
-     * evt - {<OpenLayers.Event>} 
+     * evt - {<OpenLayers.Event>}
      *
      * Returns:
-     * {<OpenLayers.Feature.Vector} A feature or null.  This method returns a 
+     * {<OpenLayers.Feature.Vector} A feature or null.  This method returns a
      *     feature instead of a feature id to avoid an unnecessary lookup on the
      *     layer.
      */
@@ -622,14 +629,14 @@
         }
         return feature;
     },
-    
+
     /**
-     * Method: eraseFeatures 
+     * Method: eraseFeatures
      * This is called by the layer to erase features; removes the feature from
      *     the list, then redraws the layer.
-     * 
+     *
      * Parameters:
-     * features - {Array(<OpenLayers.Feature.Vector>)} 
+     * features - {Array(<OpenLayers.Feature.Vector>)}
      */
     eraseFeatures: function(features) {
         if(!(OpenLayers.Util.isArray(features))) {
@@ -673,7 +680,7 @@
                 item = labelMap[i];
                 this.drawText(item[0].geometry.getCentroid(), item[1]);
             }
-        }    
+        }
     },
 
     CLASS_NAME: "OpenLayers.Renderer.Canvas"



More information about the Commits mailing list