Нарисовал свой график на панели Canvas
.
Как его рисовал я - Есть массив всех свеч, и я вывожу на панель лишь видимый диапазон свеч, т.е. если сдвинуть график в сторону, я с каждой новой свечой рассчитаю новый диапазон видимых свеч, очищаю Canvas.Children
и данный список выведу на график, добавив в Canvas.Children
. При таком варианте я могу спокойно настраивать масштаб, при новом расчете я нахожу максимум и минимум свеч и заношу рассчитываю высоту относительно этого. Но данный способ слишком долгий для расчетов. И в итоге логичнее уже на графике хранить сразу все свечи. Но вот проблема заключается тогда в видимом диапазоне. Т.е. надо в массиве Canvas.Childern
найти нужные свечи и поменять их значения Y и X, значения длины прямоугольников и линий, которые идут вверх и вниз от них. Но будет ли это лаконичным? На сайтах это всё происходит мгновенно, как ни крути. Может кто подсказать пожалуйста, как лучше реализовать это? 2 картинки, с любого сайта и моей программы.
-
Хм, а что если просто вывести все свечи, а потом, при необходимости масштабирования или перемещения вдоль осей, воспользоваться трансформацией?– Андрей NOP29 янв 2018 в 11:38
-
@АндрейNOP На счет вывести все свечи, это да. На счет трансформации сейчас почитаю и отвечу, спасибо за совет– Fresto29 янв 2018 в 11:40
1 ответ
Смотрите, как можно сделать это с помощью трансформаций. Я буду выводить коллекцию прямоугольников, для вывода буду использовать 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="<" Padding="2.5,0" Margin="2.5,0"/>
<Button Content=">" 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="<" Padding="2.5,0" Margin="2.5,0" Click="ButtonLeftClick"/>
<Button Content=">" Padding="2.5,0" Margin="2.5,0" Click="ButtonRightClick"/>
Ну и, наконец, для того, чтобы график не выходил за пределы бордера, установим бордеру обрезку по границам: ClipToBounds="True"
Готово!
Т.е. ваша задача просто "скормить" свою коллекцию фигур элементам, а остальное всё сделает WPF! Пересчитывать фактические размеры фигур вручную не требуется!
-
Спасибо большое за пример, буду знать, что такое можно, но, к сожалению, к свечкам это не сильно подходит т.к. там много разных нюансов при масштабировании и сдвиге. Вот есть график, попробуйте его перемещать мышкой и колесом масштабировать, посмотрите, как именно изменяются размеры и в зависимости от чего. Там идет, скорее всего, расчет после каждого сдвига, чтобы в поле зрения находились все видимые свечки с соответствующим масштабом по ценам. smart-lab.ru/g/MOEX%3ASiH8/60 А так, поставлю галочку конечно за такой труд)– Fresto29 янв 2018 в 12:59
-
Ну пересчитывать точно ничего не нужно, главное правильно рассчитать новый масштаб/смещение. По крайней мере я не заметил, чтобы там что-то менялось в самих свечах - чтобы они сливались или распадались на несколько. А вообще, конечно, вы в праве сделать так как хотите. 29 янв 2018 в 13:03
-
Да не то, чтобы я хотел, я думаю, как сделать рационально. Просто, если ты смещаешься и появляется свеча, которая намного выше графика, то весь график должен подстроить под нее, чтобы все свечи уместились в твоём окне. И вот тут как раз таки нужно узнать максимум и минимум свеч и подогнать все значения под высоту Canvasa. Можете поправить, если я не в том направлении думаю. Но я вижу это единственным решением проблемы.– Fresto29 янв 2018 в 13:08
-
Ага, ну надо просто как-то вычленить отображаемый в данный момент диапазон и найти на нем самую верхнюю и самую нижнюю точки, затем по ним скорректировать масштаб оси Y. Логики будет побольше, конечно, но заготовка у вас есть. Пробуйте! 29 янв 2018 в 13:11
-
1@Gardes, впрочем, вот здесь есть поведение, которое возвращает истинную толщину линий 25 мая 2018 в 7:45