Can I use drawPath to both fill shape and draw border only one time in Jetpack Compose

Question

I use Code A to draw a shape with a path, I hope to fill the shape in a color, and draw border with different color and width. I get the Image A as I expected.

I find Code A to launch drawPath operation two times, maybe it's not good way, can I use drawPath to both fill shape and draw border only one time?

Code A

fun setProcess(drawScope: DrawScope, dataList: List<Double>){
  
    drawScope.drawIntoCanvas{
        val step = xAxisLength / maxPointCount

        val shadowPath = Path()

        shadowPath.moveTo(0f.toX, 0f.toY)

        for (i in dataList.indices) {
             ...
        }

        shadowPath.close()
        it.drawPath(shadowPath, paintTablePath)
        it.drawPath(shadowPath, paintTableBorder)
    }
}

val paintTablePath = Paint().also {
    it.isAntiAlias = true
    it.style = PaintingStyle.Fill
    it.strokeWidth = 1f
    it.color = Color(0xffdfecfe)
}

val paintTableBorder = Paint().also {
    it.isAntiAlias = true
    it.style = PaintingStyle.Stroke
    it.strokeWidth = 3f
    it.color = Color.Red
}

Image A

Thracian · Accepted Answer · 2022-07-28T04:24:53.093

What you ask is neither available in Compose nor Android Canvas. As you can check here but with Jetpack Compose Canvas.

You don't need to use the ones with Paint unless you need some properties of Paint or functions like drawText

DrawScope already has functions such as

fun drawPath(
    path: Path,
    color: Color,
    /*@FloatRange(from = 0.0, to = 1.0)*/
    alpha: Float = 1.0f,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
)

And instead of passing DrawScope as parameter it would help creating extension functions of DrawScope as default Compose source code often does.

inline fun DrawScope.rotate(
    degrees: Float,
    pivot: Offset = center,
    block: DrawScope.() -> Unit
) = withTransform({ rotate(degrees, pivot) }, block)

inline fun DrawScope.clipRect(
    left: Float = 0.0f,
    top: Float = 0.0f,
    right: Float = size.width,
    bottom: Float = size.height,
    clipOp: ClipOp = ClipOp.Intersect,
    block: DrawScope.() -> Unit
) = withTransform({ clipRect(left, top, right, bottom, clipOp) }, block)

Thanks! but could you tell me how to fill shape and draw border in one operation? — HelloCW, Jul 28 '22 at 03:12
There is no one operation to fill a shape and draw border in different color in Android not only in Compose. You can create a DrawScope extension with 2 colors and border width if you wish to but it doesn't exist.`FILL_AND_STROKE` is not what you need either https://stackoverflow.com/questions/3723545/whats-the-point-of-fill-and-stroke — Thracian, Jul 28 '22 at 04:26
having 2 draws doesn't have any impact on performance. Drawing apps do lots drawings with list of paths, blend modes and so on — Thracian, Jul 28 '22 at 04:27

Can I use drawPath to both fill shape and draw border only one time in Jetpack Compose

1 Answers1