3.1 位图纹理

位图纹理是目前主流引擎采用的一种显示图像的机制。Egret引擎也是以这种方式来显示图像的。

3.1.1 基本知识

位图类Bitmap是Egret引擎里用来显示图片的，它的显示要基于一张纹理，该纹理需要通过外部资源来加载，也就是一张图片资源。

下面的案例将在舞台上绘制一张图像，从而让读者清楚如何使用位图纹理。

首先创建一个名为“BasicBitmap”的项目，删除 src 文件夹内的所有文件，然后创建一个名为Main.ts的类文件并做出如下修改，参见二维码3-1：

运行调试播放器观看结果，如图3-1所示：

在播放器的左上角显示出了白鹭的图标。

onAddToStage方法被标识为async是因为第11行到第13行的代码需要同步。第9行到第13行是资源加载的代码，关于资源加载功能，将在下一章里介绍，这里只需要知道这些代码加载了必要的资源就可以了。当资源加载完成之后，会回调 onGroupComplete 方法。代码的第17行创建了egret.Bitmap对象——image，在第18行，通过RES.getRes获取到一个资源id为egret_icon_png的纹理对象，并把它赋给image对象的texture属性。这样，image对象就有了纹理。然后在第19行将其放置到舞台上。

还可以绘制基于base64字符串数据纹理的位图。继续上一个项目，在Main类里继续添加如下代码：

并对已有onGroupComplete方法做出如下修改：

运行调试播放器观看结果，如图3-2所示：

从运行结果可以看出在第一个图片的下方又显示了相同的图片。

在第一个代码清单里，第2行定义了一个基于base64数据的字符串——str64。第3行，通过egret.BitmapData.create方法创建一个基于base64字符串的纹理数据，并将其传递给为该方法指定的回调函数，这个被传递的数据对象就是bitmapData。第5行，将egret.Texture对象的bitmapData属性赋值为该数据对象。第6行，再用这个Texture对象去创建Bitmap对象，并将这个Bitmap对象放置到舞台上。

3.1.2 九宫格

有时候会有这样的需求，当拉伸一张位图的时候，希望它的边缘不被拉伸。这种情况下，就可以使用Bitmap自带的九宫格功能来实现这种效果，如图3-3所示。

类似图3-3，当拉伸这个图片的时候，在九宫格的作用下，编号1、3、7、9的区域不会被拉伸；区域2、8仅会被横向拉伸；区域4、6仅会被纵向拉伸。

首先创建一个称为NineGrid的项目，删除src文件夹内的所有文件，然后创建一个名为Main.ts的类文件，并做出如下修改，参见二维码3-2：

运行调试播放器观看结果，如图3-4所示：

第一张纹理的四个角被拉伸，第二张纹理的四个角没有被拉伸。

两张纹理的区别在代码的第31、32和33行。第31行代码定义了九宫格的区域，结合图3-1来解释一下该区域各个参数的意图：

第一个参数40表示区域1的宽度。

第二个参数40表示区域1的高度。

第三个参数176表示区域2的宽度。

第四个参数176表示区域4的高度。

在代码的第33行，将这个Rectangle对象赋值给image对象的scale9Grid属性，这样image对象就具备了九宫格功能。

注意：在正常情况下，九宫格区域的宽度和高度要小于图片的宽度和高度。如果九宫格的设置异常会报如下错误：

3.1.3 纹理的填充方式

当位图被拉伸的时候，就会涉及其纹理的填充方式了。填充方式主要有两种：

● 拉伸图像以填充区域。

● 重复图像以填充区域。

下面的案例将展示图像的两种填充方式。

首先创建一个称为BitmapFillMode的项目，删除src文件夹内的所有文件，然后创建一个名为Main.ts的类文件，并对其做出如下修改，参见二维码3-3：

运行调试播放器观看结果，如图3-5所示：

白鹭图标位图被拉伸，这是位图对象默认的填充模式。接下来对代码做出如下修改：

运行调试播放器观看结果，如图3-6所示：

从运行结果可以看出图片被重复填充了。这是因为通过修改的代码的第4行，将图片的填充模式改为 egret.BitmapFillMode.REPEAT，这样图片就实现了重复填充。

3.1.4 纹理集

有时候开发者想把所有的纹理文件放到同一个文件里，然后在项目里单独地使用里面的纹理。Egret引擎为此提供了纹理集的功能。

首先创建一个称为ImageSet的项目，删除src文件夹内的所有文件，然后创建一个名为 Main.ts 的类文件，然后做如下修改，参见二维码3-4：

项目里还带两个资源文件：dogs.json和dogs.png。以下是dogs.json的内容，它的资源类型是sheet，参见二维码3-5：

以下是dogs.png文件的内容，如图3-7所示：

运行调试播放器观看结果，如图3-8所示：

代码的关键在第18行，其中dogs_json为纹理集，dog1是纹理集的id。