<rectangle>

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

Attributes and Properties

Example: Default <rectangle>

This is a default <rectangle> without additional attributes. The vertices can be dragged to change its shape, and the rectangle itself can be repositioned by clicking and dragging on any side.

Example: <rectangle> with center, width and height

A <rectangle> can be described by specifying its center, width and height with attributes. The vertices can be dragged to change its shape, and the rectangle itself can be repositioned by clicking and dragging on any side.

Example: Filled colored <rectangle>

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

Example: <rectangle> from vertices

Use the vertices attribute to specify a list of the two opposite corner points of the rectangle (lower left and upper right); default: vertices=“(0,0) (1,1)“

Example: <rectangle> constrained to a grid

A rectangle is effectively constrained to an integer grid by referencing two constrained points in the vertices attribute.

Attribute Example: center

<p>Drag the center point to shift the rectangle's position</p>
 
<graph size="small" xmin="-2" xmax="2" ymin="-2" ymax="2">
  <rectangle center="(0,0)" name="rect"/>
  <point extend="$rect.center" styleNumber="2"/>
</graph>
<p><c>center</c> = $rect.center</p>

Use the center attribute to specify the center point of the rectangle. If not specified, the default center position is $(0.5, 0.5)$.

Attribute Example: width, height

<p>Drag the corners of the rectangle to change its shape.</p>
<graph size="small">
  <rectangle height="4" width="7" name="rect"/>
</graph>
 
<p><c>width</c> = $rect.width</p>
<p><c>height</c> = $rect.height</p>

Use the width and height attributes to specify the proportions of the <rectangle> directly. If not specified, the default values for width and height are both $1$.

Attribute Example: vertices

Use the vertices attribute to specify a list of the two opposite corner points of the rectangle (lower left and upper right); default: vertices=“(0,0) (1,1)“

Attribute Example: verticesDraggable

<p>Drag the rectangle around the graph.</p>
 
<graph>
  <rectangle vertices="(-3,-4) (5,6)" name="rect" verticesDraggable="false"/>
</graph>
 
<p><c>vertices</c> = $rect.vertices</p>
<p><c>width</c> = $rect.width</p>
<p><c>height</c> = $rect.height</p>

Vertices are draggable by default. Use the verticesDraggable attribute set to false to disable users from changing the proportions of the <rectangle>. The rectangle 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, draggable, layer, styleNumber, applyStyleToLabel and labelIsName.

Property Example: Attributes as properties

The above listed attributes of a named <rectangle> are also available as properties.