<polyline>

<polyline> is a Graphical component that renders a polyline when nested inside a <graph> component.

Attributes and Properties

Example: Default <polyline>

The default <polyline> requires the vertices attribute as a minimum.

Example: <polyline> constrained to grid

The vertices of a <polyline> are predefined as constrained points, thereby constraining the polyline to a grid as well.

Attribute Example: vertices

<graph size="small">
  <polyline 
    name="poly1" 
    vertices="(0,1) (2,3) (-1,5) (-5,1)" 
  />
</graph>
 
<p><c>vertices</c> = $poly1.vertices</p>
<p><c>vertices[2]</c> = $poly1.vertices[2]</p>
<p><c>vertices[2][2]</c> = $poly1.vertices[2][2]</p>

The vertices attribute takes a list of points as its input.

Attribute Example: draggable

<p>Try dragging each of the polylines and their vertices.</p>
 
<graph size="small">
  <polyline name="poly1" vertices="(-6,2) (-3,-2) (3,5) (-1,4)"/>
  <polyline name="poly2" vertices="(6,-5) (4,7) (2,2)" styleNumber="2" draggable="false"/>
</graph>
 
<p>Blue polyline: <c>draggable</c> = $poly1.draggable</p>
<p>Red polyline: <c>draggable</c> = $poly2.draggable</p> 

The draggable attribute determines whether the <polyline> can be dragged around the <graph>. All graphical objects are draggable by default.

Attribute Example: verticesDraggable

<p>Try dragging each of the polylines and their vertices.</p>
 
<graph size="small">
  <polyline 
    name="poly1" 
    vertices="(-6,2) (-3,-2) (3,5) (-1,4)"
  />
  <polyline 
    name="poly2" 
    vertices="(6,-5) (4,7) (2,2)" 
    styleNumber="2" 
    verticesDraggable="false"
  />
</graph>
 
<p>Blue polyline: <c>verticesDraggable</c> = $poly1.verticesDraggable</p>
<p>Red polyline: <c>verticesDraggable</c> = $poly2.verticesDraggable</p> 

Vertices are draggable by default. Use the verticesDraggable attribute set to false to disable users from changing the proportions of the <polyline>. The polyline as a whole can still be repositioned on the <graph>.

Attribute Example: Standard graphical attributes

The uses of the following standard graphical attributes are illustrated: hide, fixLocation, layer, styleNumber, applyStyleToLabel and labelIsName.

Property Example: Style properties

The styleDescription and styleDescriptionWithNoun properties render a text description corresponding to the styleNumber of the component.