主页 / 问题 / 777167
Accepted
Fresto
Asked:2020-01-29 19:34:09 +0000 UTC2020-01-29 19:34:09 +0000 UTC

在图表上实现蜡烛缩放的最佳方法是什么

  • 772

我在面板上画了我的图表Canvas。我是如何画的 - 有一个所有蜡烛的数组，我只在面板上显示蜡烛的可见范围，即 如果您将图表移到一边，对于每个新蜡烛，我将计算一个新的可见蜡烛范围，将其清除Canvas.Children并通过添加来在图表上显示此列表Canvas.Children。使用此选项，我可以轻松调整比例，通过新的计算，我找到蜡烛的最大值和最小值，并输入相对于此的高度。但是这种方法计算时间太长了。因此，一次将所有蜡烛存储在图表上更合乎逻辑。但问题就在可见范围内。那些。需要在数组中Canvas.Childern找到所需的蜡烛并更改它们的 Y 和 X 值、矩形的长度以及从它们向上和向下的线。但它会简洁吗？在网站上，这一切都会立即发生，无论人们怎么说。谁能建议最好的方法来实现这一点？2 张图片，来自任何网站和我的程序。在此处输入图像描述

在此处输入图像描述

c#

1 个回答

  1. Best Answer

    看看如何通过转换来做到这一点。我将输出一个矩形集合，用于输出我将使用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一个转换 - 一个 shift 转换并为其命名，以便可以从代码中访问它：

                        <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 将完成剩下的工作！您无需手动重新计算图形的实际大小！

    • 4

相关问题