JetpackCompose の Canvas で Paint を毎回 new しない話

はじめに

Jetpack Compose の Canvas を使って棒グラフを書く の関連記事です。

Canvas で文字を描くときに使う Paint は、remember で使い回す書き方がおすすめです。この記事ではその理由と書き方を紹介します。

よくある書き方

@Composable
fun BarChart(labelColor: Color) {
    val density = LocalDensity.current

    val textPaint = android.graphics.Paint().apply {
        color = labelColor.toArgb()
        textSize = with(density) { 9.sp.toPx() }
    }

    Canvas(Modifier.fillMaxSize()) {
        drawContext.canvas.nativeCanvas.drawText("10km", 0f, 0f, textPaint)
    }
}

これでも動きますが、画面が再描画される（リコンポーズ）たびに Paint が新しく作られます。
中身は毎回同じなので、作り直す必要はありません。

おすすめの書き方

val textPaint = remember(labelColor, density) {
    android.graphics.Paint().apply {
        color = labelColor.toArgb()
        textSize = with(density) { 9.sp.toPx() }
    }
}

remember で包むと、一度作った Paint を使い回せます。
labelColor や density が変わったときだけ作り直されます。

キーには Paint を作るのに使った値をすべて入れるのがポイントです。density を入れ忘れると、端末の文字サイズを変えても反映されないことがあります。

補足

• Canvas { } の中で Paint を作ると、描画のたび（アニメーション中なら毎フレーム）に作られるので、さらにもったいないです
• 文字を描くだけなら、Paint を使わない TextMeasurer という方法もあります

まとめ

• Canvas で使う Paint は remember で使い回す
• キーには、Paint を作るのに使った値をすべて入れる