使用 Nine Patch Image 节点¶

使用 Nine Patch Image 节点可创建可伸缩的按钮背景，其尺寸可随 Nine Patch Image 内容尺寸伸缩。

Nine Patch Image 以一种可控的方式缩放其图像，而不是将它们作为一个整体进行缩放。它将九个图像放置在一个 3x3 的网格中：边缘的图像形成框架，而中心的图像则包含 Nine Patch Image 的内容。

使用 Nine Patch Image 时，请记住：

中心图像向各个方向拉伸。为了获得最佳效果，请保持该图像透明或纯色。
角部的厚度定义了中心图像边框的厚度。Kanzi 不会缩放九宫格图像中的角部。
默认情况下，随着 Nine Patch Image 的大小变化，上、下、右和左纹理会根据角纹理之间空间的变化进行缩放。您可以使用 Wrap Mode 和每个纹理的纹理类型属性来控制此设置。请参阅创建一个 Nine Patch Image 节点。

创建一个 Nine Patch Image 节点¶

要创建一个 Nine Patch Image 节点：

在第三方工具中，为 Nine Patch Image 节点的每个部分创建图像，并将每个图像保存在其自己的文件中。

您需要为以下对象创建图像：
- 角部（左上角、右上角、右下角和左下角）
- 面（顶面、右面、底面和左面）
- 居中 (Center)
在 Assets 的 Kanzi Studio 中，点击 Import Assets 并导入您想在 Nine Patch Image 节点中使用的所有图像。
在 Node Tree 按 Alt 并右键单击中，找到您要创建 Nine Patch Image 节点的节点并选择 Nine Patch Image。

您只能在 3D 节点中创建 3D 节点，例如 Scene 节点，并且只能在 2D 节点中创建 2D 节点。
在 Properties 中，将 Nine Patch Image 属性设置为您要用于 Nine Patch Image 节点每个部分的图像：
- Top-Left Image 到左上角的纹理。
- Top Image 到顶部边框的纹理。
- 将 Top-Right Image 到右上角的纹理。
- Left Image 到左边框的纹理。
- Center Image 到中心的纹理。
- 将 Right Image 到右边框的纹理。
- 将 Bottom-Left Image 到左下角的纹理。
- 将 Bottom Image 到底部边框的纹理。
- Bottom-Right Image 到右下角的纹理。

（可选）您可以控制 Nine Patch Image 节点如何显示顶部、右侧、底部和左侧纹理：

在 Library > Materials and Textures > Textures 中，选择 Nine Patch Image 节点使用的每个纹理，并为每个纹理设置您要使用的 Wrap Mode 属性。
在 Node Tree 中选择 Nine Patch Image 节点，并在 Properties 中为您要控制的纹理设置纹理类型（Stretch Type Top、Stretch Type Bottom、Stretch Type Left、Stretch Type Right、Stretch Type Center）。

Wrap Mode 属性值	纹理拉伸 (Texture Stretch) 属性值	描述 (Description)
Clamp	Stretch	默认值。缩放纹理以填充 Nine Patch Image 的角纹理之间的空间。
Clamp	Wrap	当 Nine Patch Image 的角落纹理之间的空间宽度或高度超过所选纹理的宽度或高度时，扩展所选纹理的最后一列或一行像素。
Repeat	Stretch	缩放纹理，以填充 Nine Patch Image 的角落纹理之间的空间。
Repeat	Wrap	当 Nine Patch Image 的角纹理之间的空间的宽度或高度超过所选纹理的宽度或高度时，平铺纹理。

（可选）对于 Nine Patch Image 中的每个图像，您可以设置最适合您的应用程序的目标格式。请参阅设置图像的目标格式。

设置图像的目标格式¶

当您将项目导出为 kzb 文件时，Kanzi Studio 使用原始图像的格式读取项目中的图像，并根据您为每个图像设置的 Target Format 属性的格式将图像写入 kzb 文件。

如果原始图像的文件格式与您在 Target Format 属性中选择的格式相同，Kanzi Studio 在将图像写入 kzb 文件时不会修改图像，条件如下：

Premultiply Alpha 被禁用，或者不需要对 alpha 通道进行预乘。

要更改此设置，在 Project > Properties 中使用 Premultiply Alpha 属性。您可以在要使用不同设置的图像文件的属性中覆盖此值。
Generate Mipmaps 已禁用。

您可以在每个图像文件中设置 Generate Mipmaps 属性的值。
Round up Image Dimensions to Nearest Power of Two 属性已禁用。

您可以在 Project > Properties 中设置 Round up Image Dimensions to Nearest Power of Two 属性的值。

当您启用 Round up Image Dimensions to Nearest Power of Two 属性时，Kanzi Studio 会在 kzb 文件导出期间将项目中图像的宽度和高度向上舍入到最接近的二次幂。例如，Kanzi Studio 会将大小为 40 x 30 像素的图像以 64 x 32 像素的大小导出到 kzb 文件中。

如果您的图像是 JPEG 或 PNG 格式，并且您不希望 Kanzi Studio 修改其导出到 kzb 文件的图像，请在图像 Properties 中启用 Use Original Image 属性。

../../_images/use-original-image-enabled.png

要设置图像目标格式：

在 Library > Resource Files > Images 中选择您要设置目标格式的图像。
在 Properties 中，将 Target Format 属性设置为您要在 Kanzi 应用程序中使用的图像格式。

您选择的格式很重要，因为这会影响 kzb 文件的大小以及您的 Kanzi 应用程序加载图像时的加载时间。确保您的目标设备支持您为图像选择的目标格式。请参阅图像和纹理最佳实践和压缩纹理。
如果您在上一步中选择的图像格式支持压缩，请配置要使用的压缩方案。请参阅压缩纹理。
对于支持 sRGB 的图像格式：
- 如果图像包含 sRGB 颜色信息，请将 sRGB Content 属性设置为启用。这是默认设置。
  
  如果您禁用包含 sRGB 颜色信息的图像的 sRGB Content 属性，Kanzi 渲染使用该图像的纹理时可能会比预期更亮。
- 如果图像包含非颜色信息，例如法线、粗糙度或遮挡贴图，请将 sRGB Content 属性设置为禁用。
  
  包含非颜色信息的纹理以线性格式存储。通过禁用 sRGB Content 属性，您将 Kanzi 设置为直接将图像数据传递给着色器，而不执行颜色空间转换。
如果您希望 Kanzi 在中预乘 alpha 通道：
- 线性颜色空间，将 Linear Premultiply 属性设置为启用。
  
  这是默认值，并在 sRGB 图像中产生最少的伪影。
- 图像的色彩空间，通常为 sRGB，将 Linear Premultiply 属性设置为禁用。
  
  这可以为为传统颜色工作流程创建的图像提供更好的结果。
请参阅在第三方工具中准备图像。

使用 PNG 压缩¶

在使用 PNG 压缩时，请记住，因为压缩的 PNG 图像不会以压缩格式进入 GPU，所以 PNG 压缩会影响 PNG 图像数据从 kzb 文件到设备内存的加载。

使用 PNG 压缩来存储和加载来自 kzb 文件的图像。为了提高应用程序的性能，请考虑使用一种图像格式，该格式可以由 Kanzi 直接压缩发送到设备 GPU。请参阅压缩纹理。

要使用 PNG 压缩：

在 Library 的 Kanzi Studio 中，选择 Resource Files > Images，然后选择您要应用压缩的图像。
在 Properties 中，将 Target Format 设置为 PNG。
在 Properties 中，将 PNG Compression Level 属性设置为您要对该图像使用的压缩：
- 要使用在 Project > Properties 中 PNG Compression Level 属性中设置的 PNG 压缩，Project default。
- No compression 不使用图像压缩。
- Best compression speed (zlib level 1) 创建了一个较大的文件，但压缩速度很快。
- Default (zlib level 6) 创建的文件较小，但压缩时间较长。这是 FreeImage 库的默认选项，Kanzi Studio 使用该库处理 PNG 图像。
- Best compression (zlib level 9) 创建的文件最小，但压缩所需时间最长。
小技巧

您可以在 Project > Properties 中以及每个图像文件的属性中设置 PNG Compression Level 属性的值。