在Windows 8中创建3D道路效果

时间：2014-01-16 05:27:11

标签： windows-runtime directx winrt-xaml

如何使用Direct X＆amp; amp;在Windows 8中创建类似3D道路的效果XAML。任何人都可以帮助我或引导我在Windows 8中创建一个像效果一样的道路。我附上了类似的样本图像。

或者如果可以在xaml＆amp;中压制相同的内容。 C＃。以这种方式引导我。因为我对这项技术更加确定。我不是Direct X的活跃开发者。我也不是在寻找“为我做那个”的方法。我只需要指南或一些示例参考来帮助我实现相同的功能。

Here is the image URl

1 个答案:

答案 0 :(得分：4)

所以，这将是棘手的。我想指出你的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解决方案，当你得到它时会很棒。我确定。

祝你好运！

相关问题
最新问题