NImageView
NImageView组件是UI系统中的基础组件之一，广泛用于显示静态或动态的图像。它提供了丰富的属性来定制图像的显示方式，如颜色调整、填充效果、比例保持等。此外，NImageView 还可以与其他 UI 元素结合，创建出各种动态、交互式的用户界面元素，如进度条、按钮、动态背景等。
| 接口名称 | 返回值 | 接口含义 |
|---|---|---|
| SetTexture | void | 设置纹理 |
| GetTexture | NTexturePtr | 获取纹理 |
| GetImageFileName | std::string | 获取图片资源的文件路径 |
| SetRenderTexture | void | 设置RT资源对象 |
| LoadFromFile | void | 通过文件路径加载要显示的图片资源 |
| LoadFromMemoryData | void | 从内存数据加载要显示的图片资源 |
| SetFillAmount | void | 设置纹理填充比例 |
| GetFillAmount | float | 获取纹理填充比例 |
| SetImageType | void | 设置纹理的显示类型 |
| GetImageType | EImageType | 获取纹理的显示类型 |
| SetFillMethod | void | 设置图片的填充方式 |
| GetFillMethod | EFillMethod | 获取图片的填充方式 |
| SetOriginHorizontal | void | 设置图片横向填充方式 |
| GetOriginHorizontal | EOriginHorizontal | 获取图片横向填充类型 |
| SetOriginVertical | void | 设置图片竖向填充方式 |
| GetOriginVertical | EOriginVertical | 获取图片竖向填充类型 |
| SetOrigin90 | void | 设置图片90度填充方式 |
| GetOrigin90 | EOrigin90 | 获取图片90度填充类型 |
| SetOrigin180 | void | 设置图片180度填充方式 |
| GetOrigin180 | EOrigin180 | 获取图片180度填充类型 |
| SetOrigin360 | void | 设置图片360度填充方式 |
| GetOrigin360 | EOrigin360 | 获取图片360度填充类型 |
| SetMaterial | void | 设置图片的材质 |
| GetMaterial | NMaterialPtr | 获取图片组件的材质 |
| GetMaterialCount | uint32_t | 获取图片组件材质数量 |
| SetSharedMaterial | void | 设置共享材质 |
| GetSharedMaterial | NMaterialPtr | 获取共享材质 |
| SetColor | void | 设置图片混合的颜色 |
| GetColor | Color | 获取图片混合的颜色 |
| SetAlpha | void | 设置图片的透明度 |
| GetAlpha | float | 获取图片的透明度 |
设置纹理
接口：
void SetTexture(NTexturePtr texture);
参数：
texture：纹理共享指针
描述：
设置图片要显示的纹理。
代码示例：
void NImageViewTest::Start()
{
auto imageViewAct=GetNActor();//获取场景中图片控件
auto imageviewComp=imageViewAct->GetComponent<NImageView>();
ImageLoadConfig config;
config.ASyncLoad = false;
NTexturePtr texture=NResources::LoadTextureFromFile("Assets/Textures/Skybox.png",nullptr, config);
imageviewComp->SetTexture(texture);
}获取纹理
接口：
NTexturePtr GetTexture() const;
返回：
纹理的共享指针。
描述：
获取图片控件显示的纹理指针。 代码示例：
void NImageViewTest::Start()
{
auto imageViewAct=GetNActor();
auto imageviewComp=imageViewAct->GetComponent<NImageView>();
auto texture=imageviewComp->GetTexture();
}获取图片资源的文件路径
接口：
const std::string& GetImageFileName() const; 返回：图片资源文件路径。 描述：获取图片资源文件路径。 代码示例：
void NImageViewTest::Start()
{
auto imageViewAct=GetNActor();
auto imageviewComp=imageViewAct->GetComponent<NImageView>();
auto filename=imageviewComp->GetImageFileName();
}设置RT资源
接口：
void SetRenderTexture(const NRenderTexturePtr texture);
参数：
texture：离屏渲染纹理指针
描述：
设置离屏渲染纹理指针，图片组件会实时显示离屏渲染纹理内容。 代码示例：
void NImageViewTest::Start()
{
NActorPtr actor = NActorManager::CreateCamera();
NCameraPtr camera = actor->GetCamera();
camera->SetDepth(0);
camera->SetClearFlags(EClearFlags::CF_Skybox);
auto screensize = NApplication::GetScreenSize();
auto renderTex = NResources::CreateRenderTexture("Image_Test_RT", screensize.x, screensize.y);
camera->SetTargetTexture(renderTex);
auto imageViewAct = GetNActor();
auto imageviewComp = imageViewAct->GetComponent<NImageView>();
imageviewComp->SetRenderTexture(renderTex);
}通过文件路径加载纹理资源
接口：
void LoadFromFile(const std::string& fileName, RESOURCE_CALLBACK callback = nullptr, ImageLoadConfig config = {});
参数：
| 参数 | 说明 |
|---|---|
| fileName | 图片资源相对路径 |
| callback | 异步加载回调函数 |
| config | 加载图片生成纹理的配置 |
| 描述： | |
| 通过文件路径进行图片资源加载并显示，可以通过ImageLoadConfig配置同步还是异步加载，以及设置mipmap等级，颜色空间等配置。 | |
| 代码示例： |
void NImageViewTest::Start()
{
auto imageViewAct=GetNActor();
auto imageviewComp=imageViewAct->GetComponent<NImageView>();
ImageLoadConfig config;
config.ASyncLoad = false;
imageviewComp->LoadFromFile("Assets/Textures/Skybox.png",nullptr,config);
}通过内存资源数据加载纹理
接口：
void LoadFromMemoryData(const std::string textureName, ETextureSuffix suffix, NResourceMemoryDataPtr memoryData, RESOURCE_CALLBACK callback = nullptr, ImageLoadConfig config = {});
参数：
| 参数 | 说明 |
|---|---|
| textureName | 纹理名称 |
| suffix | 资源类型后缀，如png/jpg/dds等 |
| memoryData | 存储纹理原始数据的指针 |
| callback | 异步回调函数 |
| config | 加载图片生成纹理的配置 |
| 描述： | |
| 此方法可以通过内存中图片原始数据，生成纹理并进行显示。 | |
| 代码示例： |
void NImageViewTest::Start()
{
auto imageViewAct = GetNActor();
auto imageviewComp = imageViewAct->GetComponent<NImageView>();
ImageLoadConfig config;
config.ASyncLoad = false;
auto data = NS_NEW(NResourceMemoryData)();
auto path=NApplication::ToAbsoluteAssetsPath("Assets/Textures/ns_app_icon.png");
auto file = NFile::OpenFile(path, OpenMode::OM_RB);
if (file)
{
auto size = file->GetFileLength();
uint8_t* pBuffer = NS_NEW_ARRAY(uint8_t, size);
file->ReadBuffer(pBuffer, size, 1);
data->m_Data = (char*)pBuffer;
data->m_DateBeginPosition = 0;
data->m_DataSize = size;
imageviewComp->LoadFromMemoryData("Test_texName", ETextureSuffix::ETextureSuffix_PNG, data, nullptr, config);
}
}设置和获取图片填充比例
接口：
void SetFillAmount(float value); float GetFillAmount();
参数：
value：设置填充比例值，值范围
描述：
设置图片的填充比例只有在填充模式下生效。通过此功能可以实现进度条的效果。 代码示例：
void NImageViewTest::Start()
{
auto imageViewAct=GetNActor();
auto imageviewComp=imageViewAct->GetComponent<NImageView>();
imageviewComp->SetImageType(EImageType::ET_Filled);
imageviewComp->SetFillAmount(0.5);
imageviewComp->GetFillAmount();
}设置和获取图片的显示模式
接口：
void SetImageType(EImageType type);
EImageType GetImageType();
参数：
type：图片的显示模式，包含简单的模式，瓦片模式，以及填充模式
描述：
通过设置图片显示模式，可以实现一些复杂的效果，例如长条形进度条，圆形进度条，以及重复平铺效果等。
代码示例：
void NImageViewTest::Start()
{
auto imageViewAct=GetNActor();
auto imageviewComp=imageViewAct->GetComponent<NImageView>();
imageviewComp->SetImageType(EImageType::ET_Filled);
}设置和获取图片填充方向
接口：
void SetOriginHorizontal(EOriginHorizontal origin);
EOriginHorizontal GetOriginHorizontal();
void SetOriginVertical(EOriginVertical origin);
EOriginVertical GetOriginVertical();
void SetOrigin90(EOrigin90 origin);
EOrigin90 GetOrigin90();
void SetOrigin180(EOrigin180 origin);
EOrigin180 GetOrigin180();
void SetOrigin360(EOrigin360 origin);
EOrigin360 GetOrigin360();
参数：
| 参数 | 说明 |
|---|---|
| EOriginHorizontal | 横向填充方向，包含左，右 |
| EOriginVertical | 竖向填充方向，包含上，下 |
| EOrigin90 | 90度旋转填充方向 |
| EOrigin180 | 180度旋转填充方向 |
| EOrigin360 | 360度旋转填充方向 |
| 描述： | |
| 通过设置图片填充方向，可以实现复杂的填充效果，通过此功能可以实现各种进度条的效果。 | |
| 代码示例： |
void NImageViewTest::Start()
{
auto imageViewAct=GetNActor();
auto imageviewComp=imageViewAct->GetComponent<NImageView>();
imageviewComp->SetImageType(EImageType::ET_Filled);
imageviewComp->SetFillMethod(EFillMethod::Radial180);
imageviewComp->SetOrigin180(EOrigin180::Left);
imageviewComp->SetFillAmount(0.5);
}设置和获取材质实例以及共享材质
接口：
void SetMaterial(uint32_t id, NMaterialPtr mat);
NMaterialPtr GetMaterial(uint32_t id = 0);
uint32_t GetMaterialCount();
void SetSharedMaterial(uint32_t id, NMaterialPtr mat);
NMaterialPtr GetSharedMaterial(uint32_t id = 0);
void SetMaterial(NMaterialPtr mat);
void SetSharedMaterial(NMaterialPtr mat);
参数：
| 参数 | 说明 |
|---|---|
| id | 材质的索引 |
| NMaterialPtr | 材质的共享指针 |
描述：通过id可以指定要修改的材质，在物体渲染时，会使用新的材质进行渲染，材质实例属性的修改不会影响共享材质的属性，共享材质属性修改会影响所有使用此材质的属性。
代码示例：
void NImageViewTest::Start()
{
auto imageViewAct=GetNActor();
auto imageviewComp=imageViewAct->GetComponent<NImageView>();
auto blinphongMat=NResources::CreateMaterial("material_test_name", EMaterialTemplate::MT_Unlit);
imageviewComp->SetMaterial(0, blinphongMat);
}设置和获取图片的颜色以及透明度
接口：
void SetColor(Color color);
Color GetColor();
void SetAlpha(float alpha);
float GetAlpha();
参数：
| 参数 | 说明 |
|---|---|
| color | 设置的颜色值 |
| alpha | 设置的透明度值，范围[0,1] |
描述：
通过上面接口可以修改图片混合的颜色，也可以设置图片显示的透明度，来达到一些渲染效果。
代码示例：
void NImageViewTest::Start()
{
auto imageViewAct=GetNActor();
auto imageviewComp=imageViewAct->GetComponent<NImageView>();
imageviewComp->SetColor(Color::Blue);
imageviewComp->SetAlpha(0.5);
}