`<polygon>`

A polygon defined by a list of vertices

<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

Attributes for `<polygon>`

Number display (5)

avoidScientificNotation

boolean. Default value: false. Whether to render numbers in full decimal form rather than scientific notation.

displayDecimals

integer. Default value: 2. Number of decimal places to display when rendering this number.

displayDigits

integer. Default value: 3. Number of significant digits to display when rendering this number.

displaySmallAsZero

number. Default value: 1e-14. Threshold below which numbers are displayed as zero.

padZeros

boolean. Default value: false. Whether to pad displayed numbers with trailing zeros to fill the requested digits/decimals.

Labels (1)

labelIsName

boolean. Default value: false. Whether to use this component's name as its rendered label.

Other (23)

addControls

keyword. Whether to render interactive vertex control handles.

Value	Description
`center` (default)	Show a control handle for moving the polygon's center.
`none`	Show no control handles.

allowDilation

boolean. Default value: true. Whether the shape can be dilated (scaled) under drag.

allowReflection

boolean. Default value: true. Whether the polyline can be reflected under drag.

allowRotation

boolean. Default value: true. Whether the polyline can be rotated under drag.

allowTranslation

boolean. Default value: true. Whether the polyline can be translated under drag.

applyStyleToLabel

boolean. Default value: false. Whether to apply this component's selected style to its label.

controlOrder

integer. Default value: 0. Slot order for graph controls (1-indexed; 0 means no explicit slot request).

draggable

boolean. Default value: true. Whether the polyline can be dragged on a graph.

filled

boolean. Default value: false. Whether to fill the interior of the polygon.

fillOpacity

number. Opacity of fills, 0 to 1.

layer

integer. Default value: 0. Z-order layer index used to stack graphical components (higher values render on top).

lineStyle

keyword. Stroke style for lines.

Value	Description
`solid`	Continuous, unbroken stroke.
`dashed`	Stroke composed of evenly-spaced dashes.
`dotted`	Stroke composed of evenly-spaced dots.

lineWidth

number. Stroke width for lines, in pixels.

minShrink

number. Default value: 0.1. Minimum scaling factor allowed when dilating.

preserveSimilarity

boolean. Default value: false. Whether the shape is preserved up to similarity (uniform scaling) under drag.

rigid

boolean. Default value: false. Whether the polyline is treated as rigid (preserves shape under drag).

rotateAround

keyword. What point to rotate the shape around.

Value	Description
`centroid` (default)	Rotate around the centroid of the shape.
`vertex`	Rotate around the vertex specified by `rotationVertex`.
`point`	Rotate around the explicit point given by `rotationCenter`.

rotationCenter

point. The point to rotate around when rotateAround is 'point'.

rotationHandleVertices

numberList. Default value: [1]. Vertex indices that should display rotation handles when the shape is rigid or preserves similarity.

rotationVertex

integer. Default value: 1. The vertex index to rotate around when rotateAround is 'vertex'.

showCoordsWhenDragging

boolean. Default value: true. Whether to show coordinate labels while dragging.

vertices

[ pointList ]. The list of vertex points that define the shape.

verticesDraggable

boolean. Whether individual vertices may be dragged independently.

Common to all components (9)

copy

reference. Create an independent copy of another component by reference. Enter a references a $name.

disabled

boolean. Default value: false. Whether this component is disabled and cannot be interacted with.

extend

reference. Extend another component by reference, inheriting its children and attributes. Enter a reference as $name.

fixed

boolean. Default value: false. Whether this component's value is fixed and cannot be modified.

fixLocation

boolean. Default value: false. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

hide

boolean. Default value: false. Whether to hide this component from the rendered output.

isResponse

boolean. Default value: false. Whether this component is treated as a response for the purposes of assessment.

name

text. The name used to reference this component from elsewhere in the document.

styleNumber

integer. Default value: 1. The style number used to select this component's visual styling from the available style definitions.

Properties for `<polygon name="p">`

Number display (5)

$p.avoidScientificNotation

boolean. Whether to render numbers in full decimal form rather than scientific notation.

$p.displayDecimals

integer. Number of decimal places to display when rendering this number.

$p.displayDigits

integer. Number of significant digits to display when rendering this number.

$p.displaySmallAsZero

number. Threshold below which numbers are displayed as zero.

$p.padZeros

boolean. Whether to pad displayed numbers with trailing zeros to fill the requested digits/decimals.

Labels (2)

$p.label

label. The label rendered with this component.

$p.labelIsName

boolean. Whether to use this component's name as its rendered label.

Other (29)

$p.addControls

text. Whether to render interactive vertex control handles.

$p.allowDilation

boolean. Whether the polyline can be dilated under drag.

$p.allowReflection

boolean. Whether the polyline can be reflected under drag.

$p.allowRotation

boolean. Whether the polyline can be rotated under drag.

$p.allowTranslation

boolean. Whether the polyline can be translated under drag.

$p.applyStyleToLabel

boolean. Whether to apply this component's selected style to its label.

$p.area

number. The area enclosed by the polygon.

$p.borderStyleDescription

text. A textual description of the polygon's border style.

$p.center

[ math ]. The centroid of the polyline's vertices.

$p.controlOrder

integer. Slot order for graph controls (1-indexed; 0 means no explicit slot request).

$p.disabled

boolean. Whether this component is disabled and cannot be interacted with.

$p.draggable

boolean. Whether the polyline can be dragged on a graph.

$p.filled

boolean. Whether to fill the interior of the polygon.

$p.fillStyleDescription

text. A textual description of the polygon's fill style.

$p.fixed

boolean. Whether this component's value is fixed and cannot be modified.

$p.fixLocation

boolean. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

$p.hidden

boolean. Whether this component is hidden from the rendered output.

$p.layer

integer. Z-order layer index used to stack graphical components (higher values render on top).

$p.numDimensions

number. The number of dimensions the polyline lives in.

$p.numSides

number. The number of sides of the polygon.

$p.numVertices

number. The number of vertices in the polyline.

$p.perimeter

number. The perimeter of the polygon.

$p.preserveSimilarity

boolean. Whether the polyline preserves its shape (up to similarity).

$p.rigid

boolean. Whether the polyline is treated as rigid (preserves shape under drag).

$p.showCoordsWhenDragging

boolean. Whether to show coordinate labels while dragging.

$p.styleDescription

text. A textual description of the polygon's style.

$p.styleDescriptionWithNoun

text. Style description including the word "polygon".

$p.vertices

[ math ]. The vertices of the polyline.

$p.verticesDraggable

boolean. Whether each vertex can be dragged independently.

Common to all components (4)

$p.doenetML

text. The DoenetML source code that produced this component.

$p.hide

boolean. Whether to hide this component from the rendered output.

$p.isResponse

boolean. Whether this component is treated as a response for the purposes of assessment.

$p.styleNumber

integer. The style number used to select this component's visual styling from the available style definitions.

Examples

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 Examples

Attribute Example: vertices

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

Attribute Example: filled

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

Attribute Example: draggable

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

Attribute Example: verticesDraggable

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: rigid

The rigid attribute locks the shape and size of the <polygon>, treating it as a rigid body. Drag an edge to translate the polygon, and drag the highlighted vertex to rotate it about its centroid. Only that highlighted vertex (the rotation handle) is draggable; the other vertices are locked. A filled polygon can additionally be translated by dragging its interior. The default value is false, in which case each vertex may be dragged independently.

Attribute Example: preserveSimilarity

The preserveSimilarity attribute preserves the shape of the <polygon> up to similarity: dragging the highlighted vertex rotates and uniformly scales (dilates) the polygon, while dragging an edge translates it. Unlike rigid, the overall size may change. The default value is false.

Attribute Example: allowRotation

When the <polygon> is rigid or preserves similarity, the allowRotation attribute controls whether dragging the highlighted vertex may rotate it. Set to false to forbid rotation. The default value is true. Because this polygon uses preserveSimilarity (which allows dilation), disabling rotation leaves the highlighted vertex able to uniformly scale the polygon.

Attribute Example: allowTranslation

When the <polygon> is rigid or preserves similarity, the allowTranslation attribute controls whether dragging an edge (or the interior of a filled polygon) may move it. Set to false to forbid translation. The default value is true.

Attribute Example: allowDilation

When the <polygon> preserves similarity, the allowDilation attribute controls whether dragging the highlighted vertex may uniformly scale it. The default value is true; combining preserveSimilarity with allowDilation="false" is equivalent to rigid. (Setting rigid always forces dilation off.)

Attribute Example: allowReflection

The allowReflection attribute controls whether the <polygon> may be flipped (reflected) across a vertical line through its centroid. The default value is true.

Reflection is not currently triggered by a built-in drag or click gesture; it is performed by the reflectPolygon action. In this example that action is invoked with <callAction> whenever a polygon is clicked. The first polygon reflects on each click, while the second has allowReflection="false", so clicking it has no effect.

Attribute Example: rotateAround

When the <polygon> is rigid or preserves similarity, the rotateAround attribute sets the center of rotation. Valid values are centroid (the default), vertex (the vertex given by rotationVertex), and point (the explicit point given by rotationCenter).

Attribute Example: Standard graphical attributes

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

Property Examples

Property Example: Style properties

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

pointList polyline

<polygon>