четверг, 27 декабря 2012 г.

Рисование в Windows 8 приложениях

Как то ничего сложнее прямоугольников и эллипсов на WPF не рисовал, а тут на форуме MSDN задали вопрос как нарисовать дугу, да еще и менять ее в процессе работы программы. Ответ по ссылке, и так как я искать на форумах MSDN не умею, то чтобы он не потерялся, подкатом.
Функционал должен быть вот такой:
Т.е. пользователь таскает бегунок, а в заисимости от положения бегунка, у нас растет дуга. Если честно, то сначала думал рисовать эллипс и у него часть закрывать прямоугольниками с цветом фона... Но потом нашел замечательный класс ArcSegment. Вот с его помощью и будем рисовать.
Для формы задал такую разметку:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Path Stroke="Red" StrokeThickness="2" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Path.Data>
            <PathGeometry>
                <PathGeometry.Figures>
                    <PathFigureCollection>
                        <PathFigure StartPoint="0,50">
                            <PathFigure.Segments>
                                <PathSegmentCollection>
                                    <ArcSegment Size="50,50" RotationAngle="45" IsLargeArc="False" Point="0,50" x:Name="arc" />
                                </PathSegmentCollection>
                            </PathFigure.Segments>
                        </PathFigure>
                    </PathFigureCollection>
                </PathGeometry.Figures>
            </PathGeometry>
        </Path.Data>
    </Path>
    <Slider Margin="0,200,0,0" VerticalAlignment="Center" Width="100" ValueChanged="Slider_ValueChanged_1"/>
</Grid>
 Ну и обработчик изменения положения бегунка (пока писал нижеприведенный код, аж занастольировал. Ведь на первой моей олимпиаде по программированию, была задача по написанию программы с солнышком и землей летающей вокруг него):

private void Slider_ValueChanged_1(object sender, RangeBaseValueChangedEventArgs e)
{
    Slider current = sender as Slider;
    double angle = current.Value / current.Maximum * Math.PI * 2;
    double x = 50 * Math.Sin(angle);
    double y = 50 * Math.Cos(angle);
    arc.Point = new Point(x, y);
    arc.IsLargeArc = current.Value > current.Maximum / 2;
}
Все. Как работает, можно посмотреть на картинке в начале статьи или повторив за мной этот пример в Visual Studio.

Комментариев нет:

Отправить комментарий