minigui-docs/programming-guide-zh/MiniGUIProgGuideAppendixB-zh.md

新控件集Skin渲染器图片规格

1 前言

• skin 的所有元素的类型都是文件名，该文件名对应的是加载到系统缓冲池中的图片(通过 LoadResource)。两者必须一致
• skin renderer 实际不保存文件名，只保存由这些文件名生成的 RES_KEY,然后通过 GetResource 获取图片
• 由于很多控件有 normal、press、highlight、diable 等等状态的区分，对一个控件而言，每一个状态都保存成一幅图片，对资源的保存和图片加载的过程都是很大的浪费，所以 mgncs 中 skin 渲染器沿用 minigui 中的图片使用方式，就是将相关联的多张图合成一张，绘制时扣取不同的部分使用，例如，对 button 图片,我们设计成五个部分的组合图片，当我们要绘制某一个状态的button时，就取这一部分的子图来使用：

• 图片的绘制方式有两种:
  1. 直接拉伸填充绘制: 这种方式不难理解，就是把资源图片按照绘制区域的大小以一定的比例进行放大来填充。
  2. 分段填充绘制: 这种方式会将取到的图片（或者子图）按照上、中、下或者左、中、右的方式分成三段，然后把两端单独填充，中间部分则循环使用用中间部分来进行填充，我们依然以 button 为例，如图

这种方式能较好得保留“圆角”等边界效果，使用这种方式填充的图片设计时要注意：

1. 左中右、上中下3段的分界线每个图片是不同的，下面会详细说明
2. 中间部分由于要循环使用，注意过渡平滑一些

2 公用图片属性

属性名	类型	说明
NCS_IMAGE_ARROWS	文件名	箭头图片
NCS_IMAGE_ARROWSHELL	文件名	箭头按钮图片

• 图片的规格
  • arrow 图片用于 skin 渲染器中箭头的绘制，由自上而下的 16 部分小图构成,每个小图都是一个正方形，内部的对应关系是
    • 0~3 : 向上的箭头的各个状态（0-普通、1-高亮、2-按下、3-禁止）
    • 4~7 : 向下的箭头的各个状态（4-普通、5-高亮、6-按下、7-禁止）
    • 8~11 : 向左的箭头的各个状态（8-普通、9-高亮、10-按下、11-禁止）
    • 12~15 : 向右的箭头的各个状态（12-普通、13-高亮、14-按下、15-禁止）
  • arrow_shell 图 spin 和 scroll 系列中，用于实现 arrow 按钮的效果，由自上而下的 4 部分小图构成,每个小图都是一个正方形，每一部分对应按钮的一种状态：
    • 0-普通
    • 1-高亮
    • 2-按下
    • 3-禁用
  • 另外，arrow 图一般是配合 arrow-shell 图使用的，使用时有叠加的处理，所以 arrow 周围的区域一般做成透明的。
  • 使用该图片采用 直接拉伸填充，注意图片合理设计。

3 mButton

属性名	类型	说明
NCS_IMAGE_PUSHBUTTON	文件名	push button 的图片

图片的规格

• 用于 skin 渲染器中 pushbutton 的绘制效果，图片由自上而下的5部分组成，每一部分都是一个长方形的 button，分别对应 pushbutton 的五种状态：
  • 0 - 普通
  • 1 - 高亮
  • 2 - 按下
  • 3 - 禁用
  • 4 - 三态按钮中的“半选”状态
• 绘制的时候，使用图片进行分段填充的，左右两端均为 6 个像素宽，中间一段宽度不限，注意图片的合理设计。

4 mCheckbutton

属性名	类型	说明
NCS_IMAGE_CHECKBUTTON	文件名	check button 的图片

图片的规格

• 用于 skin 渲染器的 checkbutton 的绘制渲染，图片由自上而下的 8 部分组成，每一部分都是一个长方形，分别对应 checkbutton 的 8 种状态：
  • 0~3:未选中时的普通、高亮、按下、禁用状态
  • 4~7:选中时的普通、高亮、按下、禁用状态
• 若图片大于绘制区域，会缩小图片进行绘制，否则采用直接用图片大小来填充，注意图片设计
• 示例

5 mRadiobutton

属性名	类型	说明
NCS_IMAGE_RADIOBUTTON	文件名	radio button 的图片

图片的规格与 checkbutton 相同

6 mListView

属性名	类型	说明
NCS_IMAGE_TREE	文件名	tree 中折叠/展开开关的图片
NCS_IMAGE_HEADER	文件名	表头部分的图片

图片的规格

• 用于实现树形控件中的折叠、展开按钮的渲染效果，图片由等份的上下两步分组成，上半部分是折叠的效果，下半部分是展开的效果
• 使用时，会直接以图片的大小来填充，不会拉伸，所以注意图片设计的尺寸，不要过大或过小
• 示例

7 mPropSheet

属性名	类型	说明
NCS_IMAGE_TAB	文件名	PropSheet Tab 页的图片

图片的规格

• 用于渲染 propsheet 页的 tab 效果，由自上而下的四部分组成，mgncs 中使用到的只有第一、三两部分，分别表示：
  • 0 - inactive 页的 tab 效果
  • 2 - active 页的 tab 效果
• 分段绘制，左、中、右分别占 3、x、4 个像素，注意图片的设计
• 示例

8 mProgressBar

属性名	类型	说明
NCS_IMAGE_PB_HCHUNK	文件名	水平 ProgressBar 的 chunk 图片
NCS_IMAGE_PB_VCHUNK	文件名	垂直 ProgressBar 的 chunk 图片
NCS_IMAGE_PB_HSLIDER	文件名	水平 ProgressBar 的 trackbar 图片
NCS_IMAGE_PB_VSLIDER	文件名	垂直 ProgressBar 的 trackba 图片

图片的规格

• h_chunk
  • 用于水平进度条的进度显示，使用上 block 风格的 progressbar 分块拉伸填充，smooth 风格直接拉伸填充
  • 图片设计上建议不要水平渐变
  • 示例

• v_chunk
  • 用于竖直进度条的进度显示，使用上 block 风格的 progressbar 分块拉伸填充，smoot h风格直接拉伸填充
  • 图片设计上建议不要竖直渐变
  • 示例

• h_slider 未使用
• h_slider 未使用

9 mTrackbar

属性名	类型	说明
NCS_IMAGE_TB_HSLIDER	文件名	水平 Trackbar 的 Slider 图片
NCS_IMAGE_TB_VSLIDER	文件名	垂直 Trackbar 的Slider 图片
NCS_IMAGE_TB_HTHUMB	文件名	水平 Trackbar 的Trackbar 图片
NCS_IMAGE_TB_VTHUMB	文件名	垂直 Trackbar 的 Trackbar 图片

图片的规格

• h_slider
  • 用于水平 trackbar 的滑轨渲染，图片作为整体来使用，
  • 使用时采用分段填充处理，左右两段各为两个像素宽,中间部分循环使用，图片设计注意。
  • 示例

• v_slider
  • 用于竖直 trackbar 的滑轨渲染，图片作为整体来使用，
  • 使用时采用分段填充处理，上下两段各为两个像素宽,中间部分循环使用，图片设计注意。
  • 示例

• h_thumb
  • 用于水平 trackbar 的滑块渲染，图片有自上而下均分的四部分组成，分别对应滑块的普通、高亮、按下、禁用四种状态使用
  • 图片使用时直接拉伸填充，注意图片设计
  • 示例

• v_thumb
  • 用于竖直 trackbar 的滑块渲染，图片有自上而下均分的四部分组成，分别对应滑块的普通、高亮、按下、禁用四种状态使用
  • 图片使用时直接拉伸填充，注意图片设计
  • 示例