image_draw_type.md

AWTK 中的图片显示方式

一、显示方式

AWTK 提供了多种图片显示方式：

• 居中显示 (center)。将图片按原大小显示在目标矩形的中央。
• 缩放显示 (scale)。将图片缩放至目标矩形的大小（不保证宽高成比例）。
• 自动缩放显示 (scale_auto)。将图片缩放至目标矩形的宽度或高度（选取最小的比例），并居中显示。
• 宽度缩放显示 (scale_w)。将图片缩放至目标矩形的宽度，高度按此比例进行缩放，超出不部分不显示。
• 高度缩放显示 (scale_h)。将图片缩放至目标矩形的高度，宽度按此比例进行缩放，超出不部分不显示。
• 平铺显示 (repeat)。
• 水平方向平铺显示，垂直方向缩放 (repeat_x)。
• 垂直方向平铺显示，水平方向缩放 (repeat_y)。
• 9 宫格显示 (patch9)。将图片分成等大小的 9 块，4 个角按原大小显示在目标矩形的 4 个角，左右上下和中间 5 块分别缩放显示在对应的目标区域。
• 水平方向 3 宫格显示，垂直方向居中 (patch3_x)。将图片在水平方向上分成等大小的 3 块，左右两块按原大小显示在目标矩形的左右，中间一块缩放显示在目标区域中间剩余部分。
• 垂直方向 3 宫格显示，水平方向居中 (patch3_y)。将图片在垂直方向上分成等大小的 3 块，上下两块按原大小显示在目标矩形的上下，中间一块缩放显示在目标区域中间剩余部分。
• 水平方向 3 宫格显示，垂直方向缩放 (patch3_x_scale_y)。将图片在水平方向上分成等大小的 3 块，左右两块按原大小显示在目标矩形的左右，中间一块缩放显示在目标区域中间剩余部分。
• 垂直方向 3 宫格显示，水平方向缩放 (patch3_y_scale_x)。将图片在垂直方向上分成等大小的 3 块，上下两块按原大小显示在目标矩形的上下，中间一块缩放显示在目标区域中间剩余部分。

二、在程序中使用（仅限于 image 控件）

image_set_draw_type(img, IMAGE_DRAW_CENTER);

三、在 XML 界面描述文件中使用（仅限于 image 控件）

<window name="main" x="0" y="0" w="320" h="480">
  <image style="border" x="0" y="0" w="50%" h="50%" image="earth" draw_type="center"/>
  <image style="border" x="0" y="50%" w="100%" h="50%" image="earth" draw_type="repeat"/>
</window>

四、在窗体样式中使用（适用于所有控件的背景）

<progress_bar>
  <style name="img_v"  bg_image="slider_v_bg" fg_image="slider_v_fg" text_color="black" 
    bg_image_draw_type="patch3_y" fg_image_draw_type="patch3_y">
    <normal/>
  </style>
</progress_bar>

五、查看实际效果

images.xml 展示了各种绘制方式。

./bin/preview_ui demos/assets/raw/ui/images.xml