1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
3
4RectPath := Path {
5 MoveTo {
6 x: 0;
7 y: 0;
8 }
9
10 LineTo {
11 x: 100;
12 y: 0;
13 }
14
15 LineTo {
16 x: 100;
17 y: 100;
18 }
19
20 LineTo {
21 x: 0;
22 y: 100;
23 }
24
25 Close {}
26}
27
28PathViewBox := Window {
29 preferred-width: 600px;
30 preferred-height: 600px;
31
32 // This is the reference path rectangle
33 RectPath {
34 x: 100px;
35 y: 100px;
36 width: 100px;
37 height: 100px;
38
39 stroke-width: 1px;
40 stroke: black;
41 }
42
43 // This path rectangle uses an unclipped viewbox and therefore
44 // draws outside the boundaries of the underlying green rectangle.
45 Rectangle {
46 background: #26e115da;
47 x: 300px;
48 y: 100px;
49 width: 100px;
50 height: 100px;
51
52 RectPath {
53 width: 100px;
54 height: 100px;
55
56 stroke-width: 1px;
57 stroke: black;
58
59 viewbox-x: 50;
60 viewbox-y: 0;
61 viewbox-width: 100;
62 viewbox-height: 100;
63 }
64 }
65
66 // This path rectangle uses an clipped viewbox and therefore
67 // draws only inside the boundaries of the underlying green rectangle.
68 Rectangle {
69 background: #26e115da;
70 x: 100px;
71 y: 300px;
72 width: 100px;
73 height: 100px;
74
75 RectPath {
76 width: 100px;
77 height: 100px;
78
79 stroke-width: 1px;
80 stroke: black;
81
82 clip: true;
83
84 viewbox-x: 50;
85 viewbox-y: 0;
86 viewbox-width: 100;
87 viewbox-height: 100;
88 }
89 }
90}
91