Details
-
Suggestion
-
Resolution: Unresolved
-
P4: Low
-
None
-
6.9
-
None
Description
Currently, RectangleShape cannot have individual corner radii larger than half of its dimension (which makes it slightly incompatible with RectangleItem and BorderItem).
Since RectangleShape uses QQuickPathRectangle, QQuickPathRectangle should be fixed to support corner radii larger than 0.5*itemDimension, but we need to keep it compatible with QQuickRectangle, so we therefore need to add an option to QQuickPathRectangle that is only enabled by QQuickRectangleShape.
Calculating effective corner radii
If the sum of the two corner radiis along an edge exceeds the extent of the edge, it should follow this algorithm (this is reverse engineered to match Figma mixed corner radii) to find the effective corner radii (Note: corners should always follow a circular arc, they should not be elliptical)
Considering a 400x300 rectangle with these individual corners:
900 +---------+ 10 | | | 400x300 | | | 50 +---------+ 10
Each corner should evaluate both of its edges, and take the minimum of both:
topLeftRadius = Math.min(300 * 900/950, 400 * 900/910) // (= 284)
(can be simplified to):
topLeftRadius = Math.min(300/950, 400/910) * 900 // (= 284)
For the other corners would be similar:
topRightRadius = Math.min(400/910, 300/20) * 10 // = 4.4 bottomRightRadius = Math.min(300/20, 400/60) * 10 // = 66.7, but 10 is used here bottomLeftRadius = Math.min(400/60, 300/950) * 50 // = 15.8
In the end, the effective corner radiis should then become:
topLeftRadius == 284 topRightRadius == 4.4 bottomRightRadius == 10 (normal case, because none of its edges radiis exceeds the length of its edges) bottomLeftRadius == 15.8
All of these numbers corresponds to my visual comparision of what Figma produces
See attached screenshot for verification how this matches in Figma