Support for partially rounded rectangles

[dweymouth]

Checklist

• I have searched the issue tracker for open issues that relate to the same feature, before opening a new one.
• This issue only relates to a single feature. I will open new issues for any other features.

Is your feature request related to a problem?

Currently, rounding of rectangle corners is always applied to all 4 corners and there is no way to round only some corners.

The ability to selectively round corners would enable drawing things like progress bars or seek bars styled like this:

Or segmented controls with Material styling:

Is it possible to construct a solution with the existing API?

Not with the canvas API. I suppose you could rasterize an image with a 3rd party drawing library although this would be inefficient and lacking GPU acceleration.

Describe the solution you'd like to see.

A way to apply the corner radius to only some corners. A possibly backward-compatible way of doing this could be

package canvas

type RectangleCorner int
const (
    RectangleCornerTopLeft RectangleCorner = 0x01
    RectangleCornerTopRight RectangleCorner = 0x02
    RectangleCornerBottomLeft RectangleCorner = 0x04
    RectangleCornerBottomRight RectangleCorner = 0x08
)

// bitwise and of the above constants
type RectangleCorners int

type Rectangle struct {
    // existing fields

    // RoundedCorners specifies which corners the rounding will be applied to.
    // The default is to round all corners.
    RoundedCorners RectangleCorners
}

One downside of this backward-compatible approach is the inability to round corners with a different radius per corner but this would be quite uncommon in UI elements.

[andydotxyz]

I challenge that it cannot be done with current API.
For the first image I would use two rounded rectangles and two regular ones the same colour.

For the second picture the rounded rectangle makes a border and then lines in the separator spots.

[dweymouth]

Actually you are right :) I didn't think about overlapping two rectangles. It still may be a worthwhile future feature though (since it's not necessarily intuitive to solve it this way) but this request can certainly be treated as just a "nice to have" rather than something to prioritize.

Edit: I realize I was thinking of a different way of doing this:

• Image 1: 3 total rectangles: one rounded black rectangle, one overlapping non-rounded black rectangle whose right edge lines up with the right edge of the rounded one, and whose left edge is anywhere past the corner radius. Plus the grey rounded rectangle behind everything
• Image 2: outer rounded rectangle with the border, then two of the highlighted rectangles for the highlighted half-rounded segments, using same technique as image 1