Kinect Bing Map AJAX 控件 6.3 与 WPF

• 下载源代码 - 234.8 KB

介绍 

本文介绍如何使用 Microsoft Kinect SDK 和 WPF Web 浏览器控件制作一个桌面应用程序，该程序使用 Microsoft Virtual Earth AJAX 控件 6.3 显示 Bing Map 3D。

Kinect 是微软为 Xbox 360 视频游戏机和 Windows 开发的动作感应输入设备。它基于 Xbox 360 主机的外设，让用户无需触摸游戏控制器，而是通过自然用户界面，利用手势和语音命令来控制和交互 Xbox 360。该项目旨在将 Xbox 360 的受众群体扩展到其典型游戏玩家之外。Windows 版本于 2012 年 2 月 1 日发布。 

此项目使用 Kinect 检测一些姿势，并根据这些姿势来放大/缩小 3D 地图。

在成功将 Kinect 与 Bing Map 3D 或 Bing Map 鸟瞰图集成后，我决定撰写这篇文章。我曾在网上搜索过类似的解决方案，其中一种方案似乎是使用 Bing Map Silverlight 控件。然后，将 Kinect 与 Silverlight 集成也需要一些技巧，例如使用 TCP COM 进行 Silverlight 和 WPF 之间的通信，或者使用 Pinvoke 等方法导入 Microsoft.Research.Kinect.dll 文件。但我没有采用这些方法。 

最初，我也尝试了 Bing Map WPF 控件 v1，它成功地与 Kinect 集成了。但由于它于 2012 年 1 月发布，尚不支持街景或鸟瞰图。我在 Microsoft MSDN 网站上就此进行了咨询： 

Microsft MSDN

背景  

Kinect SDK 可以轻松地与 WPF 集成。因此，基本应用程序在集成了 Microsoft Kinect SDK 的 WPF 上运行。此处添加了一个 WPF Web 浏览器控件，在需要时会调用网页上的 JavaScript。该网页使用 Bing Map（以前称为 Virtual Earth）6.3 的 AJAX 控件来显示地图，并在 WPF 事件触发时执行特定任务。

使用代码

先决条件

1. Kinect for Windows SDK Beta 2。可在此处下载： 下载 Kinect for Windows SDK Beta 2
2. 要运行示例代码，您需要安装 **Bing Map 3D**。可在此处下载： 下载 Bing Map 3D

尽管微软已宣布将停止提供 3D 地图服务，但 AJAX 控件仍可用于其他多种功能，例如 2D 街景和鸟瞰图。其文档在此处非常完善： http://msdn.microsoft.com/en-us/library/bb429619.aspx。

3. 在示例中使用了 coding4fun v1.1.0.0，可在此处下载： Coding For Fun 库

解决方案架构

源代码在解决方案中有两个项目。一个项目是 WPF 应用程序，另一个是 ASP .NET Web 应用程序。解决方案中需要重点关注的主要文件是： 

1) MainWindow.xaml

2) MainWindow.xaml.cs

3) Default.aspx

源代码说明

Xaml：  

<WebBrowser x:Name="myWebBrowser" Width="1197" Height="900" 
   Canvas.Top="-183" Canvas.Left="-7" Margin="0,166,0,0"></WebBrowser>

这会将 Web 浏览器控件添加到窗口。

MainWindow.xaml.cs

首先，我们使用以下代码将 WPF 浏览器导航到一个页面：

Uri uri = new Uri("https://:59453/Default.aspx", UriKind.RelativeOrAbsolute);
this.myWebBrowser.Navigate(uri);

第一行设置 URI，它告诉 WPF 浏览器要导航到哪里。

请勿忘记更改LOCALHOST 端口。59453 是我 PC 上的端口，您的会不同。

要确定端口，您可以独立运行 aspx 文件，方法是右键单击 WebApplication1 项目中的 default.aspx 文件，然后选择“在浏览器中查看”。然后查看 URL 中的端口，或复制粘贴整个 URL。

第二行实际上将浏览器指向该页面。

现在，让我们来看看 Kinect 姿势检测代码。这实际上是 WPF 和 Ajax Map Control 之间的桥梁。

private void detectPosture()
{
    var scaledJointRight = skeleton.Joints[JointID.HandRight].ScaleTo(640, 480, .5f, .5f);
    var scaledJointLeft = skeleton.Joints[JointID.HandLeft].ScaleTo(640, 480, .5f, .5f);
    var scaledJointShoulder = skeleton.Joints[JointID.ShoulderRight].ScaleTo(640, 480, .5f, .5f);

    if (scaledJointRight.Position.Y < scaledJointShoulder.Position.Y && 
        scaledJointLeft.Position.Y > scaledJointShoulder.Position.Y && rightEnabled == true)
    {
        myWebBrowser.InvokeScript("zoomIn");
        rightEnabled = false;
    }
    else if (scaledJointLeft.Position.Y < scaledJointShoulder.Position.Y && 
         scaledJointRight.Position.Y > scaledJointShoulder.Position.Y && leftEnabled == true)
    {
        myWebBrowser.InvokeScript("zoomOut");
        leftEnabled = false;
    }
    else if (scaledJointLeft.Position.Y > scaledJointShoulder.Position.Y && 
         scaledJointRight.Position.Y > scaledJointShoulder.Position.Y)
    {
        rightEnabled = true;
        leftEnabled = true;
    }
}

正如函数名称所示，它会检测姿势。当右手高于肩膀且左手低于肩膀时，它会调用 javascript 中的 zoomIn 函数。对于左手也是如此，但这次调用的是 zoomOut。当双手都低于肩膀时，布尔值设置为 true，这样就不会反复放大或缩小。因此，用户需要抬起相应的手来放大或缩小，然后将其放下以重复此操作。 

我在此仅为展示而创建了这些姿势。我创建了许多类似的姿势和手势，因此您可以创建自己的手势。

这是我为 codeproject 撰写的第一个文章。如果我遗漏了任何内容或没有详细解释任何内容，我深表歉意。  

如有任何疑问，请随时提出。