Pages

Wednesday 1 February 2012

Drawing a semi-circle using Ellipse and Clipping

I needed to draw a filled semi-circle and Clip seems to do the job nicely. The RectangleGeometry describes the part of the clipped image that you want to be able to see.
<Ellipse
   Width="20"
   Height="20"
   Canvas.Left="20"
   Canvas.Top="0"
   Stretch="Fill" 
   Stroke="Black" 
   Fill="Red">
   <Ellipse.Clip>
      <RectangleGeometry Rect="0,10,20,20"/>
   </Ellipse.Clip>
</Ellipse>
And here is a fuller example with all four semi-circle rotations:
<Canvas VerticalAlignment="Center">
   <Ellipse
      Width="20"
      Height="20"
      Canvas.Left="20"
      Canvas.Top="0"
      Stretch="Fill" 
      Stroke="Black" 
      Fill="Red">
      <Ellipse.Clip>
         <RectangleGeometry Rect="0,10,20,20"/>
      </Ellipse.Clip>
   </Ellipse>
   <Ellipse
      Width="20"
      Height="20"
      Canvas.Left="60"
      Canvas.Top="0"
      Stretch="Fill" 
      Stroke="Black" 
      Fill="Red">
      <Ellipse.Clip>
         <RectangleGeometry Rect="0,0,10,20"/>
      </Ellipse.Clip>
   </Ellipse>
   <Ellipse
      Width="20"
      Height="20"
      Canvas.Left="100"
      Canvas.Top="0"
      Stretch="Fill" 
      Stroke="Black" 
      Fill="Red">
      <Ellipse.Clip>
         <RectangleGeometry Rect="10,0,10,20"/>
      </Ellipse.Clip>
   </Ellipse>
   <Ellipse
      Width="20"
      Height="20"
      Canvas.Left="140"
      Canvas.Top="0"
      Stretch="Fill" 
      Stroke="Black" 
      Fill="Red">
      <Ellipse.Clip>
         <RectangleGeometry Rect="0,10,20,20"/>
      </Ellipse.Clip>
   </Ellipse>
</Canvas>
Which gives this result:

No comments: