Articles and Tutorials

GSPath

GSPath represents the outline of a shape which can be filled and stroked.
Constructor Summary
GSPath (<Object> params)
            Constructs a new GSPath that is initialized with the properties provided in the params associative array.
 
Method Summary
 Object getBounds()
          
 void setData(<string> data)
           Sets the path data for this path.

Field Detail

graphicsEl

Object graphicsEl
Constructor Detail

GSPath

GSPath(<Object> params)
    Constructs a new GSPath that is initialized with the properties provided in the params associative array.
  •  
    •  
      • data - the definition of the outline of a shape
      • style - an associative array containing name-value pairs for each style property to set, see GSVectorGraphics.setStyle() for all supported properties
      • params - an associative array of named arguments used to initialize this path, the following parameters may be specified:
    • Parameters:
Method Detail

getBounds

Object getBounds()

setData

void setData(<string> data)
  •  
    • All instructions are expressed as one character
    • Either commas or spaces may be used to delimit parameters for each command e.g. "M 0,0" and "M0 0" are both acceptable
    • The command letter can be eliminated on subsequent commands if the same command is used multiple times in a row (e.g. you can drop the second "L" in "M2691566,6462846 L2935278,6266238 L2709998,5987710"
    • Sets the path data for this path.

    Paths represent the geometry of the outline of an object, defined in terms of moveto (set a new current point), lineto (draw a straight line), curveto (draw a curve using a cubic Bézier) and closepath (close the current shape by drawing a line to the last moveto) elements.

    The syntax of path data follows the SVG path specification. Specifically:

    Example: 

     
     var style = {stroke: '#a80510', 'stroke-width': '3px'};
     feature = new GSPath({data: 'M2691566,6462846 L2935278,6266238 2709998,5987710', style: style});
     map.getLayer('base').addFeature(feature);
  •  
    •  
      • M (moveto) - start a new sub-path at the given (x,y) NZMG coordinate. Unlike SVG that allows the use of relative coordinates this command accepts absolute coordinates only. If a moveto is followed by multiple pairs of coordinates, the subsequent pairs are treated as implicit lineto commands.
      • Z or z (closepath) - close the current subpath by drawing a straight line from the current point to current subpath's initial point.
      • L (lineto) - draw a line from the current point to the given (x,y) NZMG coordinate which becomes the new current point. Unlike SVG that allows the use of relative coordinates this command accepts absolute coordinates only. A number of coordinates pairs may be specified to draw a polyline. At the end of the command, the new current point is set to the final set of coordinates provided.
      • C (curveto) - draws a cubic Bézier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. Unlike SVG that allows the use of relative coordinates this command accepts absolute coordinates only
      • data - the path instructions. Commands supported are:
    • Parameters: