Windows Phone中的图形渲染处理

• 前言

   这篇文章主要介绍Windows Phone中XAML的渲染处理过程，你可以根据下文中所提到的内容来优化现有的XAML页面，来提高页面渲染的性能。

     XAML的渲染包括以下两个阶段：

     1. 光栅化（Rasterization） 光栅化是将图形的表现形式从以基于矢量(vector-based)的图形（比如：线、文字和矩形）转换成基于像素（pixel-based）的图形，从而可以使图像直接显示在屏幕上的处理过程。这个转换过程要先在内存中先为位图分配一个缓冲区，然后将以矢量图形一个像素一个像素的转换成位图，并完成蒙板和梯度值的计算。这个光栅化的过程完全是由CPU来处理的。

      2. 组合（Composition） 在每一个UIElement都被光栅化之后渲染器按照原始元素Z轴的顺序讲各个缓冲区上的位图层叠到彼此之上。这个处理将各个位图组合到了一起，所以渲染器要负责处理元素的透明度和任何转换（如：大小和位置），最终将位图展示在设备的屏幕上。组合处理CPU或者GPU来完成。

      下面这张图通过将两个UI Element展示在屏幕上，说明了光栅化和组合阶段的过程，其中一个具有不透明蒙板。

      渲染的过程是非常复杂的，因为屏幕上的图形都是由UI Element的集合组合在一起的，而很多UI Element又是由其他UI Element组合的。在内部，XAML使用一种所有元素都可见和渲染的层次结构的视觉树(visual tree)。比如要呈现一个普通的屏幕图形， XAML通过光栅化及组合可视化树中的元素，以减少必须分配的内存缓冲区的数量。这个处理过程将尽可能的将元素覆盖到现有的缓冲区中。开发人员可以通过缓冲组合，以指定特定的UI元素如何被分组和由GPU组成。适当的缓存可以显着提高用户界面的帧速率。

     如果UI Element是可动的，它将浪费一些处理器的时间，直到动画结束才进行光栅化处理。此外，即使元素只移动了其中一小部分，也需要对整个UI Element进行重新组合。为了优化渲染过程，XAML自动推迟了某些元素的组合过程，从而是元素的组合步骤可以迅速的通过GPU来完成。使用GPU来加速渲染过程通常被称为硬件加速。如果您的设备没有GPU或因其他原因不能硬体加速，XAML采用图形设备接口（GDI ）以较低的渲染速度来通过Z轴的顺序一像素一像素绘制UI。

• 渲染处理过程中的线程

     在XAML中有两个主要的线程：UI线程和Compositor线程。为了创建响应及时的应用，了解这两个线程是非常重要的。

     1. UI Thread

     UI线程负责以下任务：

• 用户输入的处理。
• XAML对象的创建和解析。
• 首次绘制所有视图到屏幕上。
• 执行每帧回调或其他用户代码。

     为了使您的应用程序尽可能灵活响应，必须尽量保持UI线程的轻量和空闲。

     2. Compositor Thread

     组合线程是一个超轻量级的线程，它为GPU简单的组合元素的纹理，它处理GPU上的被定义为Storyboards类型或者基础纹理的绘制类型的动画。这些动画类型包括：

• Translation. 改变对象的位置。
• Scaling. 放大或缩小对象以产生深度的视觉。
• Rotation. 旋转对象。
• Draws. 屏幕首次呈现所有视图。
• Plane Projection. 通过映射到二位平面来展示对象的3D变化。

     注意，任何使用了不透明蒙板，非矩形剪切或者大小改变的动画的对象大于2,048 x 2,048像素，它们将在UI线程上光栅化。

• 渲染处理过程的例子

     为了说明前面的概念，请参阅如下图所示的界面。屏幕上的地球图像制作成动画，绕着屏幕剩余边界。虽然这个屏幕显示了一个非常简单的用户界面，它包括所有上面列出的关键构建模块来说明渲染过程.

 

     这个图像是由下面这个XAML用户控件构成的。

<UserControl
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   x:Class="HelloWorld.MainPage"
   Width="300" Height="200">

   <Grid x:Name="LayoutRoot">
      <Grid x:Name="_Background" Background="{StaticResource BlueWashBrush}">
         <Image x:Name="_LightHexes" Source="Assets/Hexes.png" Stretch="Fill"/>
         <Image x:Name="_DarkHexes" Source="Assets/BlackHexes.png" Stretch="Fill">
            <Image.OpacityMask>
               <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                  <GradientStop Offset="0"/>
                  <GradientStop Color="#C0FFFFFF" Offset="0.6"/>
               </LinearGradientBrush>
            </Image.OpacityMask>
         </Image>
      </Grid>
      <Rectangle x:Name="_Border" Fill="#FF969696" Stroke="White" Margin="0,10,90,10" RadiusX="10" RadiusY="10" 
         HorizontalAlignment="Center" Width="180" Opacity="0.5"/>
      <TextBlock x:Name="_Label" HorizontalAlignment="Center" Margin="0,0,90,15" VerticalAlignment="Bottom" 
         FontFamily="Verdana" FontSize="21.333" Text="Hello World" TextWrapping="Wrap" FontWeight="Bold"/>
      <Button x:Name="_Button" HorizontalAlignment="Right" Margin="0,0,8,8" VerticalAlignment="Bottom" Width="75" 
         Content="Close" FontFamily="Verdana" FontSize="16"/>
      <Image x:Name="_Globe" Height="138" HorizontalAlignment="Center" Margin="0,20,90,0" VerticalAlignment="Top" 
         Width="138" Source="Assets/Globe138x138.png" Stretch="Fill" RenderTransformOrigin="0.5,0.5" 
         CacheMode="BitmapCache">
         <Image.RenderTransform>
            <TransformGroup> 
                 <ScaleTransform/>
                 <SkewTransform/>
                 <RotateTransform/>
                 <TranslateTransform/> 
            </TransformGroup>
         </Image.RenderTransform>
      </Image>
   </Grid>
</UserControl>

     下图展示了上面代码的树形结构。

     XAML的渲染过程执行以下步骤来呈现上图所示的可视化树：

• 分配给LayoutRoot的主缓冲区。
• 光栅化渐变画笔的_Background网格到主缓冲区。
• 光栅化_LightHexes到一个临时缓冲区和撰写主缓冲区。
• 光栅化_DarkHexes到一个临时缓冲区和撰写主缓冲区。
• 光栅化_Border矩形到一个临时缓冲区和撰写主缓冲区。
• 光栅化文字_Label到一个临时缓冲区，并缀以主缓冲区。
• 分配给_button一个临时的缓冲区，然后光栅化并撰写所有的按钮元素（按钮的模板中）到这个临时缓冲区中。
• 构图_button缓冲区与主缓冲区。
• 构成_Globe与主缓冲区。

     注意，在渲染器执行的过程中遵循以下规则：

1. 只分配必要的缓冲区。如果有可能覆盖一个元素到一个现有的缓冲区中，将不分配新的缓冲区。
2. 它使用的CPU来执行所有光栅化和组合操作。（如果该设备有GPU和启用硬件加速，这个过程GPU上完成。）

      在动画过程中，只有_Globe元素在画面上移动，没有其他任何元素的变化。XAML没有必要逐帧来执行所有光栅化和组合的步骤。最优行为是保存已经完成的每帧动画步骤的结果，通过保存的步骤来组合_Globe。 在前面的代码块22行提到CacheMode属性来明确地告诉渲染器单独对待_Globe元素，以产生缓存的效果。

      在XAML中缓存是自动的，没必要再设置CacheMode属性。注意，分离缓存的对象和元素分组是缓存和提高动画速度成功的关键。