ציור קו

כדי לעזור לכם ליצור קווים בדרך אידיומטית ב-Compose,‏ Ink API מספק מודולים של יכולת פעולה הדדית ב-Compose ליצירה, למברשת ולגיאומטריה.

כדי לצייר קו ב-Compose, משתמשים בקוד InProgressStrokes קומפוזבילי שדורש מופע מברשת שמוגדר כברירת מחדל, דרך לעקוף את המברשת שמוגדרת כברירת מחדל וקריאה חוזרת (callback) שמטפלת בקווי ציור שהושלמו.

  1. הגדרת רכיב בממשק המשתמש

    InProgressStrokes(
      defaultBrush = currentBrush,
      nextBrush = onGetNextBrush,
      onStrokesFinished = onStrokesFinished,
    )
    
  2. טיפול בקווי שרטוטים שהושלמו

    כשמשיכות מכחול רטובות הופכות ליבשות, הן מועברות לאפליקציה דרך הארגומנט של הקריאה החוזרת (callback) onStrokesFinished של InProgressStrokes.

    האפליקציה צריכה להעביר את המשיכות שהושלמו לרכיב Composable אחר באותו שרשור של ממשק המשתמש כדי להציג אותן במסך.

    @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.
      }
    }