YellowWarningTriangle.png This wiki is closed in favour of the new wiki. Information shown is likely to be very out of date.

Difference between revisions of "User:Space/Template:DrawLine"

From Discovery Wiki
Jump to navigationJump to search
m
m
 
(56 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<includeonly><div style="position:absolute;
 
<includeonly><div style="position:absolute;
 
left:{{{1}}}px;  
 
left:{{{1}}}px;  
−
bottom:{{{2}}}px;
+
bottom:{{{1}}}px;
−
transform-origin: 100% 0%;
+
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);
+
transform:rotate({{#expr:-(({{atan2|y={{#expr:{{{4}}}-{{{2}}}}}|x={{#expr:{{{3}}}-{{{1}}}}}}})*180/pi)}}deg);
−
-webkit-transform-origin: 100% 0%;
+
-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);
+
-webkit-transform:rotate({{#expr:-(({{atan2|y={{#expr:{{{4}}}-{{{2}}}}}|x={{#expr:{{{3}}}-{{{1}}}}}}})*180/pi)}}deg);
−
-ms-transform-origin: 100% 0%;
+
-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);
+
-ms-transform:rotate({{#expr:-(({{atan2|y={{#expr:{{{4}}}-{{{2}}}}}|x={{#expr:{{{3}}}-{{{1}}}}}}})*180/pi)}}deg);
−
-moz-transform-origin: 100% 0%;
+
-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);
+
-moz-transform:rotate({{#expr:-(({{atan2|y={{#expr:{{{4}}}-{{{2}}}}}|x={{#expr:{{{3}}}-{{{1}}}}}}})*180/pi)}}deg);
−
-o-transform-origin: 100% 0%;
+
-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);
+
-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;
 
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;
 
height: {{{5}}}px;
 +
border-radius: {{#expr:{{{5}}}/2}}px;
 
background: {{{6}}};"></div></includeonly>
 
background: {{{6}}};"></div></includeonly>
  
−
<noinclude>{{Work in progress|[[User:Space|Space]]}}==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]].
 
Planned to be used for trade lanes in [[Template:System Map]].
 
==Result==
 
==Result==
−
<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|0|3|#00BFFF}}{{User:Space/Template:DrawLine|7000|-10000|800|1300|40|red}} (and a bunch of newlines)</pre>
+
<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>
 +
 
 +
 
  
  
Line 27: Line 36:
  
  
 +
{{User:Space/Template:DrawLine|50|50|200|300|8|red}}
  
  
  
−
{{User:Space/Template:DrawLine|200|200|300|100|3|purple}}{{User:Space/Template:DrawLine|100|0|0|100|3|#00BFFF}}{{User:Space/Template:DrawLine|0|100|100|0|3|#00BFFF}}{{User:Space/Template:DrawLine|0|0|100|0|3|#00BFFF}}{{User:Space/Template:DrawLine|7000|-10000|800|1300|40|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


150px-WIP2.png 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.

Talk 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)








Retrieved from "https://discoverygc.com/wiki/index.php?title=User:Space/Template:DrawLine&oldid=89624"