はじめに

こんにちは！ STORES 決済でAndroidアプリの開発をしているchukaです。

最近は美味しいパンを食べることにハマっています。

美味しいパン屋さんを知っている方は、ぜひ教えてください 🥐 🍞 🥖 🥯

Jetpack Composeでサインをしよう

みなさんは、クレジットカードでの支払い時にサインを求められた経験はありますか？ STORES 決済でも、クレジットカードで決済されたとき、アプリ上でサインをしてもらう場合があります。*1

でも、Jetpack Composeでサイン画面を作るのってなんか難しそう・・・と思いませんか？(私は思っていました)

実はそのサイン画面、Jetpack Composeでとてもお手軽に実装できるのです！

今回は、そんなサイン画面の実装方法について解説していきます。

1. サインを描画する

まずは、一番シンプルな「線を描く」処理の実装例から紹介します。

@Composable
private fun SignatureField(modifier: Modifier = Modifier) {
    var path by remember { mutableStateOf(Path()) }

    Canvas(
        modifier =
            modifier
                .fillMaxSize()
                .pointerInput(Unit) {
                    detectDragGestures(
                        onDragStart = { offset ->
                            path.moveTo(offset.x, offset.y)
                        },
                        onDrag = { change, _ ->
                            path.lineTo(change.position.x, change.position.y)
                            // pathを更新して再描画をトリガーする
                            path = Path().apply { addPath(path) }
                        },
                    )
                },
    ) {
        drawPath(
            path = path,
            color = Color.Black,
            style =
                Stroke(
                    width = STROKE_WIDTH,
                    cap = StrokeCap.Round,
                    join = StrokeJoin.Round,
                ),
        )
    }
}

なんと、これだけでサイン機能が完成しました！

CanvasとpointerInput()を使用することで、ユーザーの指の動きに合わせて線を描くことができます。

実装のポイントは、path = Path().apply { addPath(path) }で明示的にpathを更新することです。 path.moveTo やpath.lineTo でpathの内部状態は変化していますが、 インスタンス自体は変わっていないため、Compose側が変更を検知できずに再描画が走りません。そのため、毎回pathを新しく生成して代入し直すことで、Compose側に変更を通知し、再描画をトリガーします。

2. サインをなめらかにする

1でサインを描くことはできましたが、ちょっと線がカクカクしていますね 🤔

path.lineTo は直線を描画するので、点同士が直線で繋がれてカクカクしてしまいます。より滑らかな描画を実現するには、2点間を曲線（ベジェ曲線）でつなぐのがおすすめです。

path = Path().apply {
    addPath(path)
    quadraticTo(
        lastPosition.x, 
        lastPosition.y,
        (lastPosition.x + change.position.x) / 2,
        (lastPosition.y + change.position.y) / 2
    )
}

quadraticTo() はベジェ曲線を描画します。

前回の点と現在の点の中間点を制御点とすることで、なめらかな線になります！

gifではわかりにくいと思うので、比較画像もお見せします。

左: lineTo()で描画した線, 右: quadraticTo()で描画した線

左が1のlineTo()で描画した線で、右が2のquadraticTo()で描画した線です。カーブの部分を見ていただくと、その差がよくわかるかと思います。

3. サインを消す

最後に、サインを消す機能もつけてみましょう！

@Composable
private fun SignatureField(modifier: Modifier = Modifier) {
    var path by remember { mutableStateOf(Path()) }
    var lastPosition by remember { mutableStateOf<Offset?>(null) }

    Box(
        modifier = modifier.fillMaxSize(),
    ) {
        Canvas(
            modifier =
                Modifier
                    .fillMaxSize()
                    .pointerInput(Unit) {
                        detectDragGestures(
                            onDragStart = { offset ->
                                path.moveTo(offset.x, offset.y)
                                lastPosition = offset
                            },
                            onDrag = { change, _ ->
                                lastPosition?.let { lastPosition ->
                                    // pathを更新して再描画をトリガーする
                                    path =
                                        Path().apply {
                                            addPath(path)
                                            quadraticTo(
                                                lastPosition.x,
                                                lastPosition.y,
                                                (lastPosition.x + change.position.x) / 2,
                                                (lastPosition.y + change.position.y) / 2,
                                            )
                                        }
                                }
                                lastPosition = change.position
                            },
                        )
                    },
        ) {
            drawPath(
                path = path,
                color = Color.Black,
                style =
                    Stroke(
                        width = STROKE_WIDTH,
                        cap = StrokeCap.Round,
                        join = StrokeJoin.Round,
                    ),
            )
        }

        Button(
            modifier = Modifier.align(Alignment.BottomCenter).padding(16.dp),
            onClick = {
                path = Path() // パスを初期化
                lastPosition = null
            },
        ) {
            Text("サインを消す！")
        }
    }
}