图片控件
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
用途：显示图片。显示的图片可以通过上位机编辑脚本或单片机发送指令变更。

图片控件可以使用按钮类控件替代，图片控件相对属性少，方便使用。

属性
---------------------------------
.. image:: image/图片/图片控件属性.png 
    :align: center
    :alt: 图片控件属性

|

**基础属性 :**  参考控件概念- :ref:`基础属性`

**坐标属性 :**  参考控件概念- :ref:`坐标属性`

    **注意：** 图片控件的宽高自适应图片的大小，修改无效。


**加载属性 :**  参考控件概念- :ref:`加载属性`
  
**特有属性 :**  
  
.. image:: image/图片/图片控件特有属性.png 
    :align: center
    :alt: 图片控件特有属性

|

    + 显示模式(mode)：0-自动(控件大小自动等于图片大小) 1-裁剪(图片大于控件时只显示控件的大小)(只读)

    - 图片ID(pic)：图片id,范围0-65535,65535表示无(读写)

---------------------------------

事件
---------------------------------

**弹起事件：** 控件按下且弹起后执行

**按下事件：** 控件按下后执行

---------------------------------

功能演示
---------------------------------

`点击下载演示工程 <http://www.openedv.com/ATK-Prod/ATK-HMI/file_download/wid_demo/project(wid_demo).zip>`_

.. image:: image/图片/图片功能演示.png 
    :align: center
    :alt: 图片功能演示

|

.. tip:: 
    把工程配置的启动页面(pid)改为当前页面ID可以立即显示此页面。

|

按钮切换图片
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

.. image:: image/图片/图片切换.png 
    :align: center
    :alt: 图片切换

|

- 功能：点击b2按钮切换显示的图片,ID范围：41-46。
- 实现原理：在b2按钮的 ``弹起事件`` 中编写

    ::

        img1.pic++;
        if(img1.pic >= 46)  // 使显示图片的ID在41-46内循环
        {
            img1.pic = 41;
        }

|

切图模式
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

.. image:: image/图片/切图模式.png 
    :align: center
    :alt: 切图模式

|

- 功能：移动图片可以看到图片控件截取了一张全屏图片的一部分来显示
- 实现原理：将图片控件显示模式设为切图即可。

|
|
|
|
|
|