Zoom image and keep same dimensions

How-to
1

Description

I have an image displayed on my screen and I would like to zoom in. When I zoom in, the image scales up but it changes the dimensions of the image, so a bigger part of the screen is covered by the image.
But I would like to keep the same dimensions as before the zoom and cover the same part of the screen but with a zoomed in fragment of my image.
How to maintain same dimensions ?

The ‘lv_image_set_scale’ function is changes the dimensions of the image on my screen.

What MCU/Processor/Board and compiler are you using?

EK-RA8D1

What LVGL version are you using?

master(latest)

What do you want to achieve?

Zoom an image and keep same dimensions

What have you tried so far?

All functions in lv_image.h

Code to reproduce

Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.

The code block(s) should be formatted like:

/*You code here*/

lv_obj_t * img1 = lv_image_create(lv_screen_active());

lv_image_set_src(img1, &img1);
lv_image_set_scale(img1, 256*1.4 );
lv_obj_align(img1, LV_IMAGE_ALIGN_CENTER, 0, 0);

2

Hello,

One way to do it would be to create a base object with the desired size and then add the image object inside of it.

Here is an example:

static void zoom_evt_handler(lv_event_t * e)
{
    // recover image object
    lv_obj_t *img = lv_event_get_user_data(e);
    // zoom in
    lv_image_set_scale(img, 256*1.4);    
}

void lv_example_image_1(void)
{
    LV_IMAGE_DECLARE(img_cogwheel_argb);

    // create frame to hold the image
    lv_obj_t *iframe = lv_obj_create(lv_screen_active());
    lv_obj_set_size(iframe, 100, 100);
    lv_obj_align(iframe, LV_ALIGN_CENTER, 0, 0);
    // optionally, remove scroll from image frame
    lv_obj_remove_flag(iframe, LV_OBJ_FLAG_SCROLLABLE);

    //add image to frame
    lv_obj_t *img1 = lv_image_create(iframe);
    lv_image_set_src(img1, &img_cogwheel_argb);
    lv_obj_align(img1, LV_ALIGN_CENTER, 0, 0);

    // zoom button
    lv_obj_t * button = lv_button_create(lv_screen_active());
    lv_obj_align(button, LV_ALIGN_CENTER, 0, 130);
    // set button callback and send image object as argument
    lv_obj_add_event_cb(button, zoom_evt_handler, LV_EVENT_CLICKED, img1);
    
    // button label
    lv_obj_t *label = lv_label_create(button);
    lv_label_set_text(label, "Zoom in");
    lv_obj_center(label);
}
3

Thanks. This helped a lot.