Kinect for Windows SDK开发入门(九)骨骼追踪进阶 下

1. 基于景深数据的用户交互

到目前为止我们只用了骨骼数据中关节点的X,Y值。然而Kinect产生的关节点数据除了X,Y值外还有一个深度值。基于Kinect的应用程序应该利用好这个深度值。下面的部分将会介绍如何在Kinect应用程序中使用深度值。

除了使用WPF的3D特性外，在布局系统中可以根据深度值来设定可视化元素的尺寸大小来达到某种程序的立体效果。下面的例子使用Canvas.ZIndex属性来设置元素的层次，手动设置控件的大小并使用ScaleTransform来根据深度值的改变来进行缩放。用户界面包括一些圆形，每一个圆代表一定的深度。应用程序跟踪用户的手部关节点，以手形图标显示，图标会根据用户手部关节点的深度值来进行缩放，用户离Kinect越近，手形图表越大，反之越小。

创建一个新的WPF项目，主界面的XAML如下。主要的布局容器为Cnavas容器。它包含5个Ellipses及对应的TextBlock控件，TextBlock用来对圆形进行说明。这几个圆形随机分布在屏幕上，但是圆形的Canvas.ZIndex是确定的。Canvas容器也包含了两个图像控件，用来代表两只手。每一个手部图标都定义了一个ScaleTransform对象。手形图标是和右手方向一致的，将ScaleTransform的ScaleX设置为-1可以将其反转，看起来像左手。

<Window x:Class="KinectDepthBasedInteraction.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Depth UI Target" Height="1080" Width="1920" WindowState="Maximized" Background="White">
    <Window.Resources>
        <Style x:Key="TargetLabel" TargetType="TextBlock" >
            <Setter Property="FontSize" Value="40" />
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="IsHitTestVisible" Value="False" />
        </Style>
    </Window.Resources>
    <Viewbox>

        <Grid x:Name="LayoutRoot" Width="1920" Height="1280">
            <Image x:Name="DepthImage"/>
            <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top">
                <TextBlock x:Name="DebugLeftHand" Style="{StaticResource TargetLabel}" Foreground="Black" />
                <TextBlock x:Name="DebugRightHand" Style="{StaticResource TargetLabel}" Foreground="Black" />
            </StackPanel>
            <Canvas>
                <Ellipse x:Name="Target3" Fill="Orange" Height="200" Width="200" Canvas.Left="776" Canvas.Top="162" Canvas.ZIndex="1040" />
                <TextBlock Text="3" Canvas.Left="860" Canvas.Top="206" Panel.ZIndex="1040" Style="{StaticResource TargetLabel}" />

                <Ellipse x:Name="Target4" Fill="Purple" Height="150" Width="150" Canvas.Left="732" Canvas.Top="320" Canvas.ZIndex="940" />
                <TextBlock Text="4" Canvas.Left="840" Canvas.Top="372" Panel.ZIndex="940" Style="{StaticResource TargetLabel}" />

                <Ellipse x:Name="Target5" Fill="Green" Height="120" Width="120" Canvas.Left="880" Canvas.Top="592" Canvas.ZIndex="840" />
                <TextBlock Text="5" Canvas.Left="908" Canvas.Top="590" Panel.ZIndex="840" Style="{StaticResource TargetLabel}" />

                <Ellipse x:Name="Target6" Fill="Blue" Height="100" Width="100" Canvas.Left="352" Canvas.Top="544" Canvas.ZIndex="740" />
                <TextBlock Text="6" Canvas.Left="368" Canvas.Top="582" Panel.ZIndex="740" Style="{StaticResource TargetLabel}" />

                <Ellipse x:Name="Target7" Fill="Red" Height="85" Width="85" Canvas.Left="378" Canvas.Top="192" Canvas.ZIndex="640" />
                <TextBlock Text="7" Canvas.Left="422" Canvas.Top="226" Panel.ZIndex="640" Style="{StaticResource TargetLabel}" />

                <Image x:Name="LeftHandElement" Source="Images/hand.png" Width="80" Height="80" RenderTransformOrigin="0.5,0.5">
                    <Image.RenderTransform>
                        <ScaleTransform x:Name="LeftHandScaleTransform" ScaleX="1" CenterY="-1" />
                    </Image.RenderTransform>
                </Image>

                <Image x:Name="RightHandElement" Source="Images/hand.png" Width="80" Height="80" RenderTransformOrigin="0.5,0.5">
                    <Image.RenderTransform>
                        <ScaleTransform x:Name="RightHandScaleTransform" CenterY="1" ScaleX="1" />
                    </Image.RenderTransform>
                </Image>
            </Canvas>
        </Grid>
    </Viewbox>
</Window

不同颜色的圆形代表不同的深度，例如名为Target3的元素代表距离为3英尺。Target3的长宽比Target7要大，这简单的通过缩放可以实现。在我们的实例程序中，我们将其大小进行硬编码，实际的程序中，应该根据特定要求可以进行缩放。Canvas容器会根据子元素的Canvas.ZIndex的值对元素在垂直于计算机屏幕的方向上进行排列，例如最上面的元素，其Canvas.ZIndex最大。如果两个元素有相同的ZIndex值，那么会根据其在XAML中声明的顺序进行显示，在XAML中，后面声明的元素在之前声明的元素的前面。对于Canvas的所有子元素，ZIndex值越大，离屏幕越近，越小离屏幕越远。将深度值取反刚好能达到想要的效果。这意味这我们不能直接使用深度值来给ZIndex来赋值，而要对它进行一点转换。Kinect能够产生的最大深度值为13.4英尺，相应的，我们将Canvas.Zindex的取值范围设置为0-1340，将深度值乘以100能获得更好的精度。因此Target5的Canvas.ZIndex设置为840（13.5-5=8.4*100=840）。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索控件
， kinect
， 图标
， kinect2.0
， kinect2.0 win8.1
， kinect开发
， 深度
， 圆形
， #深度值
一个
kinect 骨骼点追踪、kinect骨骼跟踪、kinect2.0骨骼节点、kinect 骨骼、kinect获取骨骼坐标，以便于您获取更多的相关知识。