# LomiriShapeOverlay QML Type

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

Import Statement: | import Lomiri.Components 1.3

- List of all members, including inherited members

## Properties

- overlayColor : color
- overlayRect : rect

## 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.