OpenLayers OpenLayers

Ticket #1126: strokeDash.01.patch

File strokeDash.01.patch, 7.3 kB (added by fredj, 10 months ago)

clean the code, modify vector-features.html

  • lib/OpenLayers/Feature/Vector.js

    old new  
    248248 *  - strokeColor: "#ee9900", 
    249249 *  - strokeOpacity: 1, 
    250250 *  - strokeWidth: 1, 
    251  *  - strokeLinecap: "round", 
     251 *  - strokeLinecap: "round",  [butt | round | square] 
     252 *  - strokeDashstyle: "solid", [dot | dash | dashdot | longdash | longdashdot | solid] 
    252253 *  - hoverStrokeColor: "red", 
    253254 *  - hoverStrokeOpacity: 1, 
    254255 *  - hoverStrokeWidth: 0.2, 
     
    276277        strokeOpacity: 1, 
    277278        strokeWidth: 1, 
    278279        strokeLinecap: "round", 
     280        strokeDashstyle: "solid", 
    279281        hoverStrokeColor: "red", 
    280282        hoverStrokeOpacity: 1, 
    281283        hoverStrokeWidth: 0.2, 
     
    293295        strokeOpacity: 1, 
    294296        strokeWidth: 2, 
    295297        strokeLinecap: "round", 
     298        strokeDashstyle: "solid", 
    296299        hoverStrokeColor: "red", 
    297300        hoverStrokeOpacity: 1, 
    298301        hoverStrokeWidth: 0.2, 
     
    311314        strokeOpacity: 1, 
    312315        strokeLinecap: "round", 
    313316        strokeWidth: 4, 
     317        strokeDashstyle: "solid", 
    314318        hoverStrokeColor: "red", 
    315319        hoverStrokeOpacity: 1, 
    316320        hoverStrokeWidth: 0.2, 
  • lib/OpenLayers/Renderer/VML.js

    old new  
    248248            } 
    249249            stroke.setAttribute("opacity", style.strokeOpacity); 
    250250            stroke.setAttribute("endcap", !style.strokeLinecap || style.strokeLinecap == 'butt' ? 'flat' : style.strokeLinecap); 
     251            stroke.setAttribute("dashstyle", style.strokeDashstyle); 
    251252        } 
    252253         
    253254        if (style.cursor) { 
  • lib/OpenLayers/Renderer/SVG.js

    old new  
    248248            node.setAttributeNS(null, "stroke-opacity", style.strokeOpacity); 
    249249            node.setAttributeNS(null, "stroke-width", style.strokeWidth); 
    250250            node.setAttributeNS(null, "stroke-linecap", style.strokeLinecap); 
     251            node.setAttributeNS(null, "stroke-dasharray", this.dashStyle(style)); 
    251252        } else { 
    252253            node.setAttributeNS(null, "stroke", "none"); 
    253254        } 
     
    263264    }, 
    264265 
    265266    /**  
     267     * Method: dashStyle 
     268     *  
     269     * Parameters: 
     270     * style - {Object} 
     271     *  
     272     * Returns: 
     273     * {String} A SVG compliant 'stroke-dasharray' value 
     274     */ 
     275    dashStyle: function(style) { 
     276        var w = style.strokeWidth; 
     277 
     278        switch (style.strokeDashstyle) { 
     279        case 'dot': 
     280            return [w, 2 * w].join(); 
     281        case 'dash': 
     282            return [4 * w, 4 * w].join(); 
     283        case 'dashdot': 
     284            return [5 * w, 5 * w, w, 5 * w].join(); 
     285        case 'longdash': 
     286            return [8 * w, 5 * w].join(); 
     287        case 'longdashdot': 
     288            return [8 * w, 5 * w, w, 5 * w].join(); 
     289        case 'solid': 
     290        default: 
     291            return 'none'; 
     292        } 
     293    }, 
     294     
     295    /**  
    266296     * Method: createNode 
    267297     *  
    268298     * Parameters: 
  • examples/vector-features.html

    old new  
    2121             * Layer style 
    2222             */ 
    2323            // we want opaque external graphics and non-opaque internal graphics 
    24             var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']); 
    25             layer_style.fillOpacity = 0.2; 
    26             layer_style.graphicOpacity = 1; 
     24            var layer_style = OpenLayers.Util.applyDefaults({ 
     25                fillOpacity: 0.2, 
     26                graphicOpacity: 1 
     27            }, OpenLayers.Feature.Vector.style['default']); 
    2728             
    2829            /* 
    2930             * Blue style 
    3031             */ 
    31             var style_blue = OpenLayers.Util.extend({}, layer_style); 
    32             style_blue.strokeColor = "blue";  
    33             style_blue.fillColor = "blue";  
     32            var style_blue = OpenLayers.Util.applyDefaults({ 
     33                strokeColor: "blue", 
     34                fillColor: "blue" 
     35            }, layer_style); 
    3436             
    3537            /* 
    3638             * Green style 
    3739             */ 
    38             var style_green =
     40            var style_green = OpenLayers.Util.applyDefaults(
    3941                strokeColor: "#00FF00", 
    4042                strokeOpacity: 1, 
     43                strokeDashstyle: "dot", 
    4144                strokeWidth: 3, 
    4245                pointRadius: 6, 
    43                 pointerEvents: "visiblePainted" 
    44             }
     46                fillColor: "red" 
     47            }, OpenLayers.Feature.Vector.style['default'])
    4548 
     49            var marker_size = new OpenLayers.Size(24, 20); 
     50 
    4651            /* 
    4752             * Mark style 
    4853             */ 
    49             var style_mark = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']); 
    50             // each of the three lines below means the same, if only one of 
    51             // them is active: the image will have a size of 24px, and the 
    52             // aspect ratio will be kept 
    53             // style_mark.pointRadius = 12; 
    54             // style_mark.graphicHeight = 24;  
    55             // style_mark.graphicWidth = 24; 
     54            var style_mark = OpenLayers.Util.extend({ 
     55                // each of the three lines below means the same, if only one of 
     56                // them is active: the image will have a size of 24px, and the 
     57                // aspect ratio will be kept 
     58                // pointRadius: (marker_size.w / 2), 
     59                // graphicHeight: marker_size.h, 
     60                // graphicWidth: marker_size.w, 
    5661 
    57             // if graphicWidth and graphicHeight are both set, the aspect ratio 
    58             // of the image will be ignored 
    59             style_mark.graphicWidth = 24; 
    60             style_mark.graphicHeight = 20; 
    61             style_mark.graphicXOffset = -(style_mark.graphicWidth/2);  // this is the default value 
    62             style_mark.graphicYOffset = -style_mark.graphicHeight; 
    63             style_mark.externalGraphic = "../img/marker.png"; 
     62                // if graphicWidth and graphicHeight are both set, the aspect ratio 
     63                // of the image will be ignored 
     64                graphicWidth: marker_size.w, 
     65                graphicHeight: marker_size.h, 
     66                graphicXOffset: - (marker_size.w / 2),  // this is the default value 
     67                graphicYOffset: - marker_size.h, 
     68                externalGraphic: "../img/marker.png" 
     69            }, OpenLayers.Feature.Vector.style['default']); 
     70 
    6471             
    6572            var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {style: layer_style}); 
    6673             
     
    7582            // create a line feature from a list of points 
    7683            var pointList = []; 
    7784            var newPoint = point; 
    78             for(var p=0; p<5; ++p) { 
     85            for(var p=0; p<15; ++p) { 
    7986                newPoint = new OpenLayers.Geometry.Point(newPoint.x + Math.random(1), 
    8087                                                         newPoint.y + Math.random(1)); 
    8188                pointList.push(newPoint);