slint/tests/cases/examples/rectangle_clip.60

/* LICENSE BEGIN
    This file is part of the SixtyFPS Project -- https://sixtyfps.io
    Copyright (c) 2021 Olivier Goffart <olivier.goffart@sixtyfps.io>
    Copyright (c) 2021 Simon Hausmann <simon.hausmann@sixtyfps.io>

    SPDX-License-Identifier: GPL-3.0-only
    This file is also available under commercial licensing terms.
    Please contact info@sixtyfps.io for more information.
LICENSE END */

// This should render as a rectangle with a black border and
// green "fill".

export Test := Window {
    background: white;

    TouchArea {
        clicked => { r.clip = !r.clip; }
    }

    r:= Rectangle {
        x: 50px;
        y: 50px;
        width: 300px;
        height: 300px;
        border-radius: 25px;
        border-width: 20px;
        border-color: black;

        clip: true;

        Rectangle {
            x: -20px;
            y: -20px;
            width: parent.width + 20px;
            height: parent.height + 20px;
            background: green;
        }

        Text {
            color: blue;
            y: 10px;
            text: "This Text is clipped";
            font-size: 24px;
        }

        Rectangle {
            x: 150px;
            y: 150px;
            width: 200px;
            height: 200px;
            background: red;
        }

        Image {
            source: @image-url("../../../vscode_extension/extension-logo.png");
            y: 50px;
            x: -30px;
        }
    }
}