Stroke style of features can now be specified. Both SVG's

stroke-dasharray and VML's dashstyle properties are allowed in the new 
strokeDashstyle symbolizer property. For VML, which does not support 
custom dash styles, one of the 5 matching pre-defined dash styles will 
be guessed. The patch also adds support for the stroke-dasharray 
property in SLD. r=crschmidt (closes #1126)


git-svn-id: http://svn.openlayers.org/trunk/openlayers@7673 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

lib/OpenLayers/Renderer/Elements.js

@@ -347,6 +347,7 @@ OpenLayers.Renderer.Elements = OpenLayers.Class(OpenLayers.Renderer, {
     minimumSymbolizer: {
         strokeLinecap: "round",
         strokeOpacity: 1,
+        strokeDashstyle: "solid",
         fillOpacity: 1,
         pointRadius: 0
     },

lib/OpenLayers/Renderer/SVG.js

@@ -286,6 +286,11 @@ OpenLayers.Renderer.SVG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
             node.setAttributeNS(null, "stroke-opacity", style.strokeOpacity);
             node.setAttributeNS(null, "stroke-width", style.strokeWidth * widthFactor);
             node.setAttributeNS(null, "stroke-linecap", style.strokeLinecap);
+            // Hard-coded linejoin for now, to make it look the same as in VML.
+            // There is no strokeLinejoin property yet for symbolizers.
+            node.setAttributeNS(null, "stroke-linejoin", "round");
+            node.setAttributeNS(null, "stroke-dasharray", this.dashStyle(style,
+                widthFactor));
         } else {
             node.setAttributeNS(null, "stroke", "none");
         }
@@ -300,6 +305,37 @@ OpenLayers.Renderer.SVG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
         return node;
     },
 
+    /** 
+     * Method: dashStyle
+     * 
+     * Parameters:
+     * style - {Object}
+     * widthFactor - {Number}
+     * 
+     * Returns:
+     * {String} A SVG compliant 'stroke-dasharray' value
+     */
+    dashStyle: function(style, widthFactor) {
+        var w = style.strokeWidth * widthFactor;
+
+        switch (style.strokeDashstyle) {
+            case 'solid':
+                return 'none';
+            case 'dot':
+                return [1, 4 * w].join();
+            case 'dash':
+                return [4 * w, 4 * w].join();
+            case 'dashdot':
+                return [4 * w, 4 * w, 1, 4 * w].join();
+            case 'longdash':
+                return [8 * w, 4 * w].join();
+            case 'longdashdot':
+                return [8 * w, 4 * w, 1, 4 * w].join();
+            default:
+                return style.strokeDashstyle.replace(/ /g, ",");
+        }
+    },
+    
     /** 
      * Method: createNode
      * 
@@ -632,9 +668,6 @@ OpenLayers.Renderer.SVG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
         }
         
         node.setAttributeNS(null, "points", points);
-        // Hard-coded linejoin for now, to make it look the same as in VML.
-        // There is no strokeLinejoin property yet for symbolizers.
-        node.setAttributeNS(null, "stroke-linejoin", "round");
         
         var width = symbolExtent.getWidth();
         var height = symbolExtent.getHeight();

lib/OpenLayers/Renderer/VML.js

@@ -286,6 +286,7 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
             }
             stroke.setAttribute("opacity", style.strokeOpacity);
             stroke.setAttribute("endcap", !style.strokeLinecap || style.strokeLinecap == 'butt' ? 'flat' : style.strokeLinecap);
+            stroke.setAttribute("dashstyle", this.dashStyle(style));
         }
         
         if (style.cursor != "inherit" && style.cursor != null) {
@@ -455,6 +456,41 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
             node.coordsize = scaledBox.getWidth()+ " " + scaledBox.getHeight();
         }
     },
+    
+    /** 
+     * Method: dashStyle
+     * 
+     * Parameters:
+     * style - {Object}
+     * 
+     * Returns:
+     * {String} A VML compliant 'stroke-dasharray' value
+     */
+    dashStyle: function(style) {
+        var dash = style.strokeDashstyle;
+        switch (dash) {
+            case 'solid':
+            case 'dot':
+            case 'dash':
+            case 'dashdot':
+            case 'longdash':
+            case 'longdashdot':
+                return dash;
+            default:
+                // very basic guessing of dash style patterns
+                var parts = dash.split(/[ ,]/);
+                if (parts.length == 2) {
+                    if (1*parts[0] >= 2*parts[1]) {
+                        return "longdash";
+                    }
+                    return (parts[0] == 1 || parts[1] == 1) ? "dot" : "dash";
+                } else if (parts.length == 4) {
+                    return (1*parts[0] >= 2*parts[1]) ? "longdashdot" :
+                        "dashdot"
+                }
+                return "solid";
+        }
+    },
 
     /**
      * Method: createNode