跳转至

图像控件 (SImageWnd)

图像控件用于显示图片资源，支持多种图片格式，提供多种缩放和适应模式。它是展示图像内容的基础控件。

基本信息

  • 类名：SImageWnd
  • 控件标签：img
  • 基类：SWindow
  • 功能：提供图像显示功能

属性说明

基本属性

属性名 类型 默认值 说明
skin string - 图片皮肤名称
src string - 图片文件路径
iconIndex int 0 图标索引(用于图标资源)
tile bool 0 是否平铺显示
stretch bool 0 是否拉伸显示
fillType string stretch 填充类型(stretch/center/fit/fitWidth/fitHeight)
rotate int 0 旋转角度(0/90/180/270)
alpha int 255 透明度(0-255)

动画属性

属性名 类型 默认值 说明
animate bool 0 是否启用动画
frameInterval int 50 帧间隔(毫秒)
autoStart bool 1 是否自动开始动画
loop bool 1 是否循环播放

使用示例

基本图像显示

<img name="imgBasic" 
     pos="10,10,210,210" 
     skin="skin_image"/>

从图标资源显示图像

<img name="imgIcon" 
     pos="220,10,320,110" 
     skin="skin_icons"
     iconIndex="0"/>

保持宽高比的图像

<img name="imgAspect" 
     pos="10,220,210,320" 
     skin="skin_image"
     keepAspect="1"/>

平铺显示图像

<img name="imgTile" 
     pos="220,220,420,320" 
     skin="skin_pattern"
     tile="2"/>

带透明度的图像

<img name="imgAlpha" 
     pos="10,330,210,430" 
     skin="skin_image"
     alpha="128"/>

图像操作

代码操作示例

void ImageOperations()
{
    SImageWnd *pImg = 
        FindChildByName2<SImageWnd>(L"imgDemo");
    if(pImg) {
        // 设置图片
        pImg->SetSkin(GETSKIN(L"new_skin", 
                             SKIN_IMG_FRAME));

        // 从文件加载
        pImg->SetImage(L"image.png");

        // 设置填充方式
        pImg->SetFillType(ImageFillType::Fit);

        // 设置旋转角度
        pImg->SetRotate(90);

        // 设置透明度
        pImg->SetAlpha(200);

        // 开始动画
        pImg->StartAnim();

        // 停止动画
        pImg->StopAnim();
    }
}

代码操作

// 查找图像控件
SImageWnd *pImage = FindChildByName2<SImageWnd>(L"imgBasic");

// 设置皮肤
pImage->SetAttribute(L"skin", L"skin_new_image");

// 设置图标索引
pImage->SetIconIndex(1);

// 设置透明度
pImage->SetAttribute(L"alpha", L"200");

// 设置绘制模式
pImage->SetAttribute(L"tile", L"1");  // 原样显示

// 设置是否保持宽高比
pImage->SetAttribute(L"keepAspect", L"1");

事件处理

图像控件支持以下事件：

事件名 EventID 说明
EVT_MOUSE_HOVER EventMouse::EventID 鼠标悬停事件
EVT_MOUSE_LEAVE EventMouse::EventID 鼠标离开事件
EVT_MOUSE_CLICK EventMouse::EventID 鼠标点击事件
EVT_SETFOCUS EventSetFocus::EventID 获得焦点事件
EVT_KILLFOCUS EventKillFocus::EventID 失去焦点事件 
// 事件处理示例
EVENT_MAP_BEGIN()
    EVENT_NAME_HANDLER(L"imgBasic", EventMouse::EventID, OnImageClick)
EVENT_MAP_END()

void OnImageClick(IEvtArgs *pEvt)
{
    EventMouse *pRealEvt = sobj_cast<EventMouse>(pEvt);
    if(pRealEvt->GetID() == EVT_MOUSE_CLICK)
    {
        // 处理图像点击
    }
}

样式定制

基本样式

<style>
    <class name="imgStyle"
           fillType="fit"
           alpha="255"/>
</style>

<img class="imgStyle"/>

动画样式

<style>
    <class name="animStyle"
           animate="1"
           frameInterval="50"
           autoStart="1"
           loop="1"/>
</style>

<img class="animStyle"/>

最佳实践

  1. 图像适应：根据显示需求选择合适的 tile 和 keepAspect 属性值
  2. 性能优化：对于重复使用的图案，使用 tile 设置为 2（平铺）以节省资源
  3. 视觉效果：通过 alpha 属性实现图像半透明效果
  4. 图标使用：使用 iconIndex 属性从图标集合中选择特定图标
  5. 皮肤管理：合理组织皮肤资源，便于维护和替换

常见问题

Q: 图像显示变形怎么办？

A: 设置 keepAspect 为 1 以保持图像原始宽高比。

Q: 图像显示不完整怎么办？

A: 检查控件尺寸是否足够，或调整 tile 属性值。

Q: 图像透明度不生效怎么办？

A: 确保 alpha 属性值在 0-255 范围内，0 为完全透明，255 为完全不透明。

相关控件