使用刷子¶

笔刷是用于描述如何绘制 2D 内容的图形对象。

使用 Brushes 设置2D节点的前景和背景的外观。例如，使用画笔可以定义 Text Block 2D 节点中文字的颜色，用图像图案填充2D节点的背景，或在2D内容上应用材质效果。

多数 2D 节点通常具有前景和背景。使用画刷，您可以更改两者的外观。

这些画笔在 Kanzi 中可用：

Color Brush 用于将 2D 节点填充为单色。

请参阅用单色填充 2D 节点。
Texture Brush 用于以纹理填充 2D 节点。

请参阅用纹理填充 2D 节点。
Material Brush 用材质填充 2D 节点。

请参阅用材质填充 2D 节点。

Kanzi Studio 将画笔存储在 Library > Materials and Textures > Brushes 中。

例如，使用笔刷，您可以：

设置2D文本的颜色。请参阅设置2D文本节点中文字的颜色。
定义笔刷在不同应用程序状态下的外观。请参阅控制笔刷外观。
为2D节点创建后期处理效果。请参阅应用自定义渲染到 2D 节点。

用单色填充 2D 节点¶

使用 Color Brush 为 2D 节点填充单色。

要用单色填充 2D 节点：

在 Library 按 Alt 并右键单击 Materials and Textures 中，选择 Color Brush，并命名画笔。
在 Node Tree 中选择您要用创建的画笔填充的2D节点，在 Properties 中添加 Background Brush 或 Foreground Brush 属性，并选择您在第一步中创建的画笔。

例如，创建一个 Button 2D 节点，在 Properties 中添加 Background Brush 属性，并将其设置为您在第一步中创建的画笔。
在 Properties 中，点击您在上一步中添加的属性旁边的，并设置您在上一步中创建的颜色画笔的颜色。

在 Preview 中，您可以看到您创建的 Color Brush 填充了您设置属性的节点。

小技巧

要快速编辑画笔，请在 Properties 中，Background Brush 或 Foreground Brush 属性旁边点击并编辑画笔。

用纹理填充 2D 节点¶

使用 Texture Brush 以纹理填充 2D 节点。

要使用纹理填充 2D 节点：

在 Library 按 Alt 并右键单击 Materials and Textures 中，选择 Texture Brush，并命名画笔。
在 Node Tree 中选择您要用创建的画笔填充的2D节点，在 Properties 中添加 Background Brush 或 Foreground Brush 属性，并选择您在第一步中创建的画笔。

例如，创建一个 Grid Layout 2D 节点，在 Properties 中添加 Background Brush 属性，并将其设置为您在第一步中创建的画笔。
在 Properties 中，单击您在上一步中添加的属性旁边的以转到该属性使用的画笔，设置您希望此纹理画笔使用的纹理，并调整 Texture Brush 如何使用该纹理：
- Brush Modulate Color 设置画笔的调制颜色。
- Brush Horizontal Tiling 影响纹理坐标的缩放，以设置纹理的水平平铺。
- Brush Vertical Tiling 影响纹理坐标的缩放以设置纹理的垂直平铺。
- Brush Texture 设置画笔的纹理。

用材质填充 2D 节点¶

使用 Material Brush 将 2D 节点填充为材质。

要用材质填充 2D 节点：

在 Library 按 Alt 并右键单击 Materials and Textures 中，选择 Material Brush，并命名画笔。
在 Properties 中，将 Material 属性设置为您要用于填充 2D 节点的材质。

如果您的工程中没有任何材质，请创建一个材质。请参阅创建材质。
在 Node Tree 中选择您要用创建的画笔填充的2D节点，在 Properties 中添加 Background Brush 或 Foreground Brush 属性，并选择您在第一步中创建的画笔。

例如，创建一个 Button 2D 节点，在 Properties 中添加 Background Brush 属性，并将其设置为您在第一步中创建的画笔。
要调整材质的外观，请在以下位置设置 Material 属性：
- Material Brush。
  
  例如，要更改 Material Brush 的材质的环境颜色、纹理和混合，请添加并设置 Ambient Color、Texture 和 Blend Mode 属性。
- 使用 Material Brush 的节点。
  
  例如，要更改节点材质的环境颜色、纹理和混合，请在该节点中添加并设置 Ambient Color、Texture 和 Blend Mode 属性。

设置2D文本节点中文字的颜色¶

要设置 Text Block 2D 或 Text Box 2D 节点中文本的颜色：

在 Node Tree 中创建或选择一个 Text Block 2D 或 Text Box 2D 节点。
在 Properties 中添加 Foreground Brush 属性。
将 Foreground Brush 属性设置为现有的 Color Brush 或选择 + Color Brush，命名画笔，单击属性旁边的，并设置您创建的 Color Brush 的颜色。

小技巧

要快速编辑画笔，请在 Properties 中，Background Brush 或 Foreground Brush 属性旁边点击并编辑画笔。

控制笔刷外观¶

您可以定义画笔在不同应用程序状态下的外观。例如，当您使用画笔填充 Button 2D 节点时，可以在用户按下按钮时更改画笔的外观。

要控制笔刷外观，创建状态机，它可在使用笔刷的节点中设置笔刷的属性。

要控制笔刷的外观：

创建笔刷并用它填充 2D 节点。

例如，创建一个纹理画笔，并将 Button 2D 节点的 Background Brush 属性设置为您创建的纹理画笔。请参阅用纹理填充 2D 节点。
创建状态机，您可用它控制在第一步中创建的笔刷外观。

例如：
1. 为 Button 2D 节点创建一个状态管理器，该管理器具有两个名为 Released 和 Pressed 的状态，并将状态管理器设置为使用 Button > Is Down 控制器属性。请参阅使用状态机设置按钮的状态。
2. 在 Released 和 Pressed 状态下设置画笔的外观。
  
  例如：在 Properties 中，靠近 Background Brush 属性，点击，设置 Brush Modulate Color 属性，并在 State Tools 中，在 Pressed 状态下点击，将属性值保存到 Pressed 状态。

现在，当您在 Preview 中与节点交互时，Kanzi 会更改您创建的画笔的外观。

应用自定义渲染到 2D 节点¶

应用自定义渲染到 2D 节点，以创建后处理效果。

例如，您可以将 2D 节点中的颜色图像转换为灰度。

要对2D节点应用自定义渲染，使用 Composition Brush 属性将节点与 Material Brush 一起组合到屏幕上，并启用 Force Composition 属性。

要应用自定义渲染到 2D 节点：

创建您要应用自定义渲染的材质。

例如，要创建一个用于将颜色转换为灰度的材质：

在 Library 中，按 Alt 并右键单击 Materials and Textures 并选择 Material Type。Kanzi Studio 创建一种材质类型和使用该材质类型的材质。

在 Library > Materials and Textures > Material Types 中，展开您创建的材质类型。双击 Vertex Shader 在 Shader Source Editor 中打开它，将现有的着色器代码替换为此代码，并保存着色器。

#version 310 es

in vec3 kzPosition;
in vec2 kzTextureCoordinate0;
uniform highp mat4 kzProjectionCameraWorldMatrix;

out mediump vec2 vTexCoord;

void main()
{
    precision mediump float;
    vTexCoord = kzTextureCoordinate0;
    gl_Position = kzProjectionCameraWorldMatrix * vec4(kzPosition.xyz, 1.0);
}

打开 Fragment Shader，将现有的着色器代码替换为此步骤中的代码，并保存着色器。

在着色器中，使用这些 Kanzi 默认 uniform：

ContentTexture 用于定义渲染节点在渲染时提供的纹理。
RenderOpacity 用于定义渲染节点的不透明度。

请参阅着色器 uniform。

#version 310 es

uniform sampler2D ContentTexture;
in mediump vec2 vTexCoord;
uniform lowp float RenderOpacity;
layout(location = 0) out vec4 fragColor;

void main()
{
    precision mediump float;
    // Use this algorithm to convert the colors in the texture used by
    // the 2D node to grayscale.
    // To integrate to the Kanzi rendering pipeline, the shader must output
    // premultiplied alpha.
    vec4 color = texture(ContentTexture, vTexCoord);
    float grayscale = dot(color.rgb, vec3(0.21, 0.72, 0.07));
    float alpha = color.a * RenderOpacity;
    vec3 premultipliedColor = vec3(grayscale) * alpha;
    fragColor = vec4(premultipliedColor, alpha);
}

在 Library 中，按 Alt 并右键单击 Materials and Textures 并选择 Material Brush。在 Properties 中，将 Material 属性设置为您在上一步中创建的材质。
在 Node Tree 中，创建或选择一个 2D 节点，以应用您创建的材质。例如，创建一个 Stack Layout 2D 节点。在 Stack Layout 2D 节点中，创建一个 Image 节点。
在 Properties 中，添加并设置：
- 将 Brush Composition Brush 到使用您要应用于该节点的材质的材质画笔。
- Node 2D > Force Composition 以启用
- （可选） Render Target > Multisample Level 到您想要应用于内容的抗锯齿采样数量。
- （可选） Node > Opacity 来控制节点的透明度。