Contents

LomiriShapeOverlay QML Type

Extended LomiriShape adding a colored overlay layer. More...

Import Statement: import Lomiri.Components 1.3

Properties

Detailed Description

The LomiriShapeOverlay is a rounded rectangle (based on a squircle) containing a set of layers composed, from top to bottom, of a colored rectangle overlay, an optional source image and a background color (solid or linear gradient). Different properties allow to change the look of the shape.

Example:

import Lomiri.Components 1.2

LomiriShapeOverlay {
    backgroundColor: "white"
    overlayColor: "black"
    overlayRect: Qt.rect(0.25, 0.25, 0.5, 0.5)
}

Property Documentation

overlayColor : color

This property sets the color of the overlay rectangle defined by overlayRect. The default value is transparent black.

This property was introduced in Lomiri.Components 1.2.


overlayRect : rect

This property sets the overlay rectangle. The default value is the empty rectangle.

It is defined by a position and a size in normalized item coordinates (in the range between 0 and 1) with the origin at the top-left corner. An overlay covering the bottom part and starting at the vertical center can be done like that:

LomiriShapeOverlay {
    width: 200; height: 200
    overlayColor: Qt.rgba(0.0, 0.0, 0.5, 0.5)
    overlayRect: Qt.rect(0.0, 0.5, 1.0, 0.5)
}

Converting a position and a size in pixels to normalized item coordinates can be done with a division by the size. Here is an equivalent of the previous code sample:

LomiriShapeOverlay {
    width: 200; height: 200
    overlayColor: Qt.rgba(0.0, 0.0, 0.5, 0.5)
    overlayRect: Qt.rect(100.0/width, 100.0/height, 200.0/width, 100.0/height)
}

A geometry exceeding the item area is cropped.

This property was introduced in Lomiri.Components 1.2.