|
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 searchm (There we go - now I just need to implement the fix on the to-do list to get the pivot points to line up for vectors with the same starting coordinates.) |
m |
||
| Line 2: | Line 2: | ||
left:{{{1}}}px; | left:{{{1}}}px; | ||
bottom:{{{2}}}px; | bottom:{{{2}}}px; | ||
| − | transform-origin: | + | transform-origin: 0% center; |
transform:rotate({{#expr:(({{atan2|y={{#expr:{{{4}}}-{{{2}}}}}|x={{#expr:{{{3}}}-{{{1}}}}}}})*180/pi)-90}}deg); | transform:rotate({{#expr:(({{atan2|y={{#expr:{{{4}}}-{{{2}}}}}|x={{#expr:{{{3}}}-{{{1}}}}}}})*180/pi)-90}}deg); | ||
| − | -webkit-transform-origin: | + | -webkit-transform-origin: 0% center; |
-webkit-transform:rotate({{#expr:(({{atan2|y={{#expr:{{{4}}}-{{{2}}}}}|x={{#expr:{{{3}}}-{{{1}}}}}}})*180/pi)-90}}deg); | -webkit-transform:rotate({{#expr:(({{atan2|y={{#expr:{{{4}}}-{{{2}}}}}|x={{#expr:{{{3}}}-{{{1}}}}}}})*180/pi)-90}}deg); | ||
| − | -ms-transform-origin: | + | -ms-transform-origin: 0% center; |
-ms-transform:rotate({{#expr:(({{atan2|y={{#expr:{{{4}}}-{{{2}}}}}|x={{#expr:{{{3}}}-{{{1}}}}}}})*180/pi)-90}}deg); | -ms-transform:rotate({{#expr:(({{atan2|y={{#expr:{{{4}}}-{{{2}}}}}|x={{#expr:{{{3}}}-{{{1}}}}}}})*180/pi)-90}}deg); | ||
| − | -moz-transform-origin: | + | -moz-transform-origin: 0% center; |
-moz-transform:rotate({{#expr:(({{atan2|y={{#expr:{{{4}}}-{{{2}}}}}|x={{#expr:{{{3}}}-{{{1}}}}}}})*180/pi)-90}}deg); | -moz-transform:rotate({{#expr:(({{atan2|y={{#expr:{{{4}}}-{{{2}}}}}|x={{#expr:{{{3}}}-{{{1}}}}}}})*180/pi)-90}}deg); | ||
| − | -o-transform-origin: | + | -o-transform-origin: 0% center; |
-o-transform:rotate({{#expr:(({{atan2|y={{#expr:{{{4}}}-{{{2}}}}}|x={{#expr:{{{3}}}-{{{1}}}}}}})*180/pi)-90}}deg); | -o-transform:rotate({{#expr:(({{atan2|y={{#expr:{{{4}}}-{{{2}}}}}|x={{#expr:{{{3}}}-{{{1}}}}}}})*180/pi)-90}}deg); | ||
width: {{#expr: (({{{3}}}-{{{1}}})^2+({{{4}}}-{{{2}}})^2)^0.5}}px; | width: {{#expr: (({{{3}}}-{{{1}}})^2+({{{4}}}-{{{2}}})^2)^0.5}}px; | ||
Revision as of 21:02, 8 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
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)
