Polygon¶

Overview¶

Class

A figure that is delimited by a closed chain of three or more straight sections.

Supertypes

GraphicalPrimitive

Attributes (data)

Name	Multiplicity	Type
FillStyle	1	FillStyle
Points	3..*	Point
Stroke	1	Stroke

Geometry¶

The first straight section that delimits a Polygon starts at its first Point (Points[0]) and ends at its second Point. For each further Point, another section is added that starts at the preceding Point. Finally, a section is added that starts at the last Point and goes back to the first Point such that the chain of sections is closed.

Example

We consider a Polygon with 4 Points:

(-30, 40),
(50, 40),
(-10, -60), and
(-10, 0).

The Polygon will look like this:

Interior of a Polygon

Depending on its FillStyle, the interior of a Polygon may be filled. There are several possibilities to define when “a point is inside a polygon”. DEXPI applies a simple intuitive rule:

Choose an arbitrary point outside the geometric bounding box of the Polygon.
Each point that can be reached from there without crossing any segment is outside the Polygon.
Each other point is inside the Polygon.

Example

The grey area in the figure visualizes the interior of the given Polygon.

Technical Note

In case of polygons, the DEXPI definition for interior points coincides with the nonzero rule in SVG. See Section 13.4.2. of the SVG 2 Recommendation for a more precise definition of the nonzero rule.

The SVG 2 Recommendation also defines an alternative rule called evenodd rule. If we applied this rule, the pentagonal area in the center of this Polygon would be considered outside:

Visual Center

Let \(n\) be the number of Points, and let \(x_i\) and \(y_i\) be the X and Y positions of Point \(i\) for \(0 \leq i < n\).

Then the horizontal position \(c_x\) and the vertical position \(c_y\) of the visual center of the Polygon are

\[ \begin{align}\begin{aligned}c_x &= \frac 1 2 \Big[ \min_{i=0}^{n-1} x_i + \max_{i=0}^{n-1} x_i \Big] \quad ,\\c_y &= \frac 1 2 \Big[ \min_{i=0}^{n-1} y_i + \max_{i=0}^{n-1} y_i \Big] \quad .\end{aligned}\end{align} \]

Intuitively, the visual center is the center of the minimum bounding box that contains all Points.

If the Polygon has the FillStyle Hatch, then one of the hatch lines will cross through the visual center.

Example

For the Polygon above, we have

\[ \begin{align}\begin{aligned}c_x &= \frac 1 2 [ \min(-30, 50, -10, -10) + \max(-30, 50, -10, -10) ]\\ &= \frac 1 2 [-30 + 50]\\ &= 10\end{aligned}\end{align} \]

and

\[ \begin{align}\begin{aligned}c_y &= \frac 1 2 [ \min(40, 40, -60, 0) + \max(40, 40, -60, 0) ]\\ &= \frac 1 2 [-60 + 40]\\ &= -10 \quad .\end{aligned}\end{align} \]

Mapping to SVG¶

A Polygon corresponds to an svg:polygon with these attributes:

transform contains a translation from the origin to the visual center. This is required due to the modified positions in points.

transform = "translate( + str(\(c_x\)) + , + str(\(c_y\)) + )"
points contains the Points of the Polygon relative to the visual center.

For each Point \(i\) with (absolute) position \(x_i\) and \(y_i\), the position relative to the visual center is

\[ \begin{align}\begin{aligned}\tilde{x}_i &= x_i - c_x \quad ,\\\tilde{y}_i &= y_i - c_y \quad .\end{aligned}\end{align} \]

Each of the relative positions is converted to a string as str(\(\tilde{x}_i\)) + , + str(\(\tilde{y}_i\)). Finally, the points attribute is set to a single string that contains all relative positions, separated by spaces.
stroke, stroke-dasharray, stroke-dashoffset and stroke-width are set according to the SVG mapping rules for the Stroke of the Polygon (see Stroke).
stroke-linecap = "round" and stroke-linejoin = "round" reflect the heuristic for line caps and line joins.
vector-effect = "non-scaling-stroke" reflects the heuristic for scaled symbols.
fill is set according to the SVG mapping rules for the FillStyle of the Polygon (see FillStyle).

Implementation in Proteus Schema

A Polygon is implemented using the Proteus element <Shape>.

Example

We assume that the Stroke of the Polygon above is 2mm #ff00ff Solid and that its FillStyle is Transparent.

<svg
  xmlns = "http://www.w3.org/2000/svg"
  width = "82mm"
  height = "102mm"
  viewBox = "-31 -61 82 102">
  <polygon
    transform = "translate(10.0,-10.0)"
    points = "-40.0,50.0 40.0,50.0 -20.0,-50.0 -20.0,10.0"
    stroke = "#ff00ff"
    stroke-dasharray = "none"
    stroke-dashoffset = "0mm"
    stroke-width = "2mm"
    stroke-linecap = "round"
    stroke-linejoin = "round"
    vector-effect = "non-scaling-stroke"
    fill = "none"/>
</svg>

Implementation in Proteus Schema

<Shape NumPoints = "5">
  <Presentation
    LineType = "0"
    LineWeight = "2"
    R = "1"
    G = "0"
    B = "1"/>
  <Coordinate X = "-30" Y = "-40"/>
  <Coordinate X = "50" Y = "-40"/>
  <Coordinate X = "-10" Y = "60"/>
  <Coordinate X = "-10" Y = "0"/>
  <Coordinate X = "-30" Y = "-40"/>
</Shape>

Example

We consider the same Polygon as in the previous example, except that the Stroke is 2mm #ff00ff Dot.

<svg
  xmlns = "http://www.w3.org/2000/svg"
  width = "82mm"
  height = "102mm"
  viewBox = "-31 -61 82 102">
  <polygon
    transform = "translate(10.0,-10.0)"
    points = "-40.0,50.0 40.0,50.0 -20.0,-50.0 -20.0,10.0"
    stroke = "#ff00ff"
    stroke-dasharray = "0mm 4mm"
    stroke-dashoffset = "0mm"
    stroke-width = "2mm"
    stroke-linecap = "round"
    stroke-linejoin = "round"
    vector-effect = "non-scaling-stroke"
    fill = "none"/>
</svg>

Implementation in Proteus Schema

<Shape NumPoints = "5">
  <Presentation
    LineType = "1"
    LineWeight = "2"
    R = "1"
    G = "0"
    B = "1"/>
  <Coordinate X = "-30" Y = "-40"/>
  <Coordinate X = "50" Y = "-40"/>
  <Coordinate X = "-10" Y = "60"/>
  <Coordinate X = "-10" Y = "0"/>
  <Coordinate X = "-30" Y = "-40"/>
</Shape>

Example

Finally, a variant with Stroke 2mm #ff00ff Solid and FillStyle Hatch.

<svg
  xmlns = "http://www.w3.org/2000/svg"
  width = "82mm"
  height = "102mm"
  viewBox = "-31 -61 82 102">
  <defs>
    <pattern
      id = "pattern-1"
      width = "10"
      height = "20"
      patternUnits = "userSpaceOnUse"
      patternTransform = "rotate(0) scale(1.0,1.0) rotate(315) translate(-1.0,-1.0)">
      <polyline
        points = "0,1.0 10,1.0"
        stroke = "#ff00ff"
        stroke-width = "2mm"
        vector-effect = "non-scaling-stroke"/>
    </pattern>
  </defs>
  <polygon
    transform = "translate(10.0,-10.0)"
    points = "-40.0,50.0 40.0,50.0 -20.0,-50.0 -20.0,10.0"
    stroke = "#ff00ff"
    stroke-dasharray = "none"
    stroke-dashoffset = "0mm"
    stroke-width = "2mm"
    stroke-linecap = "round"
    stroke-linejoin = "round"
    vector-effect = "non-scaling-stroke"
    fill = "url(#pattern-1)"/>
</svg>

Implementation in Proteus Schema

<Shape NumPoints = "5" Filled = "Hatch">
  <Presentation
    LineType = "0"
    LineWeight = "2"
    R = "1"
    G = "0"
    B = "1"/>
  <Coordinate X = "-30" Y = "-40"/>
  <Coordinate X = "50" Y = "-40"/>
  <Coordinate X = "-10" Y = "60"/>
  <Coordinate X = "-10" Y = "0"/>
  <Coordinate X = "-30" Y = "-40"/>
</Shape>

FillStyle¶

Attribute (data)

The fill style of the Polygon.

Multiplicity: 1

Type: FillStyle

Points¶

Attribute (data)

The points (vertices) of the Polygon.

Multiplicity: 3..*

Type: Point

Modifiers: ordered, nonunique

Stroke¶

Attribute (data)

The stroke of the Polygon.

Multiplicity: 1

Type: Stroke