图形处理 Graphic (Drawing & Animation)

失足处男的倒霉孩子 发布于 2013/12/27 19:00
阅读 1K+
收藏 1
在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 类包括: LineEllipseRectanglePolygonPolyline 和 Path。在Windows8和Windows Phone8应用中,下面展示了这些绘制基本图形时使用的类及其简单的使用方法。

1. Ellipse

在XAML中添加如下代码创建椭圆,只需要指定WidthHeight和用于FillBrush即可。

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

2. Rectangle

Rectangle 是一个四边形形状并且其对立边相等。要创建基本的 Rectangle,只需指定 WidthHeight 和 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>

5. 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 也会在该时间到达。如果有更多关键帧超出范围,则该值将成为序列中下一个关键帧的起始值。

在动画的开始处,如果 "0:0:0" 没有任何具有 KeyTime 的关键帧,则起始值为该属性的任意非动画值。这种情况下的行为与 From/To/By 动画在没有 From 的情况下的行为类似。

关键帧动画的持续时间为隐式持续时间,它等于其任一关键帧中设置的最高 KeyTime 值。如果需要,你可以设置一个显式 Duration,但应注意该值不应小于你自己的关键帧中的 KeyTime,否则将会截断部分动画。

除了 Duration,你还可以在关键帧动画上设置基于 Timeline 的属性,例如,你可以设置具有 From/To/By 的动画,因为关键帧动画类也派生自 Timeline。它们是:

AutoReverse:在到达最后一个关键帧后,从结束位置开始反向重复帧。

BeginTime:延迟动画的起始部分。

FillBehavior:控制当到达最后一帧时发生的操作。

RepeatBehavior:设置为Forever,则关键帧及其时间线将一直重复。设置为一个迭代计数,则时间线将重复该计数的次数。设置为 Duration,则时间线在到达该时间前一直重复。

SpeedRatio(不常使用)

缓动函数动画

缓动函数支持你将自定义数学公式应用到动画。数学运算通常对于制作在 2-D 坐标系中模拟真实物理效果的动画非常有用。缓动函数可以以三种方式应用于动画:

通过在关键帧动画中使用缓动关键帧。使用EasingColorKeyFrame.EasingFunctionEasingDoubleKeyFrame.EasingFunction 或EasingPointKeyFrame.EasingFunction

通过在 From/To/By 动画类型之一上设置 EasingFunction 属性。使用ColorAnimation.EasingFunctionDoubleAnimation.EasingFunction 或 PointAnimation.EasingFunction

通过将 GeneratedEasingFunction 设置为 VisualTransition 的一部分。

这里是缓动函数的列表:

BackEase:动画开始在指定路径上运动前稍微收缩动画的运行。

BounceEase:创建回弹效果。

CircleEase:使用圆函数创建加速或减速的动画。

CubicEase:使用函数 f(t) = t3 创建加速或减速的动画。

ElasticEase:创建一个动画,模拟弹簧的来回振荡运动,直到它达到停止状态。

ExponentialEase:使用指数公式创建加速或减速的动画。

PowerEase:使用公式 f(t) = tp 创建加速或减速的动画,其中 p 等于 Power 属性。

QuadraticEase:使用函数 f(t) = t2 创建加速或减速的动画。

QuarticEase:使用函数 f(t) = t4 创建加速或减速的动画。

QuinticEase:使用函数 f(t) = t5 创建加速或减速的动画。

SineEase:使用正弦公式创建加速或减速的动画。

视觉状态的情节提要动画

凭借视觉状态这项技术,控件状态的更改可以通过加载用于当前状态的 XAML 控件模板来更改 UI。视觉状态模型为用户提供当前 UI 状态反馈,并可维护使用 C++、C# 或 Visual Basic 的 Windows 应用商店应用的 XAML 控件使用的设计和逻辑分离。若要更改视觉状态的属性,则可在 XAML 中定义一组情节提要动画。用于视觉状态的动画使用与任意情节提要动画相同的语法。

视觉状态相关API:StoryboardVisualStateVisualTransition

更多有关视觉状态定义情节提要动画内容,请参考

视觉状态的情节提要动画

可以使用Blend for Visual Studio方便的创建动画和Visual State,在动画创建之后XAML会被自动生成。

更多有关Windows8和Windows Phone的动画内容,请参考:

快速入门:创建 UI 动画

快速入门:Windows Phone 动画

Android中的情况:

补间动画可以执行一系列简单的视图对象的内容转换(位置,大小,旋转,透明度)。动画包(animation package)提供了所有用于补间动画类。从下面的XML的ApiDemos之一是用于拉伸,然后同时旋转和旋转视图对象。

<set android:shareInterpolator="false">
    <scale
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="1.0"
        android:toXScale="1.4"
        android:fromYScale="1.0"
        android:toYScale="0.6"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fillAfter="false"
        android:duration="700" />
    <set android:interpolator="@android:anim/decelerate_interpolator">
        <scale
           android:fromXScale="1.4"
           android:toXScale="0.0"
           android:fromYScale="0.6"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400"
           android:fillBefore="false" />
        <rotate
           android:fromDegrees="0"
           android:toDegrees="-45"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400" />
    </set>
  </set>
ImageView spaceshipImage = (ImageView)    
  findViewById(R.id.spaceshipImage);
  Animation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(this,R.anim.hyperspace_jump);
  spaceshipImage.startAnimation(hyperspaceJumpAnimation);

IOS中的情况:

Core Animation是IOS上的图形渲染和动画的基础架构,你可以使用它来为你的应用程序视图和其他视觉元素来添加动画。使用Core Animation,大部分绘制动画的每一帧的工作都已经为你完成了,你要做的所有工作就是配置一些动画的参数(例如开始点和结束点)并告诉Core Animation来启动。Core Animation做其余的工作,将大部分实际的绘图工作交给显卡硬件来加速渲染,这种自动的图形加速工作可以在不增加CPU负担和减慢程序执行速度的基础上提供高帧率的流畅动画。

三、OpenGL&DirectX

Windows DirectX

DirectX 是 Microsoft 用于游戏开发的最广泛的图形和多媒体 API 集合。这些 API 几乎涉及游戏开发过程的所有方面:2D 和 3D 图形、音频、输入和文本资源。下面介绍了DirectX中的API库。

Direct3D 一组强大的、以性能为导向的硬件加速库,用于呈现 3D 图形
Direct2D 一组 2D 图形库,用于硬件加速位图和 2D 矢量图形绘制
DirectXMath 用于 2D 和 3D 图形中的常见优化数学运算(例如矢量和矩阵运算)的库
DirectWrite 2D 文本呈现和布局 API 的库。它支持硬件加速和软件光栅化
XAudio2 用于 Microsoft Windows 的低级别、跨平台的音频 API,为游戏开发提供了信号处理和音频混音的基础
XInput 用于支持各种传统游戏控件(尤其是 Xbox 360 控制器模型上所需的控件)的库

Windows Phone 中可以可使用 XAML 提供完整 UI 以创建游戏。但是,也可以创建托管游戏,它使用 Direct3D 将 3D 图形呈现至屏幕。此类应用有两种特殊的项目模板。

XAML 和 Direct3D 项目模板

如果想在 XAML UI 内呈现 3D 图形,则建议使用该模板。该模板使用 DrawingSurface 控件在屏幕上显示 Direct3D 图形。DrawingSurface 与其他任何 XAML 控件一样,可以被放置在屏幕上的任何位置,在其他 XAML 控件上方或旁边都可以。在单独的 Windows Phone 运行时 组件内实现通常用于呈现图形的 Direct3D 代码。

Direct3D 和 XAML 项目模板

如果想创建的游戏只将托管应用作为围绕实质上的本机游戏的精简包装使用,以便利用仅 托管的应用 可用的一些功能(如实时拼贴),则建议使用该模板。该模板使用 DrawingSurfaceBackgroundGrid 控件在屏幕上显示 Direct3D 图形。与 DrawingSurface 控件不同,该控件必须置于 XAML 树的根部,而且总是覆盖整个屏幕。与另一个模板一样,在单独的 Windows Phone 运行时 组件内实现用于呈现图形的 Direct3D 代码。Direct3D 和 XAML 应用的帧速率仅稍微优于 XAML 和 Direct3D 应用。

更多使用信息,请参考:

采用 DirectX 和 C++ 的 Windows 应用商店应用的路线图

Windows Phone 8 的带 XAML 应用的 Direct3D

Android OpenGL

Android通过使用开放图形库(OpenGL)对高性能的2D和3D图形处理提供支持,尤其是,OpenGL ES API.OpenGL是一个跨平台图形处理的API,并且定义了标准的软件接口用以调用处理3D图形的硬件。OpenGL ES 是专门为嵌入式设备而开发的OpenGL。Android的框架API和本地开发组件(NDK)都提供对OpenGL的支持。本文着重讲解Android的框架接口。若想获取更多关于NDK的信息,请访问Android NDKAPIGLSurfaceView和 GLSurfaceView.Renderer。如果你是想在你的Android应用中使用OpenGL,那么你首先要做的就是要理解如何在activity中来实现这这两个类。

GLSurfaceView

这是一个继承了View的类,可以通过使用OpenGL API来绘制和操作管理,这个在功能上和SurfaceView非常相似。使用这个类的话,你需要先创建一个GLSurfaceView实例并且给它添加你的Renderer。然而,如果你想捕获触屏事件,那则需要继承GLSurfaceView 类并实现对触屏动作的监听,像OpenGL讲解篇里一样Responding to Touch Events

GLSurfaceView.Renderer

这个接口定义了在OpenGL的GLSurfaceView绘制图形的方法。你需要新建一个类来实现这个接口并且通过 GLSurfaceView.setRenderer()方法来添加到GLSurfaceView实例里。

 

GLSurfaceView.Renderer接口需要实现以下方法:

§  onSurfaceCreated():系统在创建GLSurfaceView时候会调用这个方法,且只会调用一次。只需要执行一次的动作可以定义在这个方法里,比如说,设置OpenGL环境参数或者初始化OpenGL图形对象。

§  当系统每次需要重新绘制GLSurfaceView时候会调用此方法,同时,此方法也是绘制图形对象的主要执行点。

§  onSurfaceChanged():当GLSurfaceView几何图形改变时,系统调用此方法。这包括GLSurfaceView尺寸大小的改变,设备横竖屏幕切换时候的改变。系统调用此方法来响应GLSurfaceView 容器的变化。

IOS OpenGL

在IOS设备上,同样支持OpenGL进行高性能2D和3D图形绘画,IOS设备上的GPU可以完成复杂的2D和3D绘画,同时也能在最终的图片上的每一个像素进行复杂的阴影计算。如果你的应用程序需要直接高性能的调用GPU来进行绘画,OpenGL是最好的选择。

OpenGL ES是一组低层次的主要面向硬件的API,IOS为其提供了一些高级框架来方便使用:

Sprite Kit框架为创建2D游戏提供了硬件加速动画系统。

Core Image框架为静态和动态图像提供了实时的滤波和分析。

Core Animation为所有的IOS应用提供了硬件加速和动画渲染引擎,同时作为一个简单的程序设计模型,它也使得制作用户界面动画的工作变得简单。

你也可以使用UIKit框架中的特性来为Cocoa Touch用户界面添加动画。

从 OpenGL ES 2.0 移植到 Direct3D 11

将你的图形体系结构从 OpenGL ES 2.0 移植到 Direct3D 11 以便为 Windows 8 创建游戏时,你需要将你的 OpenGL 着色器语言 (GLSL) 代码移植到 Microsoft 高级着色器语言 (HLSL) 代码。

OpenGL ES 2.0 和 Direct3D 11 有很多相似之处。它们都有相似的呈现管道和图形功能。 但是 Direct3D 11 是呈现实现和 API,而不是规范;OpenGL ES 2.0 是呈现规范和 API,而不是实现。 Direct3D 11 和 OpenGL ES 2.0 通常会在以下方面有所不同:

OpenGL ES 2.0

Direct3D 11

硬件和操作系统规范与供应商提供的实现无关

在 Windows 平台上硬件抽象和认证的 Microsoft 实现

对硬件多样性进行了抽象,运行时管理大多数资源

直接访问硬件布局;应用可以管理资源和处理

通过第三方库(例如,Simple DirectMedia Layer (SDL))提供更高级的模块

更高级的模块(如 Direct2D)构建在低级模块上,以简化 Windows 应用的开发

通过扩展名来区分硬件供应商

Microsoft 采用常规方法向 API 中添加可选功能,以便这些功能不会特定于任何特定的硬件供应商

GLSL 和 HLSL 通常会在以下方面有所不同:

GLSL

HLSL

注重过程,以步骤为中心(如 C)

面向对象,以数据为中心(如 C++)

着色器编译被集成到了图形 API 中

HLSL 编译器将着色器编译为中间二进制表示,然后 Direct3D 将其传递给驱动程序。

注意 此二进制表示与硬件无关。通常在应用构建时对其进行编译,而不是在应用运行时编译。

可变存储修饰符

通过输入布局声明进行常量缓冲区和数据传输

类型

典型的矢量类型:vec2/3/4

lowp、mediump、highp

典型的矢量类型:float2/3/4

min10float、min16float

texture2D [Function]

texture.Sample [datatype.Function]

sampler2D [datatype]

Texture2D [datatype]

行主序矩阵(默认设置)

列主序矩阵(默认设置)

注意 使用 row_major 类型修饰符来更改一个变量的布局。有关详细信息,请参阅变量语法。还可以指定编译器标志或 pragma 来更改全局默认设置。

片段着色器

像素着色器


更多 OpenGL ES 2.0 移植到 Direct3D 11内容,请参考:

从 OpenGL ES 2.0 移植到 Direct3D 11.1

加载中
0
eechen
eechen

iOS、Android都用OpenGL ES,Windows Phone SDK直接支持OpenGL ES不就不需要移植了吗?

返回顶部
顶部