OpenLayers OpenLayers

Changeset 7673

Show
Ignore:
Timestamp:
08/01/08 17:56:17 (1 month ago)
Author:
ahocevar
Message:

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)

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • trunk/openlayers/examples/tasmania/sld-tasmania.xml

    r7634 r7673  
    582582                <ogc:Literal>1</ogc:Literal> 
    583583              </sld:CssParameter> 
     584              <sld:CssParameter name="stroke-dasharray"> 
     585                <ogc:Literal>3 5 1 5</ogc:Literal> 
     586              </sld:CssParameter> 
    584587            </sld:Stroke> 
    585588          </sld:PolygonSymbolizer> 

  • trunk/openlayers/examples/vector-features.html

    r7634 r7673  
    3939                strokeColor: "#00FF00", 
    4040                strokeWidth: 3, 
     41                strokeDashstyle: "dashdot", 
    4142                pointRadius: 6, 
    4243                pointerEvents: "visiblePainted" 
    …… 
    7576            var pointList = []; 
    7677            var newPoint = point; 
    77             for(var p=0; p<5; ++p) { 
     78            for(var p=0; p<15; ++p) { 
    7879                newPoint = new OpenLayers.Geometry.Point(newPoint.x + Math.random(1), 
    7980                                                         newPoint.y + Math.random(1)); 

  • trunk/openlayers/lib/OpenLayers/Feature/Vector.js

    r7634 r7673  
    309309 *  - strokeOpacity: 1, 
    310310 *  - strokeWidth: 1, 
    311  *  - strokeLinecap: "round", 
     311 *  - strokeLinecap: "round",  [butt | round | square] 
     312 *  - strokeDashstyle: "solid", [dot | dash | dashdot | longdash | longdashdot | solid] 
    312313 *  - hoverStrokeColor: "red", 
    313314 *  - hoverStrokeOpacity: 1, 
    …… 
    340341        strokeWidth: 1, 
    341342        strokeLinecap: "round", 
     343        strokeDashstyle: "solid", 
    342344        hoverStrokeColor: "red", 
    343345        hoverStrokeOpacity: 1, 
    …… 
    358360        strokeWidth: 2, 
    359361        strokeLinecap: "round", 
     362        strokeDashstyle: "solid", 
    360363        hoverStrokeColor: "red", 
    361364        hoverStrokeOpacity: 1, 
    …… 
    376379        strokeLinecap: "round", 
    377380        strokeWidth: 4, 
     381        strokeDashstyle: "solid", 
    378382        hoverStrokeColor: "red", 
    379383        hoverStrokeOpacity: 1, 

  • trunk/openlayers/lib/OpenLayers/Format/SLD/v1.js

    r7651 r7673  
    5353        strokeOpacity: 1, 
    5454        strokeWidth: 1, 
     55        strokeDashstyle: "solid", 
    5556        pointRadius: 3, 
    5657        graphicName: "square" 
    …… 
    294295        "stroke-width": "strokeWidth", 
    295296        "stroke-linecap": "strokeLinecap", 
     297        "stroke-dasharray": "strokeDashstyle", 
    296298        "fill": "fillColor", 
    297299        "fill-opacity": "fillOpacity", 

  • trunk/openlayers/lib/OpenLayers/Renderer/Elements.js

    r7671 r7673  
    348348        strokeLinecap: "round", 
    349349        strokeOpacity: 1, 
     350        strokeDashstyle: "solid", 
    350351        fillOpacity: 1, 
    351352        pointRadius: 0 

  • trunk/openlayers/lib/OpenLayers/Renderer/SVG.js

    r7672 r7673  
    287287            node.setAttributeNS(null, "stroke-width", style.strokeWidth * widthFactor); 
    288288            node.setAttributeNS(null, "stroke-linecap", style.strokeLinecap); 
     289            // Hard-coded linejoin for now, to make it look the same as in VML. 
     290            // There is no strokeLinejoin property yet for symbolizers. 
     291            node.setAttributeNS(null, "stroke-linejoin", "round"); 
     292            node.setAttributeNS(null, "stroke-dasharray", this.dashStyle(style, 
     293                widthFactor)); 
    289294        } else { 
    290295            node.setAttributeNS(null, "stroke", "none"); 
    …… 
    301306    }, 
    302307 
     308    /**  
     309     * Method: dashStyle 
     310     *  
     311     * Parameters: 
     312     * style - {Object} 
     313     * widthFactor - {Number} 
     314     *  
     315     * Returns: 
     316     * {String} A SVG compliant 'stroke-dasharray' value 
     317     */ 
     318    dashStyle: function(style, widthFactor) { 
     319        var w = style.strokeWidth * widthFactor; 
     320 
     321        switch (style.strokeDashstyle) { 
     322            case 'solid': 
     323                return 'none'; 
     324            case 'dot': 
     325                return [1, 4 * w].join(); 
     326            case 'dash': 
     327                return [4 * w, 4 * w].join(); 
     328            case 'dashdot': 
     329                return [4 * w, 4 * w, 1, 4 * w].join(); 
     330            case 'longdash': 
     331                return [8 * w, 4 * w].join(); 
     332            case 'longdashdot': 
     333                return [8 * w, 4 * w, 1, 4 * w].join(); 
     334            default: 
     335                return style.strokeDashstyle.replace(/ /g, ","); 
     336        } 
     337    }, 
     338     
    303339    /**  
    304340     * Method: createNode 
    …… 
    633669         
    634670        node.setAttributeNS(null, "points", points); 
    635         // Hard-coded linejoin for now, to make it look the same as in VML. 
    636         // There is no strokeLinejoin property yet for symbolizers. 
    637         node.setAttributeNS(null, "stroke-linejoin", "round"); 
    638671         
    639672        var width = symbolExtent.getWidth(); 

  • trunk/openlayers/lib/OpenLayers/Renderer/VML.js

    r7672 r7673  
    287287            stroke.setAttribute("opacity", style.strokeOpacity); 
    288288            stroke.setAttribute("endcap", !style.strokeLinecap || style.strokeLinecap == 'butt' ? 'flat' : style.strokeLinecap); 
     289            stroke.setAttribute("dashstyle", this.dashStyle(style)); 
    289290        } 
    290291         
    …… 
    456457        } 
    457458    }, 
     459     
     460    /**  
     461     * Method: dashStyle 
     462     *  
     463     * Parameters: 
     464     * style - {Object} 
     465     *  
     466     * Returns: 
     467     * {String} A VML compliant 'stroke-dasharray' value 
     468     */ 
     469    dashStyle: function(style) { 
     470        var dash = style.strokeDashstyle; 
     471        switch (dash) { 
     472            case 'solid': 
     473            case 'dot': 
     474            case 'dash': 
     475            case 'dashdot': 
     476            case 'longdash': 
     477            case 'longdashdot': 
     478                return dash; 
     479            default: 
     480                // very basic guessing of dash style patterns 
     481                var parts = dash.split(/[ ,]/); 
     482                if (parts.length == 2) { 
     483                    if (1*parts[0] >= 2*parts[1]) { 
     484                        return "longdash"; 
     485                    } 
     486                    return (parts[0] == 1 || parts[1] == 1) ? "dot" : "dash"; 
     487                } else if (parts.length == 4) { 
     488                    return (1*parts[0] >= 2*parts[1]) ? "longdashdot" : 
     489                        "dashdot" 
     490                } 
     491                return "solid"; 
     492        } 
     493    }, 
    458494 
    459495    /** 

  • trunk/openlayers/tests/Renderer/SVG.html

    r7664 r7673  
    408408    } 
    409409         
     410    function test_svg_dashstyle(t) { 
     411        if (!OpenLayers.Renderer.SVG.prototype.supported()) { 
     412            t.plan(0); 
     413            return; 
     414        } 
     415 
     416        t.plan(5); 
     417         
     418        var r = new OpenLayers.Renderer.SVG(document.body); 
     419 
     420        t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "dot"}, 1), "1,4", "dot dasharray created correctly"); 
     421        t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "dash"}, 1), "4,4", "dash dasharray created correctly"); 
     422        t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "longdash"}, 1), "8,4", "longdash dasharray created correctly"); 
     423        t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "dashdot"}, 1), "4,4,1,4", "dashdot dasharray created correctly"); 
     424        t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "longdashdot"}, 1), "8,4,1,4", "dashdot dasharray created correctly"); 
     425    } 
     426 
    410427  </script> 
    411428</head> 

  • trunk/openlayers/tests/Renderer/VML.html

    r7634 r7673  
    371371         
    372372    } 
     373     
     374    function test_vml_dashstyle(t) { 
     375        if (!OpenLayers.Renderer.VML.prototype.supported()) { 
     376            t.plan(0); 
     377            return; 
     378        } 
     379         
     380        t.plan(5); 
     381         
     382        var r = new OpenLayers.Renderer.VML(document.body); 
     383         
     384        t.eq(r.dashStyle({strokeDashstyle: "1 4"}), "dot", "dot pattern recognized correctly."); 
     385        t.eq(r.dashStyle({strokeDashstyle: "4 4"}), "dash", "dash pattern recognized correctly."); 
     386        t.eq(r.dashStyle({strokeDashstyle: "8 4"}), "longdash", "longdash pattern recognized correctly."); 
     387        t.eq(r.dashStyle({strokeDashstyle: "4 4 1 4"}), "dashdot", "dashdot pattern recognized correctly."); 
     388        t.eq(r.dashStyle({strokeDashstyle: "8 4 1 4"}), "longdashdot", "longdashdot pattern recognized correctly."); 
     389    } 
    373390         
    374391  </script>