### 文本控件(Text)

Guition 文本控件是 Guition 平台提供的一种界面元素，用于在串口屏上显示静态或动态文本内容。本节将介绍 Guition 文本控件可设置的属性值以及如何通过串口指令设置这些属性。

#### 可设置的属性值说明

Guition 文本控件的主要属性包括：

1.  **文本内容（txt）**：控件中要显示的文本内容。
2.  **文本颜色（color）**：文本的颜色，使用十六进制表示的颜色值。
3.  **背景颜色（bgcolor）**：文本的背景颜色，使用十六进制表示的颜色值。
4.  **背景透明度（bgopa）**：文本背景色的透明度，取值范围为 0 到 255。
5.  **文本透明度（opa）**：文本的透明度，取值范围为 0 到 255。
6.  **字体（font）**：文本所使用的字体，通常是一个数字，代表字体的索引或编号。
7.  **水平居中（xcen）**：控件中的文本是否水平居中，取值范围为 0、1、2，其中 0 表示左对齐，1 表示居中，2 表示右对齐。
8.  **X 坐标（x）**：控件左上角的 X 坐标值，即控件在屏幕上的水平位置。
9.  **Y 坐标（y）**：控件左上角的 Y 坐标值，即控件在屏幕上的垂直位置。
10. **宽度（w）**：控件的宽度，即控件在水平方向上的大小。
11. **高度（h）**：控件的高度，即控件在垂直方向上的大小。
12. **显示（vis）**：显示或隐藏控件，参数0为隐藏，1为显示。

#### 使用 JSON 格式通过串口指令设置属性值示例

以下是一个示例 JSON 格式的串口指令，用于设置 Guition 文本控件的属性值：

```json
{
    "id": "t0",
    "name": "you define",
    "prop": {
        "txt": "hello,world",
        "color": "#FF0000",
        "bgcolor": "#00FF00",
        "bgopa": 60,
        "opa": 100,
        "font": 0,
        "xcen": 0,
        "x": 200,
        "y": 100,
        "w": 150,
        "h": 50
    }
}

```

在这个示例中，我们设置了文本内容为 "hello,world"，文本颜色为红色，背景颜色为绿色，背景透明度为 60，文本透明度为 100，字体为索引为 0 的字体，水平居中为否，位置为 (200, 100)，宽度为 150，高度为 50。

当然，也可以分开设置每个属性值，下面是相关说明：

#### 1. 文本内容（txt）

*   **说明**：指定要在文本控件中显示的文本内容。
*   **示例代码**：

    ```json
    {
        "id": "t0",
        "prop": {
            "txt": "Hello, world!"
        }
    }

    ```
*   **示例说明**：以上示例将文本控件的内容设置为 "Hello, world!"。

#### 2. 文本颜色（color）

*   **说明**：设置文本的颜色。
*   **示例代码**：

    ```json
    {
        "id": "t0",
        "prop": {
            "color": "#FF0000" // 红色
        }
    }

    ```
*   **示例说明**：以上示例将文本控件的颜色设置为红色。

#### 3. 背景颜色（bgcolor）

*   **说明**：设置文本的背景颜色。
*   **示例代码**：

    ```json
    {
        "id": "t0",
        "prop": {
            "bgcolor": "#00FF00" // 绿色
        }
    }

    ```
*   **示例说明**：以上示例将文本控件的背景颜色设置为绿色。

#### 4. 背景透明度（bgopa）

*   **说明**：设置文本背景色的透明度，取值范围为 0 到 255，其中 0 表示完全透明，255 表示完全不透明。
*   **示例代码**：

    ```json
    {
        "id": "t0",
        "prop": {
            "bgopa": 128 // 半透明
        }
    }

    ```
*   **示例说明**：以上示例将文本控件的背景透明度设置为半透明，取值为 128。

#### 5. 文本透明度（opa）

*   **说明**：设置文本的透明度，取值范围为 0 到 255，其中 0 表示完全透明，255 表示完全不透明。
*   **示例代码**：

    ```json
    {
        "id": "t0",
        "prop": {
            "opa": 192 // 半透明
        }
    }

    ```
*   **示例说明**：以上示例将文本控件的文本透明度设置为半透明，取值为 192。

#### 6. 字体（font）

*   **说明**：指定文本所使用的字体，通常是一个数字，代表字体的索引或编号。
*   **示例代码**：

    ```json
    {
        "id": "t0",
        "prop": {
            "font": 0 // 默认字体
        }
    }

    ```
*   **示例说明**：以上示例将文本控件的字体设置为默认字体。

#### 7. 水平居中（xcen）

*   **说明**：设置文本在水平方向上的对齐方式，取值范围为 0、1、2，其中 0 表示左对齐，1 表示居中，2 表示右对齐。
*   **示例代码**：

    ```json
    {
        "id": "t0",
        "prop": {
            "xcen": 1 // 居中对齐
        }
    }

    ```
*   **示例说明**：以上示例将文本控件的文本水平居中对齐。

#### 8. X 坐标（x）

*   **说明**：指定文本控件左上角的 X 坐标值，即控件在屏幕上的水平位置。
*   **示例代码**：

    ```json
    {
        "id": "t0",
        "prop": {
            "x": 200 // X 坐标为 200
        }
    }

    ```
*   **示例说明**：以上示例将文本控件的 X 坐标设置为 200。

#### 9. Y 坐标（y）

*   **说明**：指定文本控件左上角的 Y 坐标值，即控件在屏幕上的垂直位置。
*   **示例代码**：

    ```json
    {
        "id": "t0",
        "prop": {
            "y": 100 // Y 坐标为 100
        }
    }

    ```
*   **示例说明**：以上示例将文本控件的 Y 坐标设置为 100。

#### 10. 宽度（w）

*   **说明**：指定文本控件的宽度，即控件在水平方向上的大小。
*   **示例代码**：

    ```json
    {
        "id": "t0",
        "prop": {
            "w": 150 // 宽度为 150
        }
    }

    ```
*   **示例说明**：以上示例将文本控件的宽度设置为 150。

#### 11. 高度（h）

*   **说明**：指定文本控件的高度，即控件在垂直方向上的大小。
*   **示例代码**：

    ```json
    {
        "id": "t0",
        "prop": {
            "h": 50 // 高度为 50
        }
    }

    ```
*   **示例说明**：以上示例将文本控件的高度设置为 50。
*   
#### 12. 显示（vis）

*   **说明**：显示或隐藏控件，参数0为隐藏，1为显示。。
*   **示例代码**：

    ```json
    {
        "id": "t0",
        "prop": {
            "vis": 0
        }
    }

    ```
*   **示例说明**：以上示例将文本控件进行隐藏。

#### 设置单个属性的示例

#### 设置文本内容（txt）

*   **示例代码**：

    ```json
    {
        "id": "t0",
        "prop": {
            "txt": "Hello, world!"
        }
    }

    ```
*   **示例说明**：以上示例将文本控件的内容设置为 "Hello, world!"。

#### 设置多个属性的示例

#### 设置文本颜色和背景颜色

*   **示例代码**：

    ```json
    {
        "id": "t0",
        "prop": {
            "color": "#FF0000",     // 红色文本
            "bgcolor": "#00FF00"    // 绿色背景
        }
    }

    ```
*   **示例说明**：以上示例将文本控件的文本颜色设置为红色，背景颜色设置为绿色。

#### 设置水平居中和透明度

*   **示例代码**：

    ```json
    {
        "id": "t0",
        "prop": {
            "xcen": 1,    // 居中对齐
            "opa": 128    // 半透明
        }
    }

    ```
*   **示例说明**：以上示例将文本控件的文本水平居中对齐，并设置文本透明度为半透明。

通过以上示例，您可以了解如何单独设置一个属性或同时设置多个属性，以实现对 Guition 文本控件的灵活控制。

#### 指定汉字显示说明

为了在 Guition 文本控件中显示指定的汉字，需要进行以下步骤：

1.  **创建字库（font）**：首先，您需要创建一个包含待显示汉字的字库。字库是一种数据结构，用于存储文字的字形信息。
2.  **设置字库ID（font）**：在设置文本控件的字体属性时，需要指定使用的字库ID。通过这个ID，Guition 将从字库中加载对应的汉字。

#### 示例代码和说明

#### 创建字库

假设您已经创建了一个包含待显示汉字的字库，并为它分配了一个唯一的字库ID。

#### 设置字体和字库ID

下面是设置文本控件字体和字库ID的示例代码：

```json
{
    "id": "t0",
    "prop": {
        "font": 1     // 字库ID为 1
    }
}

```

通过以上示例，您可以将文本控件的字体设置为使用字库ID为 1 的字库，从而实现在 Guition 文本控件中显示指定的汉字。

需要注意的是，在创建字库时，确保字库中包含了您想要显示的所有汉字，以便在控件中正确显示。

关于字库将在后面的章节中说明