Skip to content

Support asymmetrical and uneven rounded superellipses #161207

Closed

Description

@dkwingsmt

While flutter-team-archive/engine#56726 added support for the basic rounded superellipses that have uniform, symmetrical corner radii, SwiftUI supports more styles:

  • Uneven rounded rectangles: corresponding to SwiftUI's UnevenRoundedRectangle class
  • Asymmetrical rounded rectangles: corresponding to SwiftUI's RoundedRectangle class with cornerSize parameter

For completeness we might want to support them.

I think both of them are of low priority since I can't think of any use cases. But I'll write down my research progress in case we pick it up some day.

Neither of them seems to use any new technologies. However there are a few obstacles.

Asymmetrical RSE

Asymmetrical RSEs are basically elongated version of a normal RSE.
image

Radius capping is simply done by capping both dimensions at min(height, width)/2.

Shape size Target corner size Corner size cap
100x200 ___x25 50x25
100x200 25x___ 25x50
100x300 30x___ 30x50
image image image

Uneven RSE

Ueven RSEs seem to be simply concatenating 1/8 arcs from a square-like RSE.

However, radius capping seem to follow a more complicated pattern, and I fail to summarize a simple algorithm.

image

API

Another problem is come up with a beautiful API that unifies both classes, because RSE class can not simply use the Radius class used by RRect, since both asymmetrical RSEs and uneven RSEs have their restrictions, and they jointly don't cover max flexibilities allowed by Radius (not all 8 radii are freedom on their own).

image

One way to simplify this problem is to ignore asymmetrical RSEs, since they are defined in such a weird way that I doubt will meet any user's expectation, and that they can theoretically be achieved by simply scaling. However, be cautious of precision because the current RoundSuperellipseGeometry tessellates on its own with 1point per px without considering scaling. (Maybe it can dynamically decide the tessellation step based on context transform matrix?)

Without asymmetrical RSEs getting in the way, theoretically we can expand the scope of support to arbitrary Radius. This requires the capping rule to be altered, probably into the same way as the current RRect - which might be actually a good idea. However, supporting arbitrary Radius for RSEs might be mathematically hard, if possible at all.

Activity

  1. added
    in triagePresently being triaged by the triage team
    engineflutter/engine related. See also e: labels.
    c: proposalA detailed proposal for a change to Flutter
    e: impellerImpeller rendering backend issues and features requests
    and removed
    in triagePresently being triaged by the triage team
    on Jan 7, 2025
  2. added
    P3Issues that are less important to the Flutter project
    on Jan 13, 2025
  3. github-actions commented on Jan 29, 2025

    @github-actions

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

  4. locked as resolved and limited conversation to collaborators on Jan 29, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3Issues that are less important to the Flutter projectc: proposalA detailed proposal for a change to Fluttere: impellerImpeller rendering backend issues and features requestsengineflutter/engine related. See also e: labels.r: fixedIssue is closed as already fixed in a newer versionteam-engineOwned by Engine teamtriaged-engineTriaged by Engine team

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions