mirror of
https://github.com/slint-ui/slint.git
synced 2025-10-22 16:22:17 +00:00

Previously, the software renderer only supported linear gradients, with radial gradients falling back to solid colors. This commit adds full radial gradient rendering support. Rename gradient-related types for clarity: - GradientCommand → LinearGradientCommand - gradients → linear_gradients - draw_gradient_line → draw_linear_gradient - process_gradient → process_linear_gradient * tests: Add comprehensive screenshot tests for radial gradients Add test cases for radial gradients including: - Basic radial gradient with transparency overlay - Multiple color stops with specific percentages - Gradient stops beyond 100% range - Overlapping transparent gradients with alpha blending - Multiple stops at same position for sharp color transitions - Edge case with invisible stop at 0% ROTATION_THRESHOLD set to 600 due to imprecision in gradient calculations during rotation transformations.
43 lines
No EOL
1.6 KiB
Text
43 lines
No EOL
1.6 KiB
Text
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
|
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
|
|
|
|
// ROTATION_THRESHOLD=600 - because gradients are very imprecise in rotation
|
|
|
|
export component TestCase inherits Window {
|
|
width: 64px;
|
|
height: 64px;
|
|
|
|
background: black;
|
|
|
|
GridLayout {
|
|
Row {
|
|
Rectangle {
|
|
background: @radial-gradient(circle, red, blue);
|
|
with_opacity := Rectangle {
|
|
background: @radial-gradient(circle, limegreen 10%, transparent 50%);
|
|
}
|
|
}
|
|
Rectangle { background: @radial-gradient(circle, white 10%, #239 35%, red 85%); }
|
|
// Stops beyond 100%
|
|
Rectangle { background: @radial-gradient(circle, red 0%, white 50%, blue 100%, green 150%); }
|
|
}
|
|
Row {
|
|
Rectangle {
|
|
// Overlapping transparent gradients
|
|
background: @radial-gradient(circle, lightblue, red);
|
|
Rectangle { background: @radial-gradient(circle, green, transparent, rgba(255, 0, 128, 0.5)); }
|
|
}
|
|
// Multiple stops at same position
|
|
Rectangle { background: @radial-gradient(circle, blue 0%, blue 30%, yellow 30%, yellow 60%, red 60%, red 100%); }
|
|
// Edge case: invisible stop at 0%
|
|
Rectangle { background: @radial-gradient(circle, transparent 0%, red 1%, white 50%, transparent 100%); }
|
|
}
|
|
}
|
|
|
|
init => {
|
|
// This is a test for the binding part of #3068
|
|
if (with_opacity.opacity == 1) {
|
|
with_opacity.opacity = 0.5;
|
|
}
|
|
}
|
|
} |