Android Jetpack Compose 繪圖示範

在 Jetpack Compose 中可以在 Canvas 上繪製圖形，目前有以下幾種用法：

• drawPoints: 點
• drawLine: 線段
• drawCircle: 圓形
• drawOval: 橢圓形
• drawArc: 扇形
• drawRect: 矩形(長方形)
• drawRoundedRect: 圓角矩形
• drawImage: 繪製圖片

下面是一些基本的使用示範：

繪製圓形

    
// import androidx.compose.foundation.Canvas
// import androidx.compose.foundation.layout.size
// import androidx.compose.ui.graphics.Color


Canvas(
    modifier = Modifier
        .size(100.dp)
) {
    drawCircle(
        radius = 50f,
        center = center,
        color = Color.Magenta
    )
}
    

不過在 drawCircle 中使用的是像素，在 Canvas 中使用的是 dp，可以使用 toPx 轉換：

    
Canvas(
    modifier = Modifier
        .size(100.dp)
) {
    drawCircle(
        radius = 50.dp.toPx(),
        center = center,
        color = Color.Magenta
    )
}
    

繪製線段

繪製左上到右下的線段

    
// import androidx.compose.ui.graphics.Color
// import androidx.compose.ui.graphics.Path
// import androidx.compose.ui.graphics.drawscope.Stroke


val path = Path().apply {
    moveTo(0f, 0f)
    lineTo(size.width, size.height)
}

drawPath(
    path = path,
    color = Color.Red,
    style = Stroke(width = 10f)

)
    

在 Modifier 上繪製

不過除了在 Canvas 上面繪圖外，還可以畫在其他地方，例如在 Modifier 中就可以畫在 drawBehind 和 drawWithContent ：

    
// import androidx.compose.foundation.layout.Column
// import androidx.compose.foundation.layout.size
// import androidx.compose.ui.draw.drawBehind
// import androidx.compose.ui.draw.drawWithContent
// import androidx.compose.ui.graphics.Color
// import androidx.compose.ui.unit.dp


Column(
    modifier = Modifier
        .size(100.dp)
        .drawBehind {
            drawCircle(
                color = Color.Red,
                radius = 80f
            )

        }
        .drawWithContent {
            drawCircle(
                color = Color.Blue,
                radius = 50f
            )
        }
) {

}
    

參考資料：
Android Developers - Graphics in Compose