图形处理 Graphic (Drawing & Animation) 1 绘制基本图形 2 使用位图绘制图像 3 实现三维效果 Windows8提供的动画 情节提要动画 关键帧动画 缓动函数动画 视觉状态的情节提要动画 Windows DirectX Android OpenGL IOS OpenGL 从 OpenGL ES 2.0 移植到 Direct3D 11 

在XAML中添加如下代码创建椭圆，只需要指定Width、Height和用于Fill的Brush即可。 在Windows8和Windows Phone8应用中可以使用C#代码绘制图形图像以及动画，也可以使用XAML代码来实现。
可扩展应用程序标记语言 (XAML) 用于定义 Windows Phone 用户界面。XAML 是一种声明性语言，可用于创建应用 UI，如控件、形状、文本和其他 Windows Phone 屏幕内容。XAML 包含与 HTML 中所用元素和特性类似的元素及特性。但是，XAML 基于 XML，因此必须遵循 XML 规则（包括采用良好的格式）。使用Visual Studio或Blend for Visual Studio可以自动生成XAML代码。

一、图形图像

在Windows Phone8和Windows8中可以使用XAML中的 Shape 和  Geometry等实现绘制基本的图形，Android中可以使用View Animation、SurfaceView等，在IOS中可以使用Quartz2D等。

1 绘制基本图形

在Windows8和Windows Phone8 中，可以使用Shape和Geometry绘制这类图形。 Shape 拥有与之相关联的画笔并且可以呈现到屏幕，但  Geometry 只定义空间的区域并且不会呈现。 Shape 类包括：  Line、 Ellipse、 Rectangle、 Polygon、 Polyline 和  Path。在Windows8和Windows Phone8应用中，下面展示了这些绘制基本图形时使用的类及其简单的使用方法。 1.  Ellipse 在XAML中添加如下代码创建椭圆，只需要指定 Width、 Height和用于 Fill的 Brush即可。

<Ellipse Fill="Blue" Height="300" Width="300"/>

2.  Rectangle Rectangle 是一个四边形形状并且其对立边相等。要创建基本的  Rectangle，只需指定  Width、 Height 和  Fill即可。Windows Phone 允许您圆化  Rectangle 的角。要创建圆角，请为  RadiusX 和  RadiusY 属性指定一个值。这些属性指定椭圆的 X 和 Y 轴，以定义角度的曲线。 RadiusX 的最大值为  Width 除以 2 的值，且  RadiusY 的最大值为  Height 除以 2 的值。 所有  Shape 类都包含  Stroke 和  StrokeThickness 属性。 Stroke 指定用于绘制  Shape 边框的  Brush。如果没有为  Stroke 指定  Brush，将不会绘制形状周围的边框。 StrokeThickness 指定边框的宽度。 在XAML中添加如下代码创建矩形，

<Rectangle Fill="SteelBlue" Height="275" Width="350" Stroke="AliceBlue" StrokeThickness="15"/>

添加RadiusX="40"  RadiusY="30"代码到XAML中，可以创建圆角矩形。 3.  Polygon Polygon 是指其边界由任意数量的点定义的形状。边界是通过将线从一个点连接到下一个点并将最后一点与第一个点相连接而创建的。 Points 属性定义构成边界的点的集合。在 XAML 中，您可以使用逗号分隔的列表定义点。在代码中，使用  PointCollection 以定义点，并将每个单独的点作为  Points 结构添加到集合中。 下面的示例创建了一个  Polygon，其四个点分别被设置为 (10,200)、(60,140)、(130,140) 和 (180,200)。它将蓝色的  SolidColorBrush 用于其  Fill。没有定义任何的  Stroke，因此可以排列点并且不呈现任何内容。如果定义了 Stroke，将绘制至少一条线或一个点且其厚度与  Stroke 相同。使用本示例中的滑块体验不同的点的坐标。此外，请注意如果您选中了  Stroke 复选框，最后一点将连接到第一点。 在XAML中添加如下代码创建多边形

<Polygon Stroke="Black" StrokeThickness="4" Points="10,200, 60,140,130,140,180,200"/>

4.  Polyline  Polyline 类似于  Polygon，这是因为该形状的边界是由一组点定义的。 Polyline 和  Polygon 的主要区别在于：在  Polyline 中，最后一点不会连接到第一点。即使边界（或  Stroke）的首尾不相连， Polyline 的  Fill 仍然会绘制形状的内部。 与  Polygon 一样， Points 属性定义构成边界的点的集合。在 XAML 中，您可以使用逗号分隔的列表定义点。在代码中，使用  PointCollection 以定义点，并将每个单独的点作为  Points 结构添加到集合中。 在XAML中添加如下代码可以创建不闭合的折线

<Polyline Stroke="Black" StrokeThickness="4" Points="10,200, 60,140,130,140,180,200" />

5.  Path Path 是最具多样性的  Shape，因为它允许您定义任意的几何图形。然而，这种多样性也伴随着复杂。此节演示如何使用 XAML 创建基本  Path。 路径的几何图形是使用  Data 属性定义的。可以将  Data 属性设置到  Geometry 对象或使用 XAML 进行设置。要使用 XAML 定义路径，您需要使用路径标记语法。 以下示例创建了由一条贝塞尔曲线线段和一条线段组成的  Path。

<Path Stroke="DarkGoldenRod" StrokeThickness="3" Data="M 100,200 C 100,25 400,350 400,175 H 280" />

以上XAML代码可以使用Visual Studio或Blend for Visual Studio工具创建图形时自动生成。应用示例，请参照XAML_Graphic_Demo 在 Android 中的情况： SurfaceView是视图(View)的继承类，这个视图里内嵌了一个专门用于绘制的Surface。你可以控制这个Surface的格式和尺寸。Surfaceview控制这个Surface的绘制位置。 surface是纵深排序(Z-ordered)的，这表明它总在自己所在窗口的后面。surfaceview提供了一个可见区域，只有在这个可见区域内 的surface部分内容才可见，可见区域外的部分不可见。surface的排版显示受到视图层级关系的影响，它的兄弟视图结点会在顶端显示。这意味者 surface的内容会被它的兄弟视图遮挡，这一特性可以用来放置遮盖物(overlays)(例如，文本和按钮等控件)。注意，如果surface上面 有透明控件，那么它的每次变化都会引起框架重新计算它和顶层控件的透明效果，这会影响性能。 你可以通过SurfaceHolder接口访问这个surface，getHolder()方法可以得到这个接口。 surfaceview变得可见时，surface被创建；surfaceview隐藏前，surface被销毁。这样能节省资源。如果你要查看 surface被创建和销毁的时机，可以重载surfaceCreated(SurfaceHolder)和 surfaceDestroyed(SurfaceHolder)。 surfaceview的核心在于提供了两个线程：UI线程和渲染线程。这里应注意： 1> 所有SurfaceView和SurfaceHolder.Callback的方法都应该在UI线程里调用，一般来说就是应用程序主线程。渲染线程所要访问的各种变量应该作同步处理。 2> 由于surface可能被销毁，它只在SurfaceHolder.Callback.surfaceCreated()和 SurfaceHolder.Callback.surfaceDestroyed()之间有效，所以要确保渲染线程访问的是合法有效的surface。 在 IOS 中的情况： UIKit是所有的iPhone应用程序的核心框架。UIKit中提供了实现应用程序的基本类，如检测触摸屏操作，动作等用户操作。掌握UIKit的相关知识是开发效率更高、稳定性更好的iPhone应用程序的必要条件。

2 使用位图绘制图像

在Windows8和Windows Phone中可以使用Image或Brush等绘制资源中存在的图像并展示在UI上。在Android中，使用BitmapDrawable可以达到相同的效果。在IOS中，使用的是Core Graphics。

Image

在XAML中添加如下代码可以创建Image控件并资源中加载图片。

<Image Source="licorice.JPG" />

1.  拉伸图像 使用Stretch属性拉伸图像， Stretch 属性接受  Stretch 枚举定义的下列值：

• None：图像不拉伸以适合输出尺寸。
• Uniform：图像进行缩放，以适合输出尺寸。但保留该内容的纵横比。这是默认值。
• UniformToFill：对图像进行缩放，从而可以完全填充输出区域，但保持其原始纵横比。
• Fill：图像进行缩放，以适合输出尺寸。由于内容的高度和宽度是独立缩放的，因此图像的原始纵横比可能不会保留。也就是说，为了完全填充输出区域，图像可能会失真。

在XAML中添加如下代码可以设置图像的Strenth属性

<Image Source="Licorice.JPG" Strenth = "Uniform" ></Image>

2.  裁剪图像 使用Clip属性裁剪图像。您将  Clip 属性设置为  Geometry，这意味着可以从  Image 中裁剪各种几何形状（例如，椭圆、直线或复杂路径）。 添加如下代码，位于椭圆区域内部的图像部分才会显示。

<Image Source="Licorice.JPG">
    <Image.Clip>
        <EllipseGeometry RadiusX="125" RadiusY="100" Center="225,175"/>
    </Image.Clip>
</Image>

3.  动态生成图片 可以使用 WriteableBitmap 在C#代码中创建并操作图像 创建 WriteableBitmap 图像， WriteableBitmap bitmap = new WriteableBitmap(ImageToModify.Source as BitmapSource); 修改 WriteableBitmap 图像，

for (int x = 0; x < bitmap.Pixels.Length; x++)
{
	if (x % pixelTarget == 0)
   {
	bitmap.Pixels[x] = 0;
   }
}

更多有关位图的使用，请参考 快速入门：Windows Phone 的图像 快速入门：图像和 ImageBrush

Brush

Brush是Windows8和Windows Phone8提供用来绘制图形的画笔。可以达到图形区域纯色、渐变或图像填充的效果。 1.  SolidColorBrush 纯色画笔 下面代码展示了三种定义 SolidColorBrush 及其指定的颜色的方法。 预定义的颜色名称：

<Rectangle Width="100" Height="100" Fill="Red" />

十六进制颜色值：

<Rectangle Width="100" Height="100" Fill="#FFFF0000" />

单个  Color（例如，红色或蓝色）绘制区域：

<Rectangle Width="200" Height="150">
        <Rectangle.Fill>
            <SolidColorBrush Color="Blue" Opacity="0.5" />
        </Rectangle.Fill>
</Rectangle>

2.  LinearGradientBrush 线性渐变画笔 下面代码展示了XAML中定义线性渐变画笔的方法。

<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                <GradientStop Color="Yellow" Offset="0.0" />
                <GradientStop Color="Red" Offset="0.25" />
                <GradientStop Color="Blue" Offset="0.75" />
                <GradientStop Color="LimeGreen" Offset="1.0" />
</LinearGradientBrush>

3.  RadialGradientBrush 径向渐变画笔 下面代码展示了XAML中定义径向渐变画笔的方法

<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
                <GradientStop Color="Yellow" Offset="0" />
                <GradientStop Color="Red" Offset="0.25" />
                <GradientStop Color="Blue" Offset="0.75" />
                <GradientStop Color="LimeGreen" Offset="1" />
</RadialGradientBrush>

4.  ImageBrush 图像画笔 ImageBrush 使用图像绘制一个区域。使用由其  ImageSource 属性指定的 JPEG 或 PNG 图像绘制区域。使用要加载的图像的路径来设置  ImageSource 属性。 下面代码展示了在XAML中设置控件的图像画笔。

<TextBlock.Foreground>
    <ImageBrush ImageSource="licorice.JPG"/>
</TextBlock.Foreground>

1. WebViewBrush
   特殊的画笔Windows8提供，Windows Phone 8 没有。
   可以访问通常在 WebView控件中查看的内容。WebViewBrush将内容绘制到呈现图面的另一个具有Brush型属性的元素上，而不是在矩形 WebView控件区域中绘制内容。WebViewBrush并非对于所有的画笔方案都适合，但它对于切换WebView非常有用。
   更多画笔相关内容，请参考
   快速入门：使用画笔
   快速入门：Windows Phone 的画笔
   在Android中的情况：
   在Android中，可以使用BitmapDrawable来进行绘制，BitmapDrawable是一种可以进行缩放编辑的绘图控件，可以由文件路径或者数据流来进行创建。
   它可以通过XML文件通过<bitmap>元素来定义，更多信息请参见Drawable Resources。
   也可以参见Bitmap类，这个类处理原始bitmap图像的管理和转变，也可以用于绘制一个canvas。
   在IOS中的情况：
   在IOS中，Core Graphics框架是一个基于Quartz高级绘图引擎的C语言API。它提供了低层次轻量级的2D渲染并能以无与伦比的高保真进行输出。你可以使用这个框架处理基于路径的绘图、转换、色彩管理、离屏渲染、图案、渐变和阴影、图像数据管理、图片创建、遮罩、PDF文件创建、显示和解析。

3 实现三维效果

通过使用  PlaneProjection 来设置 UIElement 的 Projection属性，你可以对任何 UIElement应用三维效果。 一个简单的示例

<Image Source="kid.png">
    <Image.Projection>
        <PlaneProjection RotationX="-35" />
    </Image.Projection>
</Image>

二、动画

在Windows8和Windows Phone中可以选择使用  Storyboard 定义情节提要动画或设置Visual State及Visual State间的过渡动画来实现应用中的动画效果。在Android中可以使用Property  Animation（属性动画）、View Animation（视图动画）、Drawable Animation（帧动画）来实现相同的效果。在IOS中，一般使用Core Animation来实现动画效果。

Windows8提供的动画

在Windows8中提供了可以方便使用的UI动画。包括过渡动画、主题动画。下表展示了这些动画的API及其意义。

API	描述
AddDeleteThemeTransition	为控件添加或删除子对象或内容的情形提供动画的过渡表现方式。通常，控件是项目容器。
ContentThemeTransition	为控件的内容更改时的情形提供动画的过渡表现方式。可以在应用AddDeleteThemeTransition 后再应用它。
EntranceThemeTransition	为控件第一次显示的情形提供动画的过渡表现方式。
ReorderThemeTransition	为列表-视图控件项目更改顺序的情形提供动画的过渡表现方式。通常它作为拖放操作的结果出现。不同的控件和主题可能具有不同的动画特征。
RepositionThemeTransition	为控件更改位置的情形提供动画的过渡表现方式。
DropTargetItemThemeAnimation	应用到潜在的拖放目标元素的预配置动画。
FadeInThemeAnimation	控件第一次出现时应用到控件的预配置不透明度动画。
FadeOutThemeAnimation	控件从 UI 中删除或隐藏时应用到控件的预配置不透明度动画。
PointerDownThemeAnimation	用于用户点击或单击项目或元素操作的预配置动画。
PointerUpThemeAnimation	用于在用户点击项目或元素并释放该操作后运行的用户操作的预配置动画。
PopInThemeAnimation	控件的弹入组件显示时应用到它们的预配置动画。此动画结合了不透明度和转换。
PopOutThemeAnimation	控件的弹入组件关闭或删除时应用到它们的预配置动画。此动画结合了不透明度和转换。
RepositionThemeAnimation	对象重新放置时应用的预配置动画。
SplitCloseThemeAnimation	使用拆分动画隐藏目标 UI 的预配置动画。
SplitOpenThemeAnimation	使用拆分动画显示目标 UI 的预配置动画。
SwipeBackThemeAnimation	元素在轻扫交互后滑动回布局槽时应用到控件的预配置动画。
SwipeHintThemeAnimation	表示现在可进行轻扫手势的预配置动画。

情节提要动画

情节提要动画类似于Android中的Property Animation。情节提要动画是更改作为时间函数的依赖属性的值的一种方法。 创建动画的属性并不始终是直接影响你的应用的 UI 的属性。但由于 XAML 可以定义应用的 UI，因此通常它是你要创建动画的 UI 相关的属性。 下面为创建情节提要动画的一半步骤： 1.  确定要实现动画的对象 通过在动画定义中设置  Storyboard.TargetName 确定要创建动画的对象目标。 2.  确定要创建动画的依赖属性目标 在动画中为  Storyboard.TargetProperty 设置一个值。 3.  指定动画类型 Windows 运行时动画系统具有情节提要动画可以应用于的三种特定类型： Double，可使用任意  DoubleAnimation 为其创建动画 Point，可使用任意  PointAnimation 为其创建动画 Color，可使用任意  ColorAnimation 为其创建动画 4.  指定动画化的值 From/To/By ：三个值均可为Nullable，From为依赖属性的动画开始时的值，To为依赖属性在动画结束后的值，By为与起始值相对的结束值。动画通常具有至少其中一个 From、By 或 To，但绝不会同时有三个值。 AutoReverse：指定在时间线达到其  Duration 的结尾处后是否反向播放。 RepeatBehavior：指定时间线播放的次数。 FillBehavior="Stop"：设置FillBehavior为  FillBehavior.Stop，则动画化的值的值将还原为应用动画前的任意值，或者更精确些还原为按照依赖属性系统确定的当前有效值。 BeginTime：设置动画的开始时间。 SpeedRatio：如果在一个  Storyboard 中有多个动画，则可以更改一个或多个动画相对于 Storyboard 的时间比。

关键帧动画

关键帧动画允许沿动画时间线到达一个点的多个目标值。关键帧动画还会启用不同的插入逻辑，每个插入逻辑根据动画类型作为不同的 KeyFrame 子类实现。 对于插入行为，每个关键帧控制该插入，直至到达其 KeyTime 时间。其 Value 也会在该时间到达。如果有更多关键帧超出范围，则该值将成为序列中下一个关键帧的起始值。 在动画的开始处，如果 &