How can I draw a circle sector with the ellipse class?

问题

I would like to make a sector of a circle on WP7. I tried to do this with the ellipse class and I found a lot of solution, which make a gauge or pie chart or something, but I need just the essence. Could anyone help?

the aim is to show just one part of a circle (or ellipse). Like the yellow area in the picture:

Thanks, Laci

回答1:

Here's a fairly simple solution to the problem, though it does not use an Ellipse and it requires a little trigonometry:

<Path Fill="Black"
      Data="M0,0 L0,-100 A100,100 0 0 1 70.7,-70.7 z" />

The Data property uses Path Markup Syntax.

The "M" at the beginning tells the pen to Move to the location 0,0.
The "L" tells the pen to draw a Line from the current location (0, 0) to 0,-100.
The "A" tells the pen to draw an elliptical Arc from the current location to 70.7,-70.7 (the "100,100" portion determines the horizontal and vertical radius of the ellipse and the "0 0 1" portion is for RotationAngle, IsLargeArc, and SweepDirection (1 for clockwise, 0 for counter-clockwise)).
The "z" tells the pen to close or complete the shape (which will cause a line to be drawn from 70.7,-70.7 back to 0,0).

Where did the 70.7 come from? Well, this particular arc sweeps out an angle of 45 degrees from a circle with radius 100, so the coordinates 70.7,-70.7 are determined by 100 * sin(45) and 100 * cos(45).

回答2:

you need to do something like this:

define a canvas wrapper for ellipse

define the visible part of the canvas (clip). For this part you need to use PathGeometry as the Clip to define the slice of the circle you want to be visible. (see link)

<Canvas>
    <Canvas.Clip>
        <PathGeometry>
                // define your path here (see link above)
        </PathGeometry> 

        <Ellipse Background="Yellow" Width="200" Height="200" />
    </Canvas.Clip>
</Canvas>

Alternatively you can use CombinedGeometry to combine a PathGeometry and EllipseGeometry to form the slice. (the link provides a good example of CombinedGeometry)

来源：https://stackoverflow.com/questions/6744350/how-can-i-draw-a-circle-sector-with-the-ellipse-class

标签

wpf

windows-phone-7

canvas

ellipse

sector