ストロークを描画する

Ink API には、イディオム的な Compose の方法でストロークを作成できるように、作成、ブラシ、ジオメトリ用の Compose 相互運用性モジュールが用意されています。

Compose でストロークを描画するには、デフォルトのブラシ インスタンス、デフォルトのブラシをオーバーライドする方法、ストロークの完了を処理するコールバックを必要とする InProgressStrokes コンポーザブルを使用します。

  1. UI コンポーネントを設定する

    InProgressStrokes(
      defaultBrush = currentBrush,
      nextBrush = onGetNextBrush,
      onStrokesFinished = onStrokesFinished,
    )
    
  2. 完成したストロークを処理する

    ウェット ストロークがドライになると、InProgressStrokesonStrokesFinished コールバック引数を介してアプリケーションに渡されます。

    アプリは、同じ UI スレッド内の別のコンポーザブルに完成したストロークを渡して、画面にコミットする必要があります。

    @Composable
    fun DrawingScreen(
      finishedStrokes: List<Strokes>,
      onStrokesFinished: (List<Stroke>) -> Unit,
      currentBrush: Brush,
      onGetNextBrush: () -> Brush,
      modifier: Modifier = Modifier
    ) {
      val canvasStrokeRenderer = remember { CanvasStrokeRenderer.create() }
    
      Box(modifier = Modifier.fillMaxSize()) {
          // The Canvas for drawing the permanent, dry strokes.
          Canvas(modifier = Modifier.fillMaxSize()) {
              finishedStrokes.forEach { stroke ->
                  canvasStrokeRenderer.draw(
                      stroke = stroke,
                      canvas = this,
                      strokeToScreenTransform = Matrix()
                  )
              }
          }
    
          //The wet ink layer for live drawing.
          // The InProgressStrokes composable for the wet ink layer goes here.
      }
    }