Image

Image is a special API component in ElenixOS for displaying images. This document will introduce the features, usage methods, and precautions of the image component.

Feature Introduction

The image component allows developers to display various images in applications, such as icons, background images, photos, etc. Image components are typically used to enhance the visual effects of applications and improve user experience.

Usage Methods

Create Image

Use the new lv.image() constructor to create an image object:

// Create image object
const image = new lv.image(eos.view.active());

Configure Image

Use the following methods to configure the image:

// Set image size
image.setSize(100, 100);

// Set image position
image.setPos(10, 10);

// Set image source
// Method 1: Use image path
image.setSrc("/path/to/image.png");

// Method 2: Use image data
const imgData = /* image data */;
image.setSrc(imgData);

// Set image scale mode
image.setScale(2); // 2x zoom

// Set image opacity
image.setOpacity(0.5); // semi-transparent

Bind Events

Use the addEventCb method to bind events:

// Bind click event
image.addEventCb((e) => {
    eos.console.log("Image clicked!");
}, lv.EVENT_CLICKED, null);

Example: Create a Simple Image

// Create image
const image = new lv.image(eos.view.active());
image.setSize(100, 100);
image.align(lv.ALIGN_CENTER, 0, 0);

// Set image source
image.setSrc("/path/to/image.png");

Example: Create a Clickable Image

// Create image
const image = new lv.image(eos.view.active());
image.setSize(100, 100);
image.align(lv.ALIGN_CENTER, 0, 0);

// Set image source
image.setSrc("/path/to/image.png");

// Add clickable flag
image.addFlag(lv.OBJ_FLAG_CLICKABLE);

// Bind click event
image.addEventCb((e) => {
    eos.console.log("Image clicked!");
}, lv.EVENT_CLICKED, null);