Rendering

The application renders by calling the render_rgb8 function of the generated code.

Model

Rendering fills a frame buffer: a memory region holding a rectangle of pixels that the application eventually shows on a display. The frame buffer covers the window, the root element of the component, whose size is the size of the buffer. The coordinate origin is the top-left corner of the window; x grows to the right, y grows downwards, and one unit of length is one pixel.

Order

Element instantiations paint in the order of their sequence, and an element paints before its children: an element that comes later in a sequence, or is nested deeper, appears on top.

Clipping

Painting is clipped to the frame buffer.

An element is not clipped to its parent: it may paint outside of its parent’s geometry.

export component Example inherits Window {
    background: #d0d8e8;
    Rectangle {
        x: 20px;
        y: 20px;
        width: 120px;
        height: 80px;
        background: #2a6e3f;
        Rectangle {
            x: 10px;
            y: 10px;
            width: 60px;
            height: 40px;
            background: #dfe98b;
        }
    }
}

slint