This site is supported by donations to The OEIS Foundation.

Template:Polygon

From OeisWiki
(Redirected from Template:Closed polyline)
Jump to: navigation, search

The {{polygon}} graphic template is used to draw a polygon. A nondegenerate polygon is a closed polyline with at least 3 distinct points vertices. (To draw an open polyline, you may use the {{polyline}} graphic template.)

Usage

{{polygon|n = ''n''|points = ''x_1, y_1; ...; x_n, y_n''|units = ''units''
|stroke width = ''stroke width''|stroke color = ''stroke color''|stroke style = ''stroke style''
|fill = ''fill''|z-index = ''z-index''
}}

where:

  • n is the number (maximum 24) of points (vertices) considered (default: 0);
  • points are the points (vertices) Cartesian coordinates "x_1, y_1; ...; x_n, y_n", without the quotes (default: "0, 0", without the quotes);
  • units are the units associated with points and stroke width (default: px). Units may be chosen among %, px, cm, mm, in, pc, pt, em or ex;
  • stroke width is the polygon stroke width (default: 1);
  • stroke color is the polygon stroke color (default: black, i.e.     );
  • stroke style is the stroke style for the polygon (default: solid), chosen among the values listed in the table of stroke styles below;
  • fill is the polygon fill style (includes color, gradient, pattern) (default: none) (yet to be implemented for a n-sided polygon... if ever possible for a nonrectangular polygon!);
  • z-index is the z-index of the polygon (default: 0, same as for the canvas).

Stroke styles

Table of stroke styles[1]
Value Description
none no line/border
hidden same as none (except in border conflict resolution for table elements)
dotted dotted line/border
dashed dashed line/border
solid solid line/border
double double line/border
groove 3D grooved line/border (the effect depends on the border-color value)
ridge 3D ridged line/border (the effect depends on the border-color value)
inset 3D inset line/border (the effect depends on the border-color value)
outset 3D outset line/border (the effect depends on the border-color value)
inherit line/border style should be inherited from the parent element

Tests

Code Result Comment
{{canvas|width = 100|height = 100|{{polygon}}}}
(nothing drawn,
needs at least two points)
{{canvas|width = 100|height = 100|{{polygon|0}}}}
(nothing drawn,
needs at least two points)
{{canvas|width = 100|height = 100|{{polygon|1|0, 0}}}}
(nothing drawn,
needs at least two points)
{{canvas|width = 100|height = 100|{{polygon|2|0, 0; 50, 0}}}}
 
{{canvas|width = 100|height = 100|{{rotate|{{polygon|2|0, 0; 50, 0}}|30|angle unit = deg}}}}
 
{{canvas|width = 100|height = 100|{{polygon|2|0, 0; 25, 25}}}}
 
{{canvas|width = 100|height = 100|{{polygon|3|45, 0; 0, 45; -45, 0}}}}
 
{{canvas|width = 100|height = 100|{{rotate|{{polygon|3|45, 0; 0, 45; -45, 0}}|45|angle unit = deg}}}}
 

Examples

<!--
-->{{canvas|width = 500|height = 500|float = right|<!--

  -->{{translate|<!--
    -->{{rotate|<!--
      -->{{polygon|3| <!-- Trigon -->
           50 * cos (0*(2*pi/3)), 50 * sin (0*(2*pi/3));
           50 * cos (1*(2*pi/3)), 50 * sin (1*(2*pi/3));
           50 * cos (2*(2*pi/3)), 50 * sin (2*(2*pi/3));         
         | stroke width = 3 | units = px
         | stroke color = red | stroke style = solid 
         | z-index = 2         
         }}<!--
    -->| angle = 3*(pi/6)
       }}<!--
  -->| 75, 75
     }}<!--

  -->{{translate|<!--
    -->{{rotate|<!--
      -->{{polygon|4| <!-- Tetragon -->
           50 * cos (0*(2*pi/4)), 50 * sin (0*(2*pi/4));
           50 * cos (1*(2*pi/4)), 50 * sin (1*(2*pi/4));
           50 * cos (2*(2*pi/4)), 50 * sin (2*(2*pi/4));
           50 * cos (3*(2*pi/4)), 50 * sin (3*(2*pi/4));         
         | stroke width = 4 | units = px
         | stroke color = green | stroke style = dotted         
         | z-index = 2
         }}<!--
    -->| angle = 2*(pi/8)
       }}<!--
  -->| 425, 75
     }}<!--

  -->{{translate|<!--
    -->{{rotate|<!--
      -->{{polygon|5| <!-- Pentagon -->
           150 * cos (0*(2*pi/5)), 150 * sin (0*(2*pi/5));
           150 * cos (1*(2*pi/5)), 150 * sin (1*(2*pi/5));
           150 * cos (2*(2*pi/5)), 150 * sin (2*(2*pi/5));
           150 * cos (3*(2*pi/5)), 150 * sin (3*(2*pi/5));
           150 * cos (4*(2*pi/5)), 150 * sin (4*(2*pi/5));        
         | stroke width = 5 | units = px
         | stroke color = gold | stroke style = double          
         | z-index = 2
         }}<!--
    -->| angle = 1*(pi/10)
       }}<!--
  -->| 250, 250
     }}<!--

  -->{{translate|<!--
    -->{{rotate|<!--
      -->{{polygon|6| <!-- Hexagon -->
           50 * cos (0*(2*pi/6)), 50 * sin (0*(2*pi/6));
           50 * cos (1*(2*pi/6)), 50 * sin (1*(2*pi/6));
           50 * cos (2*(2*pi/6)), 50 * sin (2*(2*pi/6));
           50 * cos (3*(2*pi/6)), 50 * sin (3*(2*pi/6));
           50 * cos (4*(2*pi/6)), 50 * sin (4*(2*pi/6));
           50 * cos (5*(2*pi/6)), 50 * sin (5*(2*pi/6));         
         | stroke width = 6 | units = px
         | stroke color = blue | stroke style = dashed          
         | z-index = 2
         }}<!--
    -->| angle = 0*(pi/12)
       }}<!--
  -->| 75, 425 
     }}<!--

  -->{{translate|<!--
    -->{{rotate|<!--
      -->{{polygon|7| <!-- Heptagon -->
           50 * cos (0*(2*pi/7)), 50 * sin (0*(2*pi/7));
           50 * cos (1*(2*pi/7)), 50 * sin (1*(2*pi/7));
           50 * cos (2*(2*pi/7)), 50 * sin (2*(2*pi/7));
           50 * cos (3*(2*pi/7)), 50 * sin (3*(2*pi/7));
           50 * cos (4*(2*pi/7)), 50 * sin (4*(2*pi/7));
           50 * cos (5*(2*pi/7)), 50 * sin (5*(2*pi/7));
           50 * cos (6*(2*pi/7)), 50 * sin (6*(2*pi/7));         
         | stroke width = 7 | units = px
         | stroke color = purple | stroke style = solid          
         | z-index = 2
         }}<!--
    -->| angle = -1*(pi/14)
       }}<!--
  -->| 425, 425
     }}<!--


  -->{{translate|<!--
    -->{{rotate|<!--
      -->{{polygon|4| <!-- Square trough the centers of the 
                           3-gon, 4-gon, 6-gon and 7-gon -->
           (2 * 175^2)^(1/2) * cos (0*(2*pi/4)), 
             (2 * 175^2)^(1/2) * sin (0*(2*pi/4));

           (2 * 175^2)^(1/2) * cos (1*(2*pi/4)), 
             (2 * 175^2)^(1/2) * sin (1*(2*pi/4));

           (2 * 175^2)^(1/2) * cos (2*(2*pi/4)), 
             (2 * 175^2)^(1/2) * sin (2*(2*pi/4));

           (2 * 175^2)^(1/2) * cos (3*(2*pi/4)), 
             (2 * 175^2)^(1/2) * sin (3*(2*pi/4));
         | stroke width = 3
         | z-index = 1
         }}<!--
    -->| angle = 2*(pi/8)
       }}<!--
  -->| 250, 250
     }}<!--


  -->{{translate|<!--
    -->{{rotate|<!--
      -->{{polygon|8| <!-- Octagon -->
           50 * cos (0*(2*pi/8)), 50 * sin (0*(2*pi/8));
           50 * cos (1*(2*pi/8)), 50 * sin (1*(2*pi/8));
           50 * cos (2*(2*pi/8)), 50 * sin (2*(2*pi/8));
           50 * cos (3*(2*pi/8)), 50 * sin (3*(2*pi/8));
           50 * cos (4*(2*pi/8)), 50 * sin (4*(2*pi/8));
           50 * cos (5*(2*pi/8)), 50 * sin (5*(2*pi/8));
           50 * cos (6*(2*pi/8)), 50 * sin (6*(2*pi/8));
           50 * cos (7*(2*pi/8)), 50 * sin (7*(2*pi/8));         
         | stroke width = 4 | units = px
         | stroke color = lightgreen | stroke style = dotted          
         | z-index = 2
         }}<!--
    -->| angle = -2*(pi/16)
       }}<!--
  -->| 250, 250
     }}<!--

-->}}<!--
-->
yields

Rotation applied before translation

<!--
-->{{canvas|width = 500|height = 500|float = right|<!--

  -->{{translate|<!--
    -->{{rotate|<!--
      -->{{polygon|5|
           150 * cos (0*(2*pi/5)), 150 * sin (0*(2*pi/5));
           150 * cos (1*(2*pi/5)), 150 * sin (1*(2*pi/5));
           150 * cos (2*(2*pi/5)), 150 * sin (2*(2*pi/5));
           150 * cos (3*(2*pi/5)), 150 * sin (3*(2*pi/5));
           150 * cos (4*(2*pi/5)), 150 * sin (4*(2*pi/5));
         }}<!--
    -->| angle = 0*(pi/10)
       }}<!--
  -->| 250, 250
     }}<!--

  -->{{translate|<!--
    -->{{rotate|<!--
      -->{{polygon|5|
           150 * cos (0*(2*pi/5)), 150 * sin (0*(2*pi/5));
           150 * cos (1*(2*pi/5)), 150 * sin (1*(2*pi/5));
           150 * cos (2*(2*pi/5)), 150 * sin (2*(2*pi/5));
           150 * cos (3*(2*pi/5)), 150 * sin (3*(2*pi/5));
           150 * cos (4*(2*pi/5)), 150 * sin (4*(2*pi/5));
         }}<!--
    -->| angle = 1*(pi/10)
       }}<!--
  -->| 250, 250
     }}<!--

  -->{{translate|<!--
    -->{{rotate|<!--
      -->{{polygon|5|
           150 * cos (0*(2*pi/5)), 150 * sin (0*(2*pi/5));
           150 * cos (1*(2*pi/5)), 150 * sin (1*(2*pi/5));
           150 * cos (2*(2*pi/5)), 150 * sin (2*(2*pi/5));
           150 * cos (3*(2*pi/5)), 150 * sin (3*(2*pi/5));
           150 * cos (4*(2*pi/5)), 150 * sin (4*(2*pi/5));
         }}<!--
    -->| angle = 2*(pi/10)
       }}<!--
  -->| 250, 250
     }}<!--

  -->{{translate|<!--
    -->{{rotate|<!--
      -->{{polygon|5|
           150 * cos (0*(2*pi/5)), 150 * sin (0*(2*pi/5));
           150 * cos (1*(2*pi/5)), 150 * sin (1*(2*pi/5));
           150 * cos (2*(2*pi/5)), 150 * sin (2*(2*pi/5));
           150 * cos (3*(2*pi/5)), 150 * sin (3*(2*pi/5));
           150 * cos (4*(2*pi/5)), 150 * sin (4*(2*pi/5));
         }}<!--
    -->| angle = 3*(pi/10)
       }}<!--
  -->| 250, 250
     }}<!--

-->}}<!--
-->
yields

Translation applied before rotation

<!--
-->{{canvas|width = 500|height = 500|float = right|<!--

  -->{{translate|<!--
    -->{{rotate|<!--

      -->{{rotate|<!--
        -->{{translate|<!--
          -->{{polygon|5|
               100 * cos (0*(2*pi/5)), 100 * sin (0*(2*pi/5));
               100 * cos (1*(2*pi/5)), 100 * sin (1*(2*pi/5));
               100 * cos (2*(2*pi/5)), 100 * sin (2*(2*pi/5));
               100 * cos (3*(2*pi/5)), 100 * sin (3*(2*pi/5));
               100 * cos (4*(2*pi/5)), 100 * sin (4*(2*pi/5));
             }}<!--
        -->| 100, 0
           }}<!--
      -->| angle = 0*(2*pi/5)
         }}<!--

      -->{{rotate|<!--
        -->{{translate|<!--
          -->{{polygon|5|
               100 * cos (0*(2*pi/5)), 100 * sin (0*(2*pi/5));
               100 * cos (1*(2*pi/5)), 100 * sin (1*(2*pi/5));
               100 * cos (2*(2*pi/5)), 100 * sin (2*(2*pi/5));
               100 * cos (3*(2*pi/5)), 100 * sin (3*(2*pi/5));
               100 * cos (4*(2*pi/5)), 100 * sin (4*(2*pi/5));
             }}<!--
        -->| 100, 0
           }}<!--
      -->| angle = 1*(2*pi/5)
         }}<!--

      -->{{rotate|<!--
        -->{{translate|<!--
          -->{{polygon|5|
               100 * cos (0*(2*pi/5)), 100 * sin (0*(2*pi/5));
               100 * cos (1*(2*pi/5)), 100 * sin (1*(2*pi/5));
               100 * cos (2*(2*pi/5)), 100 * sin (2*(2*pi/5));
               100 * cos (3*(2*pi/5)), 100 * sin (3*(2*pi/5));
               100 * cos (4*(2*pi/5)), 100 * sin (4*(2*pi/5));
             }}<!--
        -->| 100, 0
           }}<!--
      -->| angle = 2*(2*pi/5)
         }}<!--

      -->{{rotate|<!--
        -->{{translate|<!--
          -->{{polygon|5|
               100 * cos (0*(2*pi/5)), 100 * sin (0*(2*pi/5));
               100 * cos (1*(2*pi/5)), 100 * sin (1*(2*pi/5));
               100 * cos (2*(2*pi/5)), 100 * sin (2*(2*pi/5));
               100 * cos (3*(2*pi/5)), 100 * sin (3*(2*pi/5));
               100 * cos (4*(2*pi/5)), 100 * sin (4*(2*pi/5));
             }}<!--
        -->| 100, 0
           }}<!--
      -->| angle = 3*(2*pi/5)
         }}<!--
 
      -->{{rotate|<!--
        -->{{translate|<!--
          -->{{polygon|5|
               100 * cos (0*(2*pi/5)), 100 * sin (0*(2*pi/5));
               100 * cos (1*(2*pi/5)), 100 * sin (1*(2*pi/5));
               100 * cos (2*(2*pi/5)), 100 * sin (2*(2*pi/5));
               100 * cos (3*(2*pi/5)), 100 * sin (3*(2*pi/5));
               100 * cos (4*(2*pi/5)), 100 * sin (4*(2*pi/5));
             }}<!--
        -->| 100, 0
           }}<!--
      -->| angle = 4*(2*pi/5)
         }}<!--

    -->| angle = 1*(pi/10)
       }}<!--
  -->| 250, 250
     }}<!--

-->}}<!--
-->
yields

See also

Drawing templates






Affine transforms templates

See Help:CSS Transforms.




Notes

  1. www.w3schools.com, CSS border-style Property.