This site is supported by donations to The OEIS Foundation.
Template:Circle/doc
From OeisWiki
circle}} graphic template is used to draw a circle.
The {{Contents
Usage
- {{circle|center = x_0, y_0|radius = r|units = units|stroke = stroke|fill = fill|content = content}}
Where (the origin being at the bottom left of the canvas):
- center are the (comma separated) coordinates x_0, y_0 of the center of the circle. (0, 0 as default value. The center of the circle is thus at the bottom left of the containing element by default.)
- radius (or r) is the radius r of the circle. (25 as default, i.e. 25px with default units.)
- units are the units used with center and radius. (px as default.)
- stroke is used to override the default stroke style (1px solid black, i.e. ).
- fill is used to override the default fill style, i.e. none.
- content is optional content, e.g. text, to show inside the circle.
Test
The following does not compensate for the width of the stroke (remember that the stroke is drawn outside the bounding box of the circle):
Code | Result | |||
---|---|---|---|---|
{{canvas|width = 200|height = 200|float = right| {{line|points = 100, 0; 100, 200}} {{circle|center = 100, 100|radius = 5}}{{circle|center = 100, 100|radius = 100|stroke = 6px solid rgba(255, 127, 0, 0.25)}} {{line|points = 0, 100; 200, 100}} {{circle|center = 0, 0|radius = 5}}{{circle|center = 0, 200|radius = 5}} {{circle|center = 200, 0|radius = 5}}{{circle|center = 200, 200|radius = 5}} {{circle|center = 0, 100|radius = 5}}{{circle|center = 200, 100|radius = 5}} {{circle|center = 100, 0|radius = 5}}{{circle|center = 100, 200|radius = 5}} }} |
|
Subtracting the stroke width from both the x and y coordinates of the center while subtracting half the stroke width from the radius does get the circle positioned properly:
Code | Result | |||
---|---|---|---|---|
{{canvas|width = 200|height = 200|float = right| {{line|points = 100, 0; 100, 200}} {{circle|center = 100 - 1, 100 - 1|radius = 5 - 1/2}}{{circle|center = 100 - 6, 100 - 6|radius = 100 - 6/2|stroke = 6px solid rgba(255, 127, 0, 0.25)}} {{line|points = 0, 100; 200, 100}} {{circle|center = 0 - 1, 0 - 1|radius = 5 - 1/2}}{{circle|center = 0 - 1, 200 - 1|radius = 5 - 1/2}} {{circle|center = 200 - 1, 0 - 1|radius = 5 - 1/2}}{{circle|center = 200 - 1, 200 - 1|radius = 5 - 1/2}} {{circle|center = 0 - 1, 100 - 1|radius = 5 - 1/2}}{{circle|center = 200 - 1, 100 - 1|radius = 5 - 1/2}} {{circle|center = 100 - 1, 0 - 1|radius = 5 - 1/2}}{{circle|center = 100 - 1, 200 - 1|radius = 5 - 1/2}} }} |
|
Examples
Note: In Firefox 22.0, the stroke style seems to allow either none or solid.
Issue: Also, the {{rotate}} template does not currently work, now we only get that small orange blob...
Code | Result | |||
---|---|---|---|---|
{{canvas|width = 500|height = 500|float = right| {{circle|center = 50, 50|radius = 50|units = %|stroke = none|fill = white}} {{circle}} <!-- default (center: 0, 0; radius: 25; units: px) --> <!-- magenta, 50% alpha --> {{circle|25, 25|units = %|stroke = 1px dashed red|fill = rgba(255, 0, 255, 0.5)}} <!-- yellow, 25% alpha --> {{circle|0, 0|30|units = %|stroke = none|fill = rgba(255, 255, 0, 0.25)}} {{circle|75, 100|75|units = px|stroke = 10px dotted green}} {{circle |center = 25, 75|radius = 25|units = px |stroke = 5px solid purple|fill = black }} {{circle|radius = 40|units = %|stroke = 3px solid orange}} <!-- Test: rotating a circle should have no visible effect! --> {{rotate|{{circle|radius = 40|units = %|stroke = 3px solid orange}}|45}} {{circle |200, 250|radius = 100|units = px|stroke = 3px solid orange |content = I'm orange! }} }} |
|
Code
<noinclude>{{Documentation}}</noinclude><includeonly><!-- Usage: {{circle | center = ''x_0, y_0'' | radius = ''r'' | units = ''units'' | stroke = ''stroke'' | fill = ''fill'' | content = ''content'' }} where the origin is at the bottom left of the canvas. --><!-- Note: Webkit only allows the transform of block elements, not inline elements. Using display: inline-block; in the style of an inline element, like <span>...</span>, makes it a block element, although inline. --><span style="display: inline-block; position: absolute; left: {{#expr: ( {{#explode:{{{center|{{{1|0, 0}}}}}}|, |0}} ) - ( {{{radius|{{{r|{{{2|25}}}}}}}}} ) }}{{{units|px}}}; bottom: {{#expr: ( {{#explode:{{{center|{{{1|0, 0}}}}}}|, |1}} ) - ( {{{radius|{{{r|{{{2|25}}}}}}}}} ) }}{{{units|px}}}; width: {{#expr: 2 * ( {{{radius|{{{r|{{{2|25}}}}}}}}} ) }}{{{units|px}}}; height: {{#expr: 2 * ( {{{radius|{{{r|{{{2|25}}}}}}}}} ) }}{{{units|px}}}; background: {{{fill|none}}}; border: {{{stroke|1px solid black}}}; border-radius: 50%; vertical-align: middle; text-align: center;">{{#if: {{{content|}}} |{{{content}}}|}}</span></includeonly>
See also
Drawing templates
- {{Canvas}}
- {{Square}}
- {{Round square}} ({{rounded corners square}})
- {{Rect}} ({{rectangle}})
- {{Round rect}} ({{rounded corners rectangle}})
- {{Polyline}}
- {{Polygon}} ({{closed polyline}})
- {{Regular polygon}}
Affine transforms templates
See Help:CSS Transforms.
- {{Origin}}
- {{Translate}} and {{transform-translate}}
- {{Flip}}
- {{Scale}} and {{transform-scale}}
- {{Rotate}} and {{transform-rotate}}
- {{SkewX}}
- {{SkewY}}
- {{Skew}} and {{transform-skew}}
- {{Affine}} ({{affine matrix}})