<polygon>

<polygon> is a Graphical component that renders a general polygon when nested inside a <graph> component. The <polygon> tag is self-closing and the vertices attribute is required. (See also, <regularPolygon>.)

Attributes and Properties

Example: Default <polygon> from vertices

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

Example: Repeat-generated <polygon>

In this example, the inputs to the vertices attribute are generated by a <repeatForSequence> within the <graph>.

Example: <polygon> from added <points>

In this example, the inputs to the vertices attribute are generated by a series of <callAction> buttons that add a vertex at a time to the <graph>.

Attribute Example: vertices

<graph size="small">
  <polygon name="poly1" vertices="(1,2) (3,5) (-2,6) (0,-5)"/>
</graph>
<p><c>vertices</c> = <asList>$poly1.vertices</asList></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: filled

<graph size="small">
  <polygon name="p1" vertices="(-8,-4) (-8,5) (-6,2)" filled/>
  <polygon name="p2" vertices="(-5,-4) (-5,5) (-3,2)" filled styleNumber="2"/>
  <polygon name="p3" vertices="(-2,-4) (-2,5) (0,2)" filled styleNumber="3"/>
  <polygon name="p4" vertices="(1,-4) (1,5) (3,2)" filled styleNumber="4"/>
  <polygon name="p5" vertices="(4,-4) (4,5) (6,2)" filled styleNumber="5"/>
  <polygon name="p6" vertices="(7,-4) (7,5) (9,2)" filled styleNumber="6"/>
</graph>     
 
<p><c>filled</c> = $p1.filled</p>

The filled attribute renders the polygon with default shading to match the styleNumber.

Attribute Example: draggable

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

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

Attribute Example: verticesDraggable

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

Attribute Example: Style properties

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