显示图片
让我们学习如何在界面上显示图片。
设置背景图
最简单的方式是设置组件的 background-image 属性，LCUI 会自动加载图片并显示它。我们可以定义一个函数来负责设置背景图：
void image_view_load_file(ui_widget_t *w, const char *file)
{
char *url;
image_view_t *view = ui_widget_get_data(w, image_view_proto);
url = malloc(sizeof(char) * (strlen(file) + 10));
sprintf(url, "url(%s)", file);
ui_widget_set_style_string(view->refs.content, "background-image", url);
free(url);
}
这个函数将文件路径转换成 url() 格式的字符串，用 C 语言实现这种操作需要先根据路径长度分配合适的空间，然后调用 snprintf() 格式化字符串。得到字符串后，调用 ui_widget_set_style_string() 函数将它设置为图片区的 background-image 属性的值。
然后，修改 main.c 文件，在 main() 函数中调用该函数打开指定路径的图片文件。
int main(int argc, char **argv)
{
ui_widget_t *w;
lcui_init();
ui_register_image_view();
w = ui_create_widget("ImageView");
+ image_view_load_file("图片路径");
ui_root_append(w);
return lcui_main();
}
请将 "图片路径" 替换为图片文件的绝对路径，例如："E:\\workspace\\code\\kantu\\app\\dog.jpg"
编译并运行项目，你会看到这样的效果：
（图片）
集成控制器
现在还只是显示图片，我们需要将控制器集成到组件内，以便控制缩放比例、图片位置和尺寸。
首先，修改私有数据类型，增加控制器：
#include "image-view.tsx.h"
+ #include "image-controller.h
typedef struct image_view {
image_view_refs_t refs;
+ image_controller_t controller;
} image_view_t;
修改组件的初始化函数，增加控制器的初始化：
void image_view_init(ui_widget_t *w)
{
image_view_t *view;
view = ui_widget_add_data(w, image_view_proto, sizeof(image_view_t));
image_view_load_template(w, &view->refs);
+ image_controller_init(&view->controller);
}
修改组件的销毁函数，增加控制器的销毁操作：
void image_view_destroy(ui_widget_t *w)
{
+ image_view_t *view = ui_widget_get_data(w, image_view_proto);
+ image_controller_destroy(&view->controller);
}
修改文件加载函数，增加图片的加载事件处理，在图片加载完后重置缩放比例并更新图片尺寸：
+ void image_view_on_image_event(ui_image_event_t *e)
+ {
+ image_view_reset(e->data);
+ }
void image_view_load_file(ui_widget_t *w, const char *file)
{
char *url;
image_view_t *view = ui_widget_get_data(w, image_view_proto);
+ if (view->controller.image) {
+ ui_image_off_load(view->controller.image,
+ image_view_on_image_event, w);
+ }
+ image_controller_load_file(&view->controller, file);
+ ui_image_on_load(view->controller.image, image_view_on_image_event, w);
url = malloc(sizeof(char) * (strlen(file) + 10));
sprintf(url, "url(%s)", file);
ui_widget_set_style_string(view->refs.content, "background-image", url);
free(url);
}
在重置函数中，我们需要更新控制器的可视区域尺寸，重置缩放比例，之后更新界面样式。
void image_view_reset(ui_widget_t *w)
{
image_view_t *view = ui_widget_get_data(w, image_view_proto);
view->controller.width = view->refs.content->padding_box.width;
view->controller.height = view->refs.content->padding_box.height;
image_controller_reset_scale(&view->controller);
image_view_update(w);
}
在界面更新函数中，根据缩放比例计算出图片缩放后的尺寸，然后将其设置为 background-size 属性的值。除此之外，还得将控制器中记录的可视区域位置同步给 background-position-x 和 background-position-y 属性。
void image_view_update(ui_widget_t *w)
{
char size_str[64];
image_view_t *view = ui_widget_get_data(w, image_view_proto);
ui_image_t *image = view->controller.image;
snprintf(size_str, 31, "%gpx %gpx",
view->controller.scale * image->data.width,
view->controller.scale * image->data.height);
ui_widget_set_style_string(view->refs.content, "background-size",
size_str);
ui_widget_set_style_unit_value(view->refs.content,
css_prop_background_position_x,
view->controller.x, CSS_UNIT_PX);
ui_widget_set_style_unit_value(view->refs.content,
css_prop_background_position_y,
view->controller.y, CSS_UNIT_PX);
}
ui_widget_set_style_string() 函数适合给属性值设置字符串类型的值，我们给 background-position-x 和 background-position-y 属性设置的值属于带单位的值（unit value），转成字符串的话比较麻烦，因此，我们可以使用 ui_widget_set_style_unit_value() 函数来直接设置带单位的值。
小结
我们学会了如何使用 background-image、background-position 和 background-size 这三个 CSS 属性来控制组件背景的图片、位置和大小。