3

Нарисовал свой график на панели Canvas. Как его рисовал я - Есть массив всех свеч, и я вывожу на панель лишь видимый диапазон свеч, т.е. если сдвинуть график в сторону, я с каждой новой свечой рассчитаю новый диапазон видимых свеч, очищаю Canvas.Children и данный список выведу на график, добавив в Canvas.Children. При таком варианте я могу спокойно настраивать масштаб, при новом расчете я нахожу максимум и минимум свеч и заношу рассчитываю высоту относительно этого. Но данный способ слишком долгий для расчетов. И в итоге логичнее уже на графике хранить сразу все свечи. Но вот проблема заключается тогда в видимом диапазоне. Т.е. надо в массиве Canvas.Childern найти нужные свечи и поменять их значения Y и X, значения длины прямоугольников и линий, которые идут вверх и вниз от них. Но будет ли это лаконичным? На сайтах это всё происходит мгновенно, как ни крути. Может кто подсказать пожалуйста, как лучше реализовать это? 2 картинки, с любого сайта и моей программы.введите сюда описание изображения

введите сюда описание изображения

2
  • Хм, а что если просто вывести все свечи, а потом, при необходимости масштабирования или перемещения вдоль осей, воспользоваться трансформацией? 29 янв 2018 в 11:38
  • @АндрейNOP На счет вывести все свечи, это да. На счет трансформации сейчас почитаю и отвечу, спасибо за совет
    – Fresto
    29 янв 2018 в 11:40

1 ответ 1

4

Смотрите, как можно сделать это с помощью трансформаций. Я буду выводить коллекцию прямоугольников, для вывода буду использовать ItemsControl, у которого в качестве ItemsPanel будет установлен Canvas. ItemsControl я оберну в Border, чтобы просто обозначить границы графика, ну и потом он еще сыграет свою небольшую роль. Также я размещу 2 кнопки для сдвига "окна" просмотра графика:

<Grid Margin="5">
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Border BorderThickness="1" BorderBrush="Red">
        <ItemsControl Name="Graph">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemContainerStyle>
                <Style>
                    <Setter Property="Canvas.Left" Value="{Binding X}"/>
                    <Setter Property="Canvas.Top" Value="{Binding Y}"/>
                </Style>
            </ItemsControl.ItemContainerStyle>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Rectangle Fill="Green" Width="{Binding Width}" Height="{Binding Height}"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Border>
    <StackPanel Grid.Row="1" Orientation="Horizontal"
                Margin="0,5,0,0" HorizontalAlignment="Center">
        <Button Content="&lt;" Padding="2.5,0" Margin="2.5,0"/>
        <Button Content="&gt;" Padding="2.5,0" Margin="2.5,0"/>
    </StackPanel>
</Grid>

Надеюсь, здесь для вас всё просто и понятно. Теперь я привяжу к ItemsControl коллекцию прямоугольников:

public MainWindow()
{
    InitializeComponent();
    Graph.ItemsSource = new List<Rect>
    {
        new Rect { X = 10, Y = 10, Height = 10, Width = 10},
        new Rect { X = 20, Y = 25, Height = 10, Width = 10},
        new Rect { X = 30, Y = 15, Height = 5, Width = 5},
        new Rect { X = 100, Y = 40, Height = 15, Width = 5},
        new Rect { X = 110, Y = 15, Height = 10, Width = 25},
        new Rect { X = 80, Y = 30, Height = 5, Width = 30},
        new Rect { X = 65, Y = 40, Height = 10, Width = 10},
        new Rect { X = 160, Y = 10, Height = 10, Width = 15},
        new Rect { X = 120, Y = 35, Height = 25, Width = 5},
        new Rect { X = 140, Y = 45, Height = 5, Width = 5}
    };
}

Хорошо, если запустить проект, то вы уже увидите эти прямоугольники.

Теперь я с помощью трансформации масштаба увеличу нашу область просмотра, чтобы прямоугольники уже не помещались на экране, добавьте в разметку ItemsControl:

            <ItemsControl.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="5" ScaleY="5"/>
                </TransformGroup>
            </ItemsControl.RenderTransform>

Теперь добавим в TransformGroup еще одну трансформацию - трансформацию сдвига и дадим ей имя, чтобы можно было обращаться из кода:

                    <TranslateTransform x:Name="GraphTransform"/>

Добавим обработчики кликов по кнопкам:

private void ButtonLeftClick(object sender, RoutedEventArgs e)
{
    GraphTransform.X += 10;
}

private void ButtonRightClick(object sender, RoutedEventArgs e)
{
    GraphTransform.X -= 10;
}

В разметке:

        <Button Content="&lt;" Padding="2.5,0" Margin="2.5,0" Click="ButtonLeftClick"/>
        <Button Content="&gt;" Padding="2.5,0" Margin="2.5,0" Click="ButtonRightClick"/>

Ну и, наконец, для того, чтобы график не выходил за пределы бордера, установим бордеру обрезку по границам: ClipToBounds="True"

Готово!

введите сюда описание изображения

Т.е. ваша задача просто "скормить" свою коллекцию фигур элементам, а остальное всё сделает WPF! Пересчитывать фактические размеры фигур вручную не требуется!

11
  • Спасибо большое за пример, буду знать, что такое можно, но, к сожалению, к свечкам это не сильно подходит т.к. там много разных нюансов при масштабировании и сдвиге. Вот есть график, попробуйте его перемещать мышкой и колесом масштабировать, посмотрите, как именно изменяются размеры и в зависимости от чего. Там идет, скорее всего, расчет после каждого сдвига, чтобы в поле зрения находились все видимые свечки с соответствующим масштабом по ценам. smart-lab.ru/g/MOEX%3ASiH8/60 А так, поставлю галочку конечно за такой труд)
    – Fresto
    29 янв 2018 в 12:59
  • Ну пересчитывать точно ничего не нужно, главное правильно рассчитать новый масштаб/смещение. По крайней мере я не заметил, чтобы там что-то менялось в самих свечах - чтобы они сливались или распадались на несколько. А вообще, конечно, вы в праве сделать так как хотите. 29 янв 2018 в 13:03
  • Да не то, чтобы я хотел, я думаю, как сделать рационально. Просто, если ты смещаешься и появляется свеча, которая намного выше графика, то весь график должен подстроить под нее, чтобы все свечи уместились в твоём окне. И вот тут как раз таки нужно узнать максимум и минимум свеч и подогнать все значения под высоту Canvasa. Можете поправить, если я не в том направлении думаю. Но я вижу это единственным решением проблемы.
    – Fresto
    29 янв 2018 в 13:08
  • Ага, ну надо просто как-то вычленить отображаемый в данный момент диапазон и найти на нем самую верхнюю и самую нижнюю точки, затем по ним скорректировать масштаб оси Y. Логики будет побольше, конечно, но заготовка у вас есть. Пробуйте! 29 янв 2018 в 13:11
  • 1
    @Gardes, впрочем, вот здесь есть поведение, которое возвращает истинную толщину линий 25 мая 2018 в 7:45

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.