Как нарисовать круг, разделенный на трети в XAML?

Question

В моем приложении WPF я хотел бы нарисовать круг, разделенный на три равные дуги, например, символ мира или круговая диаграмма.

Другими словами, я хотел бы нарисовать это:http://i.stack.imgur.com/7Mxwn.jpg

Я знаю, как создать System.Windows.Shape с.Путь для него в коде, но не как это сделать в XAML.

Какая правильная разметка XAML для создания элемента Path для такой фигуры?

Обновление : ответы дали мне понять, что я не совсем понимаю, в чем я ищу: я хотел бы иметь объект Geometry (один путь или группу GeometryGroup)для каждого из трех закрытых секторов (кусочки пирога.)

Answer 1

Есть несколько способов сделать это, самый простой из которых, вероятно, таков:

<Image Width="200" Height="200">
    <Image.Source>
        <DrawingImage>
            <DrawingImage.Drawing>
                <GeometryDrawing>
                    <GeometryDrawing.Pen>
                        <Pen Brush="Red"/>
                    </GeometryDrawing.Pen>
                    <GeometryDrawing.Geometry>
                        <GeometryGroup>
                        <PathGeometry>
                            <PathFigure StartPoint="100,100">
                                <PathFigure.Segments>
                                    <LineSegment Point="100,0"/>
                                </PathFigure.Segments>
                            </PathFigure>
                        </PathGeometry>
                        <PathGeometry>
                            <PathFigure StartPoint="100,100">
                                <PathFigure.Segments>
                                    <LineSegment Point="186.6,150"/>
                                </PathFigure.Segments>
                            </PathFigure>
                        </PathGeometry>
                        <PathGeometry>
                            <PathFigure StartPoint="100,100">
                                <PathFigure.Segments>
                                    <LineSegment Point="13.4,150"/>
                                </PathFigure.Segments>
                            </PathFigure>
                        </PathGeometry>
                        <EllipseGeometry Center="100,100" RadiusX="100" RadiusY="100"/>

                        </GeometryGroup>
                    </GeometryDrawing.Geometry>
                </GeometryDrawing>
            </DrawingImage.Drawing>
        </DrawingImage>
    </Image.Source>
</Image>

Приведенная выше геометрия может быть сжата до следующего с помощью геометриимини-язык:

<GeometryGroup>
    <PathGeometry Figures="M100,100 L100,0"/>
    <PathGeometry Figures="M100,100 L186.6,150"/>
    <PathGeometry Figures="M100,100 L13.4,150"/>
    <EllipseGeometry Center="100,100" RadiusX="100" RadiusY="100"/>
</GeometryGroup>

Это просто создает круг и три линии от центра к краям, вам нужно будет вычислить точки с помощью преобразования полярности в декартову .

Другим методом было бы использование ArcSegments, что является серьезной болью.

Редактировать: Версия ArcSegment с ужасом:

<Image Width="200" Height="200" Margin="20">
    <Image.Source>
        <DrawingImage>
            <DrawingImage.Drawing>
                <DrawingGroup>

                    <GeometryDrawing Brush="Red">
                        <GeometryDrawing.Pen>
                            <Pen Brush="Black" />
                        </GeometryDrawing.Pen>
                        <GeometryDrawing.Geometry>
                            <PathGeometry>
                                <PathFigure StartPoint="100,100">
                                    <PathFigure.Segments>
                                        <LineSegment Point="100,0"/>
                                        <ArcSegment Point="186.6,150"  SweepDirection="Clockwise" Size="100,100"/>
                                        <LineSegment Point="100,100"/>
                                    </PathFigure.Segments>
                                </PathFigure>
                            </PathGeometry>
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>

                    <GeometryDrawing Brush="Blue">
                        <GeometryDrawing.Pen>
                            <Pen Brush="Black"/>
                        </GeometryDrawing.Pen>
                        <GeometryDrawing.Geometry>
                            <PathGeometry>
                                <PathFigure StartPoint="100,100">
                                    <PathFigure.Segments>
                                        <LineSegment Point="186.6,150"/>
                                        <ArcSegment Point="13.4,150" SweepDirection="Clockwise" Size="100,100"/>
                                        <LineSegment Point="100,100"/>
                                    </PathFigure.Segments>
                                </PathFigure>
                            </PathGeometry>
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>

                    <GeometryDrawing Brush="Green">
                        <GeometryDrawing.Pen>
                            <Pen Brush="Black"/>
                        </GeometryDrawing.Pen>
                        <GeometryDrawing.Geometry>
                            <PathGeometry>
                                <PathFigure StartPoint="100,100">
                                    <PathFigure.Segments>
                                        <LineSegment Point="13.4,150"/>
                                        <ArcSegment Point="100,0" SweepDirection="Clockwise" Size="100,100"/>
                                        <LineSegment Point="100,100"/>
                                    </PathFigure.Segments>
                                </PathFigure>
                            </PathGeometry>
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>

                </DrawingGroup>
            </DrawingImage.Drawing>
        </DrawingImage>
    </Image.Source>
</Image>

Сжатая геометрия:

<GeometryDrawing Brush="Red" Geometry="M100,100 L100,0 A100,100,0,0,1,186.6,150 L100,100"/>
<GeometryDrawing Brush="Blue" Geometry="M100,100 L186.6,150 A100,100,0,0,1,13.4,150 L100,100"/>
<GeometryDrawing Brush="Green" Geometry="M100,100 L13.4,150 A100,100,0,0,1,100,0 L100,100"/>

Ключевым моментом здесь является то, что ArcSegment.Size определяет радиусы результирующего эллипса, который, следовательно, должен быть "100 100", поскольку эторадиус фактического круга.

Answer 2

Есть много разных способов сделать это, с разными уровнями многословия. Вот что-то посередине:

    <Path Width="200" Height="200" Stroke="Black" StrokeThickness="3" Stretch="Uniform">
        <Path.Data>
            <GeometryGroup>
                <EllipseGeometry Center="1,1" RadiusX="1" RadiusY="1"/>
                <LineGeometry StartPoint="1,1" EndPoint="1,0"/>
                <LineGeometry StartPoint="1,1" EndPoint="1.866,1.5"/>
                <LineGeometry StartPoint="1,1" EndPoint="0.134,1.5"/>
            </GeometryGroup>
        </Path.Data>
    </Path>