powered by simpleCommunicator - 2.0.51     © 2025 Programmizd 02
Форумы / WPF, Silverlight [игнор отключен] [закрыт для гостей] / Нарисовать круг с возможностью вращения его
10 сообщений из 10, страница 1 из 1
Нарисовать круг с возможностью вращения его
    #38800292
Pavluha
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Никогда с графикой в WPF не работал, поэтому не могу понять, как лучше сделать.
В формсах все было просто, создаешь свой контрол, отрисовываешь его и вешаешь события на него.
Как это сделано здесь, подскажите плиз.

Задача такая: Необходимо нарисовать круг толщиной 50-60 пикселей разделенный на равные отрезки (сектора). И необходимо сделать так, чтобы этот круг можно было перемещать (вращать) относительно центра. В инете почитал, что для рисования круга используют Elipse, а для перемещения классы трансформации. Дело в том, что дальше этот круг будет обрастать дополнительными элементами, поэтому и думается о контроле.
...
Рейтинг: 0 / 0
Нарисовать круг с возможностью вращения его
    #38800405
Ilya81
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Можете переопределить метод OnRender, хотя, по мне лучше использовать GeometryGroup .
...
Рейтинг: 0 / 0
Нарисовать круг с возможностью вращения его
    #38800467
Pavluha
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Ilya81,

Спасибо! Я нашел пару примеров такого плана:
Код: xml
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
      <Path Stretch="Uniform"  Width="750" Height="750" StrokeThickness="40" Stroke="Blue" Fill="Transparent">
            <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>



А как нарисовать вот такое (во вложении файл):
...
Рейтинг: 0 / 0
Нарисовать круг с возможностью вращения его
    #38800702
Ilya81
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Если линии значков векторные, то можете через Microsoft Expression Design преобразовать их в XAML. Если растровые, попробуйте использовать ImageBrush для фона. Для тени используйте свойство Effects.
...
Рейтинг: 0 / 0
Нарисовать круг с возможностью вращения его
    #38800712
petalvik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Pavluha,

оно ?
...
Рейтинг: 0 / 0
Нарисовать круг с возможностью вращения его
    #38800934
Pavluha
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
petalvik,

Спасибо огромное, очень помог пример.

Только есть один вопрос, никак не могу найти позиционирование контрола. Он всегда в центре.
Код: xml
1.
2.
3.
4.
5.
6.
7.
8.
9.
<Window x:Class="Astro.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:Astro"
        Title="MainWindow" Height="350" Width="525" WindowState="Maximized">
    <StackPanel>
        <local:RotateControl x:Name="rtc1" Angle="{Binding ElementName=rtc2, Path=Angle}" Height="350" Width="350"/>
    </StackPanel>
</Window>



В стиле тоже ничего не нашел:
Код: xml
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
   <Style TargetType="{x:Type local:RotateControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:RotateControl}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <Grid>
                            <!-- Image for the dial -->
                            <Image RenderTransformOrigin=".5 .5">
                                <Image.RenderTransform>
                                    <RotateTransform Angle="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Angle}"></RotateTransform>
                                </Image.RenderTransform>
                                <Image.Source>
                                    <DrawingImage>
                                        <DrawingImage.Drawing>
                                            <GeometryDrawing Brush="{StaticResource RedWhiteBrush}" Pen="{StaticResource BlackPen1}" >
                                                <GeometryDrawing.Geometry>
                                                    <EllipseGeometry RadiusX="50" RadiusY="50"></EllipseGeometry>
                                                </GeometryDrawing.Geometry>
                                            </GeometryDrawing>
                                        </DrawingImage.Drawing>
                                    </DrawingImage>
                                </Image.Source>
                            </Image>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>




Выставление Canvas.Top="0" Canvas.Left="0" не помогает
...
Рейтинг: 0 / 0
Нарисовать круг с возможностью вращения его
    #38801058
Ilya81
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Покуда он в StackPanel, а не в Canvas, свойства для Canvas ничего не дадут. Другой вариант - использовать TranslateTransform после RotateTransform (надеюсь, что о порядке scale - rotation - translation знаете).
...
Рейтинг: 0 / 0
Нарисовать круг с возможностью вращения его
    #38801584
Roman Mejtes
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Ilya81,

лично я бы делал так:
создаем контрол и переопределяем в нём Measure и Arrange методы, в Arrage нужно взять 12 точек на окружности, то есть с шагом Pi / 6. Угол поворота контрола будет перпендикуляр вектору с заданными точками, потом всё это сдвигаем с центр.
профит. + надо для элементов этого круга из знаков задиака сделать геометрию через Clip, чтоб он был изогнут. но можно просто сделать его прозрачным и с помощью фигуры нарисовать бордюр. Геометрию элементов тоже лучше просто подсчитать ну или железно задать радиус и т.д.
...
Рейтинг: 0 / 0
Нарисовать круг с возможностью вращения его
    #38801589
Roman Mejtes
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Roman Mejtes,

ну и про вращение. в контроле надо создать зависимое свойство OffsetAngle которое можно будет анимировать с помощью DoubleControl, в свойстве надо указать параметры FrameworkPropertyMetadataOptions.AffectsArrange | FrameworkPropertyMetadataOptions.AffectsRender и анимировать его как и любое другое свойство, через триггеры или просто в конструкторе его создать.
угол смещения сами знаете куда вставить
...
Рейтинг: 0 / 0
Нарисовать круг с возможностью вращения его
    #38801603
Roman Mejtes
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Roman Mejtes,

и переопределять лучше Panel или Canvas, отличия их не большие, так как элементов много.
...
Рейтинг: 0 / 0
10 сообщений из 10, страница 1 из 1
Форумы / WPF, Silverlight [игнор отключен] [закрыт для гостей] / Нарисовать круг с возможностью вращения его
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]