Image objects

Table of content:

• Image library,
• Supported formats,
• How to connect an image input field,
• Image source property,
• Fill Mode property,
• Rounded images (corner radius),
• Fill color property.

Image library

Before you can add an image to your project, you have to upload it to your personal image library.

To add an image to the canvas, click on the image in the library and then click and drag the image across the canvas.

Supported formats

You can upload PNG, JPG, JPEG, WEBP and SVG files.

How to connect an image input field

If you want to enable a user to edit the source image of an image object, you need to connect an input field to the 'Image Source' property.

Image source property

An image object and the image being displayed are two different things. Think of the object as a frame and the image within is defined by the Image Source property of the object.

The Image Source property is more complex than most other properties. Its value is not just a single number or string. While Easy Mode is enabled, much of this complexity is hidden, and you can simply edit the source image or the cropping using the two buttons.

If you disable Easy Mode, you gain access to the full property.

The Image Source is an object with this structure:

{ 
src: "https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/1be32f4d-e2c7-4321-   9ab3-b094a4e84000/public", 
innerPos: [0, 0], 
scale: 1, 
innerRotate: 0 
}

Fill Mode property

The Fill Mode defines how the source image is displayed within the bounding box of the image object. There are three different modes:

Cover Mode is the default setting. It fills the entire bounding box without distorting the image, but some cropping may occur.

Contain Mode fits the entire source image into the bounding box without distorting it, but the image may be scaled down and might not cover the entire bounding box.

Stretch Mode fits the entire image to cover the entire bounding box by distorting it.

Rounded images (corner radius)

Images can have rounded corners by using the corner radius property.

You can create perfectly circular images by setting the corner radius to a value greater than or equal to half of the width or height, provided the bounding box is square.

By default all four corners of the image object will have the same corner radius. Click on the "Sync Mode" button to set each corner's radius individually.

Fill color property

The default fill color of images is “None” (no fill color specified). If you set a specific fill color, all visible areas of the image - excluding the transparent areas - will be filled uniformly.

This is a useful property for recoloring icons.