Difference between revisions of "User:Space/Template:DrawLine"
From Discovery Wiki
Jump to navigationJump to searchm |
m |
||
| (72 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
| − | <includeonly> <div style="position: | + | <includeonly><div style="position:absolute; |
| + | left:{{{1}}}px; | ||
| + | bottom:{{{1}}}px; | ||
| + | transform-origin: {{#expr:50*{{{5}}}/{{#expr: (({{{3}}}-{{{1}}})^2+({{{4}}}-{{{2}}})^2)^0.5}}}}% 50%; | ||
| + | transform:rotate({{#expr:-(({{atan2|y={{#expr:{{{4}}}-{{{2}}}}}|x={{#expr:{{{3}}}-{{{1}}}}}}})*180/pi)}}deg); | ||
| + | -webkit-transform-origin: {{#expr:50*{{{5}}}/{{#expr: (({{{3}}}-{{{1}}})^2+({{{4}}}-{{{2}}})^2)^0.5}}}}% 50%; | ||
| + | -webkit-transform:rotate({{#expr:-(({{atan2|y={{#expr:{{{4}}}-{{{2}}}}}|x={{#expr:{{{3}}}-{{{1}}}}}}})*180/pi)}}deg); | ||
| + | -ms-transform-origin: {{#expr:50*{{{5}}}/{{#expr: (({{{3}}}-{{{1}}})^2+({{{4}}}-{{{2}}})^2)^0.5}}}}% 50%; | ||
| + | -ms-transform:rotate({{#expr:-(({{atan2|y={{#expr:{{{4}}}-{{{2}}}}}|x={{#expr:{{{3}}}-{{{1}}}}}}})*180/pi)}}deg); | ||
| + | -moz-transform-origin: {{#expr:50*{{{5}}}/{{#expr: (({{{3}}}-{{{1}}})^2+({{{4}}}-{{{2}}})^2)^0.5}}}}% 50%; | ||
| + | -moz-transform:rotate({{#expr:-(({{atan2|y={{#expr:{{{4}}}-{{{2}}}}}|x={{#expr:{{{3}}}-{{{1}}}}}}})*180/pi)}}deg); | ||
| + | -o-transform-origin: {{#expr:50*{{{5}}}/{{#expr: (({{{3}}}-{{{1}}})^2+({{{4}}}-{{{2}}})^2)^0.5}}}}% 50%; | ||
| + | -o-transform:rotate({{#expr:-(({{atan2|y={{#expr:{{{4}}}-{{{2}}}}}|x={{#expr:{{{3}}}-{{{1}}}}}}})*180/pi)}}deg); | ||
| + | width: {{#expr: (({{{3}}}-{{{1}}})^2+({{{4}}}-{{{2}}})^2)^0.5}}px; | ||
| + | padding-right: {{#expr:50*{{{5}}}/{{#expr: (({{{3}}}-{{{1}}})^2+({{{4}}}-{{{2}}})^2)^0.5}}}}%; | ||
| + | height: {{{5}}}px; | ||
| + | border-radius: {{#expr:{{{5}}}/2}}px; | ||
| + | background: {{{6}}};"></div></includeonly> | ||
| − | <noinclude>==Usage== | + | <noinclude>{{Work in progress|[[User:Space|Space]]}}==To-do== |
| + | *Make a formula for generating a percentage for the transform-origin x value which always places the pivot point of the line at (width/2) in from the short side, i.e. (width/2) pixels in on the symmetry line of the div | ||
| + | |||
| + | <nowiki>{{User:Space/Template:DrawLine|0|0|-100|-100|3|black}}{{User:Space/Template:DrawLine|100|0|0|100|3|pink}}</nowiki> | ||
| + | |||
| + | ==Usage== | ||
<nowiki>{{User:Space/Template:DrawLine|x1|y1|x2|y2|width in px|valid css color code or name}}</nowiki> | <nowiki>{{User:Space/Template:DrawLine|x1|y1|x2|y2|width in px|valid css color code or name}}</nowiki> | ||
| + | |||
| + | Planned to be used for trade lanes in [[Template:System Map]]. | ||
==Result== | ==Result== | ||
| − | <pre>{{User:Space/Template:DrawLine|0|0|0| | + | <pre>{{User:Space/Template:DrawLine|200|200|300|100|3|purple}}{{User:Space/Template:DrawLine|100|0|0|100|3|pink}}{{User:Space/Template:DrawLine|0|100|100|0|3|yellow}}{{User:Space/Template:DrawLine|0|0|100|100|3|#00BFFF}}{{User:Space/Template:DrawLine|0|0|100|-100|3|orange}}{{User:Space/Template:DrawLine|100|-200|400|-1000|3|orange}}{{User:Space/Template:DrawLine|0|0|-100|100|3|green}}{{User:Space/Template:DrawLine|0|0|-100|-100|3|black}}{{User:Space/Template:DrawLine|7000|-10000|800|1300|40|red}} (and a bunch of newlines)</pre> |
| − | {{User:Space/Template:DrawLine|0|0| | + | |
| − | {{User:Space/Template:DrawLine|0|0|100|100|3| | + | |
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | {{User:Space/Template:DrawLine|50|50|200|300|8|red}} | ||
| + | |||
| + | |||
| + | |||
| + | {{User:Space/Template:DrawLine|200|200|300|100|3|purple}}{{User:Space/Template:DrawLine|0|100|100|0|3|yellow}}{{User:Space/Template:DrawLine|0|0|-100|100|3|green}}{{User:Space/Template:DrawLine|0|0|100|100|3|#00BFFF}}{{User:Space/Template:DrawLine|0|0|100|-100|3|orange}}{{User:Space/Template:DrawLine|0|0|-100|-100|3|black}}{{User:Space/Template:DrawLine|100|-100|400|1000|3|orange}}{{User:Space/Template:DrawLine|0|0|100|0|8|white}}{{User:Space/Template:DrawLine|100|0|100|100|8|white}}{{User:Space/Template:DrawLine|100|100|200|100|8|white}}{{User:Space/Template:DrawLine|200|100|200|0|8|white}}{{User:Space/Template:DrawLine|0|0|0|100|8|white}}{{User:Space/Template:DrawLine|0|0|-100|0|8|white}}{{User:Space/Template:DrawLine|0|0|100|100|8|white}} | ||
| + | {{User:Space/Template:DrawLine|0|0|-100|100|8|white}}{{User:Space/Template:DrawLine|0|0|100|-100|8|white}}{{User:Space/Template:DrawLine|0|0|0|-100|8|white}}{{User:Space/Template:DrawLine|0|0|-100|-100|8|white}} | ||
[[Category:Templates]]</noinclude> | [[Category:Templates]]</noinclude> | ||
Latest revision as of 07:49, 13 April 2013
|
This page is currently being developed by one or more editors being led by Space. Please refer to the talk page to learn about and/or contribute to the completion of this page. You can also contact the leader on their discussion page. |
To-do
- Make a formula for generating a percentage for the transform-origin x value which always places the pivot point of the line at (width/2) in from the short side, i.e. (width/2) pixels in on the symmetry line of the div
{{User:Space/Template:DrawLine|0|0|-100|-100|3|black}}{{User:Space/Template:DrawLine|100|0|0|100|3|pink}}
Usage
{{User:Space/Template:DrawLine|x1|y1|x2|y2|width in px|valid css color code or name}}
Planned to be used for trade lanes in Template:System Map.
Result
{{User:Space/Template:DrawLine|200|200|300|100|3|purple}}{{User:Space/Template:DrawLine|100|0|0|100|3|pink}}{{User:Space/Template:DrawLine|0|100|100|0|3|yellow}}{{User:Space/Template:DrawLine|0|0|100|100|3|#00BFFF}}{{User:Space/Template:DrawLine|0|0|100|-100|3|orange}}{{User:Space/Template:DrawLine|100|-200|400|-1000|3|orange}}{{User:Space/Template:DrawLine|0|0|-100|100|3|green}}{{User:Space/Template:DrawLine|0|0|-100|-100|3|black}}{{User:Space/Template:DrawLine|7000|-10000|800|1300|40|red}} (and a bunch of newlines)
