Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-136188

Fix QQuickPathRectangle to support corner radii larger than 0.5*itemDimension

    XMLWordPrintable

Details

    • Suggestion
    • Resolution: Unresolved
    • P4: Low
    • None
    • 6.9
    • Quick: Shapes
    • 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

      Ref: https://codereview.qt-project.org/c/qt-labs/qtquickdesigner-components/+/564591/4/src/imports/components/BorderItem.qml#412

      Attachments

        No reviews matched the request. Check your Options in the drop-down menu of this sections header.

        Activity

          People

            smd Jan Arve
            smd Jan Arve
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

              Created:
              Updated:

              Gerrit Reviews

                There are no open Gerrit changes