Silverlight 2.0 - 旋转的 3D 图像立方体/盒子

• 下载源代码 - 56.89 KB
• 下载立方体演示 - 1.09 MB

您可以在此处看到一个完整的组件工作示例。

引言

自微软最新平台首次发布以来，Silverlight 中的 3D 一直是一个讨论的话题。不幸的是，微软似乎无意在 Silverlight 框架中包含 3D 引擎。鉴于我们都认为 3D 很酷并且有很多应用，尤其是在互联网上，我决定做这个项目并与社区分享。本项目旨在为 Silverlight 实现一个自定义用户控件，该控件允许创建任意尺寸的立方体/盒子，并在其面上放置图像纹理。它还允许进行任意角度的旋转。要运行此组件，您需要安装 Silverlight 2（不是 Beta 版）。

如果您还没有安装 SilverLight 2，可以在此处下载。

背景

由于 Silverlight 缺乏 3D 引擎，我们需要从头开始创建所有 3D 系统，这并非易事。如果您只想用纯色绘制立方体的面，任务会变得容易得多，因为您只需要实现一个顶点系统（3D 环境中的点）和一个到 2D 坐标的转换系统。然后，您将使用 Silverlight 的多边形元素在点之间绘制线条，并可以为它们绘制任何纯色。当然，每次，您只需要显示在 2D 系统中可以看到的面。当您想要将图像包裹在面上时，情况会变得复杂得多。如果您尝试使用图像笔刷绘制上一节中的多边形，您会发现当您将多边形置于不同透视时（模拟 3D 旋转所必需的），用于绘制它们的图像会错误地包裹（无论您如何设置图像笔刷的 Stretch 字段）。此问题发生的原因是 Silverlight 框架无法处理图像的透视和扭曲操作。而且，正如您现在可能已经理解的，这些操作是实现 3D 图像立方体的“必备”功能。在此项目中，我使用了一个专门的算法来纠正图像失真，并将其用于包裹图像多边形面，这些面共同创建了一个 3D 旋转立方体。该算法使用图像的四边形分割（最初由 Macromedia 为 Flash 环境发布的一个算法），也以非常相似的版本称为“图像三角形算法”。如果您很难理解这个算法，不用觉得太糟糕，我也花了很多时间才弄懂。 :)

使用 组件  

有 三种不同的方法可以使用 3D 立方体组件

1. 将组件添加到工具箱

   您需要用鼠标右键单击工具箱面板上的任意空白区域，然后单击“选择项”按钮。在弹出的新窗口中，单击“浏览”按钮，然后选择项目内 Bin 目录中的 Element.dll 文件。您将在工具箱面板中看到两个新组件。

   

   CubeSurface 组件是一个旋转的 3D 立方体形状，没有应用图像到立方体面的选项。

   Cube 组件是完整版本，允许您将图像应用到立方体的面上。

   将其添加到工具箱后，您可以像常规控件一样使用它，并将其拖到 XAML 编辑器中。

2. 将组件添加到 XAML 编辑器

   您需要将 Elements.dll 文件添加到项目引用中。之后，您就可以如下将其添加到 XAML 编辑器中。

   <my:Cube x:Name="My_Cube_Name" ></my:Cube>

   当然，您将能够直接从 XAML 编辑器设置组件的大部分属性。

3. 在代码中使用组件

   您需要将 Elements.dll 文件添加到项目引用中，并在页面顶部添加 using Elements 语句。然后，您就可以将其作为一个常规对象使用。

   Cube myCube = new Cube();

   您将能够通过其属性和方法设置立方体。完成后，不要忘记将其添加到相关的画布/网格中。

组件的完整参考指南可从此处下载。

已知问题

• 您会注意到，在某些角度，图像纹理的面内部会出现恼人的交叉线。这是因为微软在 Silverlight 框架中使用了抗锯齿技术，并且无法将其关闭。我尝试在四边形算法中进行重叠（让各个部分稍微重叠），但结果仍然不够理想。我现在解决这个问题的方法是为每个面设置背景颜色。目前，您需要根据每个图像的主要颜色手动设置颜色。希望在下一个版本中，这些颜色能够自动找到。
• 四边形算法的一个严格要求是输入图像必须是正方形（否则会丢失图像的一部分）。我找不到绕过这个的方法。这意味着，如果您有一个非正方形尺寸的面，您必须将用作纹理的图像拉伸成正方形，否则在包裹时会丢失部分图像。不幸的是，微软选择不在 Silverlight 框架中包含图像处理工具。我尝试了几种方法来解决这个问题，但都没有奏效。

路线图

最后，此版本的组件已更新为 SilverLight 2.0 最终版本。与之前发布的组件 Beta 版本相比，修复了一些错误，提高了性能，并且您现在可以直接从工具箱使用该组件。在未来的版本中，我确实打算添加一些功能。

• 一个缩放功能，允许您实时放大/缩小立方体。
• 我希望找到一种方法，可以从代码中自动处理输入图像，这样用户就不必手动处理它们了。
• 一个选项，可以为每个面的边框设置任意厚度和任意颜色。
• 一个选项，可以将图像以外的其他控件添加到立方体的面上。

如果您对未来版本有更多建议/要求，请随时发送给我。

关于此项目

该组件是作为 MTA 大学 的期末项目创建的，指导老师是 Amir Kirsh（您应该感谢他，是他让我将其开源的 :D）。