windows-runtime - 在 Windows 8 中创建类似 3D 道路的效果

标签 windows-runtime directx winrt-xaml

如何使用 Direct X 和 Xaml 在 Windows 8 中创建类似 3D 道路的效果。任何人都可以帮助我或指导我在 Windows 8 中创建类似道路的效果。我附上了类似的示例图像。

或者是否可以在 xaml 和 C# 中抑制相同的内容。那样引导我。因为我对这项技术比较有把握。我不是 Direct X 的活跃开发人员。而且我也不是在寻找“为我做这件事”的方法。我只需要指南或一些示例引用来帮助我实现相同的目标。

Here is the image URl

最佳答案

所以，这会很棘手。我想向您介绍 MatrixTransform。完成您想做的事情的唯一方法。这可不是一件小事。 MatrixTransform 的一些功能已包含在名为 ProjectionPlane 的帮助程序类中，但它不会为您提供图形指示的捏合外观。考虑到开箱即用的 ProjectionPanel，我认为这样的事情是您能够完成的最好的事情。

enter image description here

记住，MatrixTransform 可以做到这一点。但这需要一些工作。我确信，创建您想要模拟的图表需要工作。很棒的东西不是免费的。

<Grid Background="Black" VerticalAlignment="Center">
    <Grid.RowDefinitions>
        <RowDefinition Height="728" />
        <RowDefinition Height="40"/>
    </Grid.RowDefinitions>
    <Grid x:Name="BackgroundGrid" RenderTransformOrigin="0.5,0.5" Margin="0,0,0,-282" Grid.RowSpan="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        <Grid.RenderTransform>
            <CompositeTransform ScaleX="0.75" ScaleY="0.75" TranslateY="-250"/>
        </Grid.RenderTransform>
        <Grid.Projection>
            <PlaneProjection RotationX="-29"/>
        </Grid.Projection><Rectangle Fill="Gainsboro" Grid.Column="0" />
        <Rectangle Fill="Gainsboro" Grid.Column="2" />
        <Rectangle Fill="Gainsboro" Grid.Column="4" />
        <Rectangle Fill="Gainsboro" Grid.Column="6" />
        <Rectangle Fill="Gainsboro" Grid.Column="8" />
        <Rectangle Fill="Gainsboro" Grid.Column="10" />
        <Rectangle Fill="Gainsboro" Grid.Column="12" />
        <Rectangle Fill="Gainsboro" Grid.Column="14" />
        <Rectangle Fill="Gainsboro" Grid.Column="16" />
        <Rectangle Fill="Gainsboro" Grid.Column="18" />
        <Rectangle Fill="Gainsboro" Grid.Column="20" />
        <Rectangle Fill="Gray" Grid.Column="1" />
        <Rectangle Fill="Gray" Grid.Column="3" />
        <Rectangle Fill="Gray" Grid.Column="5" />
        <Rectangle Fill="Gray" Grid.Column="7" />
        <Rectangle Fill="Gray" Grid.Column="9" />
        <Rectangle Fill="Gray" Grid.Column="11" />
        <Rectangle Fill="Gray" Grid.Column="13" />
        <Rectangle Fill="Gray" Grid.Column="15" />
        <Rectangle Fill="Gray" Grid.Column="17" />
        <Rectangle Fill="Gray" Grid.Column="19" />
    </Grid>
    <ScrollViewer x:Name="ForegroundGrid"  RenderTransformOrigin="0.5,0.5" Margin="0,0,0,-282">
        <ScrollViewer.RenderTransform>
            <CompositeTransform ScaleX="0.75" ScaleY="0.75" TranslateY="-230"/>
        </ScrollViewer.RenderTransform>
        <ScrollViewer.Projection>
            <PlaneProjection RotationX="-29"/>
        </ScrollViewer.Projection>
        <Grid>
        <Grid.Resources>
            <Style TargetType="Ellipse">
                <Setter Property="Height" Value="50" />
                <Setter Property="Width" Value="50" />
                <Setter Property="Fill" Value="Green" />
                <Setter Property="VerticalAlignment" Value="Top" />
            </Style>
        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        <Ellipse Margin="0,1040,0,0" Grid.Column="0" />
        <Ellipse Margin="0,1240,0,0" Grid.Column="3" />
        <Ellipse Margin="0,550,0,0" Grid.Column="4" />
        <Ellipse Margin="0,350,0,0" Grid.Column="4" />
        <Ellipse Margin="0,600,0,0" Grid.Column="7" />
        <Ellipse Margin="0,1450,0,0" Grid.Column="11" />
        <Ellipse Margin="0,650,0,0" Grid.Column="13" />
        <Ellipse Margin="0,1150,0,0" Grid.Column="13" />
        <Ellipse Margin="0,450,0,0" Grid.Column="14" />
        <Ellipse Margin="0,1250,0,0" Grid.Column="17" />
        <Ellipse Margin="0,550,0,0" Grid.Column="18" />
    </Grid>
    </ScrollViewer>
    <Grid x:Name="BottomGrid" Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        <Rectangle Fill="Orange" Grid.Column="0" />
        <Rectangle Fill="Orange" Grid.Column="2" />
        <Rectangle Fill="Orange" Grid.Column="4" />
        <Rectangle Fill="Orange" Grid.Column="6" />
        <Rectangle Fill="Orange" Grid.Column="8" />
        <Rectangle Fill="Orange" Grid.Column="10" />
        <Rectangle Fill="Orange" Grid.Column="12" />
        <Rectangle Fill="Orange" Grid.Column="14" />
        <Rectangle Fill="Orange" Grid.Column="16" />
        <Rectangle Fill="Orange" Grid.Column="18" />
        <Rectangle Fill="Orange" Grid.Column="20" />
        <Rectangle Fill="Chocolate" Grid.Column="1" />
        <Rectangle Fill="Chocolate" Grid.Column="3" />
        <Rectangle Fill="Chocolate" Grid.Column="5" />
        <Rectangle Fill="Chocolate" Grid.Column="7" />
        <Rectangle Fill="Chocolate" Grid.Column="9" />
        <Rectangle Fill="Chocolate" Grid.Column="11" />
        <Rectangle Fill="Chocolate" Grid.Column="13" />
        <Rectangle Fill="Chocolate" Grid.Column="15" />
        <Rectangle Fill="Chocolate" Grid.Column="17" />
        <Rectangle Fill="Chocolate" Grid.Column="19" />
        <Grid HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Grid.ColumnSpan="2">
            <Grid RenderTransformOrigin="0.5,0.5" Margin="0,0,-1266,-950">
                <Grid.Resources>
                    <Style TargetType="Ellipse">
                        <Setter Property="Height" Value="50" />
                        <Setter Property="Width" Value="50" />
                        <Setter Property="Fill" Value="Green" />
                        <Setter Property="VerticalAlignment" Value="Top" />
                    </Style>
                </Grid.Resources>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                </Grid.ColumnDefinitions>
                <Grid.RenderTransform>
                    <CompositeTransform ScaleX="0.75" ScaleY="0.75" TranslateY="-250"/>
                </Grid.RenderTransform>
                <Grid.Projection>
                    <PlaneProjection RotationX="-29"/>
                </Grid.Projection>
                <Ellipse Margin="0,040,0,0" Grid.Column="0" />
                <Ellipse Margin="0,240,0,0" Grid.Column="3" />
                <Ellipse Margin="0,550,0,0" Grid.Column="4" />
                <Ellipse Margin="0,350,0,0" Grid.Column="4" />
                <Ellipse Margin="0,600,0,0" Grid.Column="7" />
                <Ellipse Margin="0,450,0,0" Grid.Column="11" />
                <Ellipse Margin="0,650,0,0" Grid.Column="13" />
                <Ellipse Margin="0,250,0,0" Grid.Column="13" />
                <Ellipse Margin="0,450,0,0" Grid.Column="14" />
                <Ellipse Margin="0,250,0,0" Grid.Column="17" />
                <Ellipse Margin="0,550,0,0" Grid.Column="18" />
            </Grid>
        </Grid>
    </Grid>
</Grid>

如果您使用 DX 而不是 XAML 来完成此操作，那么您可能会很幸运。但是，如果您不了解 DX，那么您可以使用 XAML 解决方案，当您掌握它时，效果会很棒。我相信。

祝你好运!

关于windows-runtime - 在 Windows 8 中创建类似 3D 道路的效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21153989/

上一篇：date - sas9 命令将现有日期加 1 年

下一篇：apache - WAMP 2.4 上的 Mod_rewrite

相关文章：

c# - GetNavigationState 不支持传递给 Frame.Navigate 的参数类型的序列化

xaml - 为什么覆盖 ApplicationPageBackgroundThemeBrush 不起作用？

c# - 如何使用 slider 调整图像的亮度和对比度？

c++ - 在后面的 C++ 代码中设置控件样式

c# - C# 中的 WinRT 数据虚拟化实现

c# - C++/CX 能否简化我的(非 WinRT)WPF 应用程序？

visual-c++ - D3D12 CreateHeap 对齐，MSDN 使用 1024 还是 1000 来定义 KB

python - 如何使用pywinauto模拟游戏中的按键

c++ - DX11 DirectInput8Create 导致 LNK2019 错误

windows-phone-8 - 资源未显示在设计器 View Visual Studio Windows Phone 应用程序中

©2024 IT工具网  联系我们