开发者

Ellipse with a hole

开发者 https://www.devze.com 2023-03-07 10:19 出处:网络
How can I create a ellipse (path, ...) with a hole in it: The task is to create a visualization of a three-state开发者_StackOverflow-indicator. The different states are visualized by rotating the c

How can I create a ellipse (path, ...) with a hole in it:

Ellipse with a hole

The task is to create a visualization of a three-state开发者_StackOverflow-indicator. The different states are visualized by rotating the control several degrees to the left or the right.


=>

    <Path Stroke="Red" StrokeThickness="20">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="80,0">
                    <ArcSegment x:Name="ArcSeg1" Size="100,100" RotationAngle="0" IsLargeArc="True" 
                SweepDirection="Clockwise" Point="20,0"  >
                    </ArcSegment>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>

There are a few relevant properties here, to understand the math behind it see http://www.charlespetzold.com/blog/2008/01/Mathematics-of-ArcSegment.html But basically you're giving the coordinates of the intersection of two ellipses :

Ellipse with a hole

StartPoint and Point represents the intersecting points, While Size is the size of the full ellipse. The rest is pretty self explanatory. If you want to rotate it, the easiest and best way would be to use RotateTransform.


Would making the 'hole' a white triangle on to of the full circle help? This could be rotated around the center of the circle in conjunction with the 'pointer' (the line).

Ellipse with a hole


You can use the CombinedGeometry with the GeometryCombineMode="Exclude"

The documentation has a good example.

Ellipse with a hole

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号