This site is supported by donations to The OEIS Foundation.

Template:Line

From OeisWiki
Jump to: navigation, search

The {{line}} graphic template is used to draw a line on a {{canvas}}.

Usage

{{line}} must be used within the {{canvas}}, which provides the block-level element required for absolute positioning of its content, such as {{line}}.

Either length (and optional start, which defaults to "0, 0" without the quotes, and/or angle, which defaults to 0), or points "x_1, y_1; x_2, y_2", without the quotes, must be provided. (If both are provided, the points are ignored.) (If neither are provided, nothing is drawn.)

Usage with length (and optional start and/or angle)

{{line|length = length|start = x, y|width = width|units = units|angle = angle|angle unit = angle unit|color = color|style = style|line cap = line cap|z-index = z-index}}

where:

  • length is the length of the line;
  • start are the coordinates "x, y" of the start point of the line, without the quotes (default: "0, 0", without the quotes);
  • width is the width of the line (default: 1);
  • units are the units associated with length and width (%, px, cm, mm, in, pc, pt, em or ex) (default: px);
  • angle is the counterclockwise angle in degrees (from the positive x axis) of the line (default: 0);
  • angle unit is deg or rad (default: deg);
  • color is the line color (default: black, i.e.    );
  • style is the style for the line (default: solid), chosen among the values listed in the table of stroke styles below;
  • line cap is the line cap[1] (default: half square; short if style is dotted), chosen among short, butt, half square, square, and (eventually round?), where
    • short is optimized (e.g. avoids partially overlapping dots) for the dotted style (default for dotted style),
    • butt is flat end caps,
    • half square is flat (but extending by a quarter of the line width at both ends of the line) end caps (good for polylines and polygons),
    • round (not yet implemented, reverts to half square) is round (extending up to half the line width at both ends of the line) end caps,
    • square is flat (but extending by half the line width at both ends of the line) end caps;
  • z-index is the z-index of the line (default: 0, same as for the canvas).

Usage with points

{{line|points = x_1, y_1; x_2, y_2|width = width|units = units|color = color|style = style|z-index = z-index}}

where:

  • points are the coordinates "x_1, y_1; x_2, y_2" of the two end points of the line, without the quotes (default: "0, 0; 0, 0", without the quotes);
  • width is the width of the line (default: 1);
  • units are the units associated with length and width (%, px, cm, mm, in, pc, pt, em or ex) (default: px);
  • color is the line color (default: black, i.e.    );
  • style is the style for the line (default: solid), chosen among the values listed in the table of stroke styles below;
  • line cap is the line cap[2] (default: half square; short if style is dotted), chosen among short, butt, half square, square, and (eventually round?), where
    • short is optimized (e.g. avoids partially overlapping dots) for the dotted style (default for dotted style),
    • butt is flat end caps,
    • half square is flat (but extending by a quarter of the line width at both ends of the line) end caps (good for polylines and polygons),
    • round (not yet implemented, reverts to half square) is round (extending up to half the line width at both ends of the line) end caps,
    • square is flat (but extending by half the line width at both ends of the line) end caps;
  • z-index is the z-index of the line (default: 0, same as for the canvas).

Stroke styles

Table of stroke styles[3]
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

Examples

Examples with length

Code Result Comment
{{canvas|width = 256|height = 50|border = none|{{line}}}}
(nothing drawn)
{{canvas|width = 256|height = 50|border = none|{{line|length = }}}}
(nothing drawn)
{{canvas|width = 256|height = 50|border = none|{{line|length = 2^0|color = green}}}}
(a 1px by 1px green dot)
{{canvas|width = 256|height = 50|border = none|{{line|length = 2^1|color = red}}}}
{{canvas|width = 256|height = 50|border = none|{{line|length = 2^2|color = green}}}}
{{canvas|width = 256|height = 50|border = none|{{line|length = 2^3|color = red}}}}
{{canvas|width = 256|height = 50|border = none|{{line|length = 2^4|color = green}}}}
{{canvas|width = 256|height = 50|border = none|{{line|length = 2^5|color = red}}}}
{{canvas|width = 256|height = 50|border = none|{{line|length = 2^6|color = green}}}}
{{canvas|width = 256|height = 50|border = none|{{line|length = 2^7|color = red}}}}
{{canvas|width = 256|height = 50|border = none|{{line|length = 2^8|color = green}}}}


Code Result
{{canvas|width = 1000|height = 50|{{line|length = 50}}}}
{{canvas|width = 1000|height = 50|{{line|length = 100}}}}
{{canvas|width = 1000|height = 50|{{line|length = 150}}}}
{{canvas|width = 1000|height = 50|{{line|length = 200}}}}
{{canvas|width = 1000|height = 50|{{line|length = 250}}}}
{{canvas|width = 1000|height = 50|{{line|length = 300}}}}
{{canvas|width = 1000|height = 50|{{line|length = 350}}}}
{{canvas|width = 1000|height = 50|{{line|length = 400}}}}
{{canvas|width = 1000|height = 50|{{line|length = 450}}}}
{{canvas|width = 1000|height = 50|{{line|length = 500}}}}
{{canvas|width = 1000|height = 50|{{line|length = 550}}}}
{{canvas|width = 1000|height = 50|{{line|length = 600}}}}
{{canvas|width = 1000|height = 50|{{line|length = 650}}}}
{{canvas|width = 1000|height = 50|{{line|length = 700}}}}
{{canvas|width = 1000|height = 50|{{line|length = 750}}}}
{{canvas|width = 1000|height = 50|{{line|length = 800}}}}
{{canvas|width = 1000|height = 50|{{line|length = 850}}}}
{{canvas|width = 1000|height = 50|{{line|length = 900}}}}
{{canvas|width = 1000|height = 50|{{line|length = 950}}}}
{{canvas|width = 1000|height = 50|{{line|length = 1000}}}}


Examples with length (and optional start and/or angle)

Code Result
{{canvas|width = 500|height = 50|{{line|length = 400|width = 4|color = green}}}}
{{canvas|width = 500|height = 50|{{line|length = 400|width = 4|angle = 3*5|color = purple}}}}
{{canvas|width = 500|height = 50|{{line|length = 25|width = 2|units = em|color = blue}}}}
{{canvas|width = 500|height = 50|{{line|length = 25|width = 1+1|units = em|color = yellow|border color = red}}}}
{{canvas|width = 500|height = 50|{{line|length = 25|width = 2^2 - 1|units = em|angle = -5|color = yellow|border color = red}}}}
{{canvas|width = 500|height = 50|{{line|length = 25|width = pi|units = em|angle = -5|color = gray|border color = black}}}}


Code Result Code Result
{{canvas|width = 64|height = 64|{{rotate|{{line|length = 64}}|0}}}}
{{canvas|width = 64|height = 64|{{line|length = 64|angle = 0}}}}
{{canvas|width = 64|height = 64|{{rotate|{{line|length = 64}}|15}}}}
{{canvas|width = 64|height = 64|{{line|length = 64|angle = 15}}}}
{{canvas|width = 64|height = 64|{{rotate|{{line|length = 64}}|30}}}}
{{canvas|width = 64|height = 64|{{line|length = 64|angle = 30}}}}
{{canvas|width = 64|height = 64|{{rotate|{{line|length = 64}}|45}}}}
{{canvas|width = 64|height = 64|{{line|length = 64|angle = 45}}}}
{{canvas|width = 64|height = 64|{{rotate|{{line|length = 64}}|60}}}}
{{canvas|width = 64|height = 64|{{line|length = 64|angle = 60}}}}
{{canvas|width = 64|height = 64|{{rotate|{{line|length = 64}}|75}}}}
{{canvas|width = 64|height = 64|{{line|length = 64|angle = 75}}}}
{{canvas|width = 64|height = 64|{{rotate|{{line|length = 64}}|90}}}}
{{canvas|width = 64|height = 64|{{line|length = 64|angle = 90}}}}


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

-->{{line|length = 64|angle = 18+0*72}}<!--
-->{{line|length = 64|angle = 18+1*72}}<!--
-->{{line|length = 64|angle = 18+2*72}}<!--
-->{{line|length = 64|angle = 18+3*72}}<!--
-->{{line|length = 64|angle = 18+4*72}}<!--

-->{{translate|<!--
  -->{{line|length = 64|angle = 18+0*72|color = red}}<!--
  -->{{line|length = 64|angle = 18+1*72|color = red}}<!--
  -->{{line|length = 64|angle = 18+2*72|color = red}}<!--
  -->{{line|length = 64|angle = 18+3*72|color = red}}<!--
  -->{{line|length = 64|angle = 18+4*72|color = red}}<!--
-->|75, 75}}<!--

-->{{line|length = 64|start = 100, 100|angle = 18+0*72|color = green}}<!--
-->{{line|length = 64|start = 100, 100|angle = 18+1*72|color = green}}<!--
-->{{line|length = 64|start = 100, 100|angle = 18+2*72|color = green}}<!--
-->{{line|length = 64|start = 100, 100|angle = 18+3*72|color = green}}<!--
-->{{line|length = 64|start = 100, 100|angle = 18+4*72|color = green}}<!--

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

yields



Examples with points

Code Result Comment
{{canvas|width = 25|height = 25|{{line|points}}}}
(nothing drawn)
{{canvas|width = 25|height = 25|{{line|points = 0, 0; 0, 0}}}}
(nothing drawn)
{{canvas|width = 25|height = 25|{{line|points = 1, 0; 0, 0}}}}
(a 1px by 1px black dot)
{{canvas|width = 25|height = 25|{{line|points = 0, 1; 0, 0}}}}
(a 1px by 1px black dot)
{{canvas|width = 25|height = 25|{{line|points = 0, 0; 1, 0}}}}
(a 1px by 1px black dot)
{{canvas|width = 25|height = 25|{{line|points = 0, 0; 0, 1}}}}
(a 1px by 1px black dot)
{{canvas|width = 25|height = 25|{{line|points = -1, 0; 0, 0}}}}
(a 1px by 1px black dot)
{{canvas|width = 25|height = 25|{{line|points = 0, -1; 0, 0}}}}
(a 1px by 1px black dot)
{{canvas|width = 25|height = 25|{{line|points = 0, 0; -1, 0}}}}
(a 1px by 1px black dot)
{{canvas|width = 25|height = 25|{{line|points = 0, 0; 0, -1}}}}
(a 1px by 1px black dot)


Code Result
{{canvas|width = 300|height = 125|{{line|points = 0, 0; 50, 0}}}}
{{canvas|width = 300|height = 125|{{line|points = 0, 0; 100, 0}}}}
{{canvas|width = 300|height = 125|{{line|points = 0, 0; 50, 50}}}}
{{canvas|width = 300|height = 125|{{line|points = 0, 0; 100, 50}}}}
{{canvas|width = 300|height = 125|{{line|points = 100, 50; 200, 100}}}}
{{canvas|width = 300|height = 125|{{line|points = 0, 0; 0, 50}}}}
{{canvas|width = 300|height = 125|{{line|points = 0, 0; -100, 0}}}}
{{canvas|width = 300|height = 125|{{line|points = 0, 0; -100, -50}}}}
{{canvas|width = 300|height = 125|{{line|points = 0, 0; 0, -100}}}}

Examples with many styles

<!--
-->{{canvas|width = 640|height = 360|units = px|background = #f9f9f9|float = center|<!--

  -->{{line|points = 0, 0; 100, 50|width = 10|color = green|z-index = 2}}<!--
  -->{{line|points = 100, 50; 200, 0|width = 10|color = green|z-index = 2}}<!--
  -->{{line|points = 200, 0; 250, 50|width = 10|color = green|z-index = 2}}<!--
  -->{{line|points = 250, 50; 320, 100|width = 10|color = green|z-index = 2}}<!--
  -->{{line|points = 320, 100; 450, 250|width = 10|color = green|z-index = 2}}<!--
  -->{{line|points = 450, 250; 640, 0|width = 10|color = green|z-index = 2}}<!--

  -->{{translate|<!--

    -->{{line|points = 0, 0; 100, 50|width = 3|color = brown|style = dashed|z-index = 0}}<!--
    -->{{line|points = 100, 50; 200, 0|width = 3|color = brown|style = dashed|z-index = 0}}<!--
    -->{{line|points = 200, 0; 250, 50|width = 3|color = brown|style = dashed|z-index = 0}}<!--
    -->{{line|points = 250, 50; 320, 100|width = 3|color = brown|style = dashed|z-index = 0}}<!--
    -->{{line|points = 320, 100; 450, 250|width = 3|color = brown|style = dashed|z-index = 0}}<!--
    -->{{line|points = 450, 250; 640, 0|width = 3|color = brown|style = dashed|z-index = 0}}<!--

    -->{{translate|<!--

      -->{{line|points = 0, 0; 100, 50|width = 5|color = cyan|style = dotted}}<!--
      -->{{line|points = 100, 50; 200, 0|width = 5|color = cyan|style = dotted}}<!--
      -->{{line|points = 200, 0; 250, 50|width = 5|color = cyan|style = dotted}}<!--
      -->{{line|points = 250, 50; 320, 100|width = 5|color = cyan|style = dotted}}<!--
      -->{{line|points = 320, 100; 450, 250|width = 5|color = cyan|style = dotted}}<!--
      -->{{line|points = 450, 250; 640, 0|width = 5|color = cyan|style = dotted}}<!--

    -->|0, 50}}<!--

  -->|0, 50}}<!--

  -->{{line|points = 150, 360; 490, 0|width = 20|color = red|style = solid|z-index = 1}}<!--
  -->{{line|points = 150, 360; 490, 0|width = 20|color = yellow|style = double|z-index = 1}}<!--

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

yields


Code

Code for {{line}} graphic template

<noinclude>{{documentation}}</noinclude><includeonly><!--

{{{points|0, 0; 0, 0}}} is used only if {{{length|}}} is empty string
 
-->{{#if:{{{length|}}}<!--
  
-->|<!-- ***** Using length *****

  -->{{translate|<!--
    -->{{rotate|<!--
      -->{{~Line
         | length = {{#expr: {{{length|1}}} }}
         | width = {{#expr: {{{width|1}}} }}
         | units = {{{units|px}}}
         | color = {{{color|black}}}
         | style = {{{style|solid}}}
         | z-index = {{#expr: {{{z-index|0}}} }}
         }}<!--
    -->| angle = {{#expr: {{{angle|0}}} }}
       | angle unit = {{{angle unit|deg}}} 
       }}<!-- 
  -->| offset = {{#expr: {{#explode:{{{start|0, 0}}}|,|0}} }}, {{#expr: {{#explode:{{{start|0, 0}}}|,|1}} }} 
     | unit = {{{units|px}}} 
     }}<!--
  
-->|<!-- ***** NOT using length *****

  -->{{#ifeq: {{#explode:{{{points|0, 0; 0, 0}}}|;|0}} | {{#explode:{{{points|0, 0; 0, 0}}}|;|1}}<!--
  
  -->|<!-- ***** Length is zero (nothing to draw) ***** --><!--
  
  -->|<!-- ***** Using points *****

    -->{{translate|<!--
      -->{{rotate|<!--
        -->{{~Line
           | length = {{#expr: (

( ({{#explode:{{#explode:{{{points}}}|;|1}}|,|0}}<!-- x_2 -->) - ({{#explode:{{#explode:{{{points}}}|;|0}}|,|0}}<!-- x_1 -->) )^2
+
( ({{#explode:{{#explode:{{{points}}}|;|1}}|,|1}}<!-- y_2 -->) - ({{#explode:{{#explode:{{{points}}}|;|0}}|,|1}}<!-- y_1 -->) )^2

)^(1/2)
                      }}
           | width = {{#expr: {{{width|1}}} }}
           | units = {{{units|px}}}
           | color = {{{color|black}}}
           | style = {{{style|solid}}}
           | z-index = {{#expr: {{{z-index|0}}} }}
           }}<!--
      -->| angle = {{atan2

| y = {{#expr:

( ({{#explode:{{#explode:{{{points}}}|;|1}}|,|1}}<!-- y_2 -->) - ({{#explode:{{#explode:{{{points}}}|;|0}}|,|1}}<!-- y_1 -->) )

      }}

| x = {{#expr:

( ({{#explode:{{#explode:{{{points}}}|;|1}}|,|0}}<!-- x_2 -->) - ({{#explode:{{#explode:{{{points}}}|;|0}}|,|0}}<!-- x_1 -->) )

      }}

| cut = 2 <!-- 0 to 2pi -->

                  }}
         | angle unit = rad   
         }}<!-- 
    -->| offset = {{#expr: {{#explode:{{#explode:{{{points|0, 0; 1, 0}}}|;|0}}|,|0}} }}, <!--
               -->{{#expr: {{#explode:{{#explode:{{{points|0, 0; 1, 0}}}|;|0}}|,|1}} }} 
       | unit = {{{units|px}}} 
       }}<!--
  -->}}<!-- 
-->}}</includeonly>

Code for {{~Line}} core function template

<noinclude>{{documentation}}</noinclude><includeonly><!-- 

 http://www.w3schools.com/cssref/pr_border-style.asp

--><span style="<!--
-->position: absolute;<!-- 
-->left: {{#expr: 0 + 
  {{#switch: {{{line cap| {{#ifeq: {{{style|solid}}} | dotted | short | half square }} }}}
  | short = 0 <!-- (correction for dotted style, which happens to be drawn shifted left by half the width of the stroke) -->  
  | butt = 0  
  | square = - ( {{{width|1}}} ) / 2  
  | round <!-- not yet implemented, reverts to half square --> 
  | half square = - ( {{{width|1}}} ) / 4 <!-- is better to draw polylines and polygons -->  
  | - ( {{{width|1}}} ) / 4 <!-- invalid line cap argument, reverts to half square --> 
  }}
}}{{{units|px}}};<!--  
-->bottom: {{#expr: 0.0 - ( ( {{{width|1}}} ) / 2.0 ) }}{{{units|px}}};<!-- (so that the stroke is centered about 0, OK and MUCH BETTER!) 
-->z-index: {{{z-index|0}}};<!-- 
-->height: 0;<!-- fill of height 0 (since we only draw a top border to make a line) 
-->width: {{#expr: ( {{{length|0}}} ) + 
  {{#switch: {{{line cap| {{#ifeq: {{{style|solid}}} | dotted | short | half square }} }}}
  | short = - ( {{{width|1}}} ) <!-- for dotted style, to avoid partially overlapping dots -->   
  | butt = 0  
  | square = ( {{{width|1}}} )  
  | round <!-- not yet implemented, reverts to half square --> 
  | half square = ( {{{width|1}}} ) / 2 <!-- is better to draw polylines and polygons -->  
  | ( {{{width|1}}} ) / 2 <!-- invalid line cap argument, reverts to half square -->
  }} 
}}{{{units|px}}};<!-- since we draw a horizontal line (the width of a CSS box is the length of our line)

-->border-top-width: {{{width|1}}}{{{units|px}}};<!-- ***** We use only the top border to draw the line *****
-->border-right-width: 0;<!-- 0 (or {{{width|1}}}{{{units|px}}} for testing)  
-->border-bottom-width: 0;<!-- 0 (or {{{width|1}}}{{{units|px}}} for testing) 
-->border-left-width: 0;<!-- 0 (or {{{width|1}}}{{{units|px}}} for testing) 

-->border-top-color: {{{color|black}}};<!--
-->border-right-color: purple;<!-- (for testing only) 
-->border-bottom-color: blue;<!-- (for testing only) 
-->border-left-color: red;<!-- (for testing only)
 
-->border-top-style: {{{style|solid}}};<!-- ***** We use only the top border to draw the line ***** 
-->border-right-style: none;<!-- none (or solid for testing)
-->border-bottom-style: none;<!-- none (or solid for testing) 
-->border-left-style: none;<!-- none (or solid for testing)
 
-->"></span></includeonly>

Tests

Code Result
x_1 = {{#explode:{{#explode:{{{points|1, 2; 3, 4}}}|;|0}}|,|0}} x_1 = 1
y_1 = {{#explode:{{#explode:{{{points|1, 2; 3, 4}}}|;|0}}|,|1}} y_1 = 2
x_2 = {{#explode:{{#explode:{{{points|1, 2; 3, 4}}}|;|1}}|,|0}} x_2 = 3
y_2 = {{#explode:{{#explode:{{{points|1, 2; 3, 4}}}|;|1}}|,|1}} y_2 = 4

Tests (length from x_1, y_1; x_2, y_2)

:length = {{#expr: (

( ({{#explode:{{#explode:{{{points|1, 2; 9, 4}}}|;|1}}|,|0}}<!-- x_2 -->) - ({{#explode:{{#explode:{{{points|1, 2; 9, 4}}}|;|0}}|,|0}}<!-- x_1 -->) )^2
+
( ({{#explode:{{#explode:{{{points|1, 2; 9, 4}}}|;|1}}|,|1}}<!-- y_2 -->) - ({{#explode:{{#explode:{{{points|1, 2; 9, 4}}}|;|0}}|,|1}}<!-- y_1 -->) )^2

)^(1/2)
          }}

gives

length = 8.2462112512353

Tests (angle from x_1, y_1; x_2, y_2)

:angle = <!--
 
-->{{atan2

| y = {{#expr:

( ({{#explode:{{#explode:{{{points|1, 2; 9, 4}}}|;|1}}|,|1}}<!-- y_2 -->) - ({{#explode:{{#explode:{{{points|1, 2; 9, 4}}}|;|0}}|,|1}}<!-- y_1 -->) )

      }}

| x = {{#expr:

( ({{#explode:{{#explode:{{{points|1, 2; 9, 4}}}|;|1}}|,|0}}<!-- x_2 -->) - ({{#explode:{{#explode:{{{points|1, 2; 9, 4}}}|;|0}}|,|0}}<!-- x_1 -->) )

      }}

| cut = 2 <!-- 0 to 2pi -->
}} 

gives

angle = 0.24497866312686

See also

Drawing templates






Affine transforms templates

See Help:CSS Transforms.




Notes