Template:Circle/doc

This documentation subpage contains instructions, categories, or other information for Template:Circle. [<Edit> Template:Circle]

[⧼Purge⧽ Template:Circle/doc]

The {{circle}} graphic template is used to draw a circle.

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! }} }}

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}}

• {{Draw text}}
• {{Image}}

• {{Point}}
• {{Line}}

• {{Square}}
• {{Round square}} ({{rounded corners square}})
• {{Rect}} ({{rectangle}})
• {{Round rect}} ({{rounded corners rectangle}})

• {{Polyline}}
• {{Polygon}} ({{closed polyline}})
• {{Regular polygon}}

• {{Circle}}
• {{Ellipse}}

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