Since the release of Graphics-Shape library in April 2023^[1], there are still few related materials. Recently, I read this article Fun with shapes in Compose^[2], and I found that I can use shape to achieve many functions.

What is Shape

In simple terms, with Compose, you can create shapes Composable for polygons^[3]. This may not be very intuitive, so let’s take a look at what kind of content Shape can create:

Although it can’t directly handle the transformation problem between any 2 shapes(Of cause , this is a density problem), but it can help us simplify a lot of operations for the transformation between polygon structures.

How Shape can do

As the previous page said, Shape can help us complete the transformation between polygons.

First of all, this is the 6 preset cases.

Than is the clip effect, here we add the scale and rotate effect, if you need, you can add more effects.

The following shows how different preset effects can be conditioned.
Be careful, part of the preset situation can be customized.^[4]

Then we will show hot to set different preset effects.

In actual use, if you use it directly in DrawScope, radius, width, height need to be set actual size.
If you build it and provide it to something like clip, radius, width, height need to be set as a proportion.^[5]

RoundedPolygonType.Common

fun RoundedPolygon(
    @IntRange(from = 3) numVertices: Int,
    radius: Float = 1f,
    centerX: Float = 0f,
    centerY: Float = 0f,
    rounding: CornerRounding = CornerRounding.Unrounded,
    perVertexRounding: List<CornerRounding>? = null
) = RoundedPolygon(
    ...
)

RoundedPolygonType.CIRCLE

fun RoundedPolygon.Companion.circle(
    @IntRange(from = 3) numVertices: Int = 8,
    radius: Float = 1f,
    centerX: Float = 0f,
    centerY: Float = 0f
): RoundedPolygon {
    ...
}

RoundedPolygonType.PILL

fun RoundedPolygon.Companion.pill(
    width: Float = 2f,
    height: Float = 1f,
    smoothing: Float = 0f,
    centerX: Float = 0f,
    centerY: Float = 0f,
): RoundedPolygon {
    ...
}

RoundedPolygonType.PILL_STAR

fun RoundedPolygon.Companion.pillStar(
    width: Float = 2f,
    height: Float = 1f,
    numVerticesPerRadius: Int = 8,
    @FloatRange(
        from = 0.0, fromInclusive = false, to = 1.0, toInclusive = false
    ) innerRadiusRatio: Float = .5f,
    rounding: CornerRounding = CornerRounding.Unrounded,
    innerRounding: CornerRounding? = null,
    perVertexRounding: List<CornerRounding>? = null,
    @FloatRange(from = 0.0, to = 1.0) vertexSpacing: Float = 0.5f,
    centerX: Float = 0f,
    centerY: Float = 0f
): RoundedPolygon {
    ...
}

RoundedPolygonType.RECTANGLE

fun RoundedPolygon.Companion.rectangle(
    width: Float = 2f,
    height: Float = 2f,
    rounding: CornerRounding = CornerRounding.Unrounded,
    perVertexRounding: List<CornerRounding>? = null,
    centerX: Float = 0f,
    centerY: Float = 0f
): RoundedPolygon {
    ...
}

RoundedPolygonType.STAR

fun RoundedPolygon.Companion.star(
    numVerticesPerRadius: Int,
    radius: Float = 1f,
    innerRadius: Float = .5f,
    rounding: CornerRounding = CornerRounding.Unrounded,
    innerRounding: CornerRounding? = null,
    perVertexRounding: List<CornerRounding>? = null,
    centerX: Float = 0f,
    centerY: Float = 0f
): RoundedPolygon {
    ...
}