WPF Math for semi circle using ArcSegment between two arbitrary points

Question

Can someone show the math for drawing a semi circle between two arbitrary points using an ArcSegment in WPF.

I am quite confused with the RadiusX, RadiusY in the ArcSegment. It does not seem to be relative to the two points but rather to the X and Y axis. Is that how it really should be?

Answer 1

You are right, Size of ArcSegment is not radius between points that define the start and end of the arc. This property describes how big the ellipse that will be drawn between those points, should be. If you want to have a circle instead of an ellipse, you must remember to always set size's x and y values to be the same. If you want to always have half of the circle drawn, you also need to make sure Size will be half of the distance between those two points.

For example look at the code below:

<Canvas>
    <Path Stroke="Black">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="100,100">
                    <ArcSegment IsLargeArc="True"
                                Size="50, 50"
                                Point="200, 100"
                                SweepDirection="Clockwise" />
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
</Canvas>

This will draw upper half of the circle, that starts at point 100, 100 and ends at point 200, 100. Since I've set Size property to50, 50 (distance between those points is 100), this will create exactly half of circle. SweepDirectionstates, that circle should be drawn clockwise, and that's the reason why it will draw upper half. Check out the difference between Clockwise and Counterclockwise on screens below:

IsLargeArc chooses whether to draw bigger part of ellipse or smaller. Since I'm drawing half of circle, this has no meaning, but if you would draw ellipse with different size, this would significantly change output look, just play with it to see how it works.

This is how it looks when you try to put 200, 200 sized arc, clockwise using its large arc part. As you can see - arc does not even fit the window (this is shot from WPF designer, in normal app overflowing part would be cut off)

And this is the same thing but set to display small arc:

When I changed Size property to 200, 200, drawn circle is simply 4 times bigger, but still starts and ends at exact points you defined. Size has nothing to do with points, between which you're drawing your ellipse/cricle, but it changes the ellipse look.

I hope that it shows you what's the meaning of Size in ArcSegment, feel free to ask more detailed questions, if you're still confused.