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
See Help:CSS Transforms.
Notes