繪製筆劃

如要達到最佳繪圖效能,請使用 InProgressStrokesView 類別的 startStroke()addToStroke()finishStroke() 方法,並將 MotionEvent 物件做為輸入內容。

  1. 設定 UI 元件

    AndroidView 可組合函式納入繪圖可組合函式。

    @Composable
    fun DrawingView()
    {
      Box(modifier = Modifier.fillMaxSize()) {
        AndroidView(
          modifier = Modifier.fillMaxSize(),
          factory = { context ->
            val rootView = FrameLayout(context)
            //...
          },
        ) {
    
        }
      }
    }
    

  2. 例項化 InProgressStrokesView

    在活動的 onCreate() 方法中,取得 InProgressStrokesView 的參照,並建立觸控事件監聽器來管理使用者輸入內容。

    class MainActivity : ComponentActivity(){
      private lateinit var inProgressStrokesView: InProgressStrokesView
    
      // ... other variables
    
      override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        inProgressStrokesView = InProgressStrokesView(this)
    
        setContent {
          // ...
          DrawingView(inProgressStrokesView = inProgressStrokesView)
        }
      }
    }
    
    @Composable
    fun DrawingView(
      inProgressStrokesView: InProgressStrokesView,
    ) {
    
      Box(modifier = Modifier.fillMaxSize()) {
        AndroidView(
          modifier = Modifier.fillMaxSize(),
          factory = { context ->
            val rootView = FrameLayout(context)
            inProgressStrokesView.apply {
              layoutParams =
              FrameLayout.LayoutParams(
                FrameLayout.LayoutParams.MATCH_PARENT,
                FrameLayout.LayoutParams.MATCH_PARENT,
              )
            }
            val predictor = MotionEventPredictor.newInstance(rootView)
            val touchListener =
            View.OnTouchListener { view, event ->
              // ... (handle touch events)
            }
    
            rootView.setOnTouchListener(touchListener)
            rootView.addView(inProgressStrokesView)
            rootView
          },
        ) {}
      }
    }
    

  3. 處理觸控事件

    建立 UI 元件後,您現在可以根據觸控事件啟動繪圖。

    MotionEvent 動作

    InProgressStrokesView 方法

    說明

    ACTION_DOWN

    startStroke()

    開始顯示筆劃

    ACTION_MOVE

    addToStroke()

    繼續算繪筆劃

    ACTION_UP

    finishStroke()

    完成筆劃算繪

    ACTION_CANCELFLAG_CANCELED

    cancelStroke()

    實作防手掌誤觸功能;取消筆觸

    @SuppressLint("ClickableViewAccessibility")
    @Composable
    fun DrawingSurface(
        inProgressStrokesView: InProgressStrokesView
    ) {
        val currentPointerId = remember { mutableStateOf<Int?>(null) }
        val currentStrokeId = remember { mutableStateOf<InProgressStrokeId?>(null) }
        val defaultBrush = Brush.createWithColorIntArgb(
            family = StockBrushes.pressurePenLatest,
            colorIntArgb = Color.Black.toArgb(),
            size = 5F,
            epsilon = 0.1F
        )
    
        Box(modifier = Modifier.fillMaxSize()) {
            AndroidView(
                modifier = Modifier.fillMaxSize(),
                factory = { context ->
                    val rootView = FrameLayout(context)
                    inProgressStrokesView.apply {
                        layoutParams =
                            FrameLayout.LayoutParams(
                                FrameLayout.LayoutParams.MATCH_PARENT,
                                FrameLayout.LayoutParams.MATCH_PARENT,
                            )
                    }
                    val predictor = MotionEventPredictor.newInstance(rootView)
                    val touchListener =
                        View.OnTouchListener { view, event ->
                            predictor.record(event)
                            val predictedEvent = predictor.predict()
    
                            try {
                                when (event.actionMasked) {
                                    MotionEvent.ACTION_DOWN -> {
                                        // First pointer - treat it as inking.
                                        view.requestUnbufferedDispatch(event)
                                        val pointerIndex = event.actionIndex
                                        val pointerId = event.getPointerId(pointerIndex)
                                        currentPointerId.value = pointerId
                                        currentStrokeId.value =
                                            inProgressStrokesView.startStroke(
                                                event = event,
                                                pointerId = pointerId,
                                                brush = defaultBrush
                                            )
                                        true
                                    }
    
                                    MotionEvent.ACTION_MOVE -> {
                                        val pointerId = checkNotNull(currentPointerId.value)
                                        val strokeId = checkNotNull(currentStrokeId.value)
    
                                        for (pointerIndex in 0 until event.pointerCount) {
                                            if (event.getPointerId(pointerIndex) != pointerId) continue
                                            inProgressStrokesView.addToStroke(
                                                event,
                                                pointerId,
                                                strokeId,
                                                predictedEvent
                                            )
                                        }
                                        true
                                    }
    
                                    MotionEvent.ACTION_UP -> {
                                        val pointerIndex = event.actionIndex
                                        val pointerId = event.getPointerId(pointerIndex)
                                        check(pointerId == currentPointerId.value)
                                        val currentStrokeId = checkNotNull(currentStrokeId.value)
                                        inProgressStrokesView.finishStroke(
                                            event,
                                            pointerId,
                                            currentStrokeId
                                        )
                                        view.performClick()
                                        true
                                    }
    
                                    MotionEvent.ACTION_CANCEL -> {
                                        val pointerIndex = event.actionIndex
                                        val pointerId = event.getPointerId(pointerIndex)
                                        check(pointerId == currentPointerId.value)
    
                                        val currentStrokeId = checkNotNull(currentStrokeId.value)
                                        inProgressStrokesView.cancelStroke(currentStrokeId, event)
                                        true
                                    }
    
                                    else -> false
                                }
                            } finally {
                                predictedEvent?.recycle()
                            }
    
                        }
                    rootView.setOnTouchListener(touchListener)
                    rootView.addView(inProgressStrokesView)
                    rootView
                },
            ) {
    
            }
        }
    }
    

  4. 處理完成的筆劃

    呼叫 finishStroke() 時,系統會將筆劃標示為完成。不過,最終程序不會立即生效。筆劃已完整處理,在呼叫 finishStroke() 後不久即可供應用程式存取,尤其是在沒有其他進行中的筆劃時。這樣可確保所有繪圖作業在筆劃傳送給用戶端前都已完成「完成」

    如要擷取已完成的筆劃,有兩種方法可供選擇:

    class MyActivity : ComponentActivity(), InProgressStrokesFinishedListener {
      ...
    
      private val finishedStrokesState = mutableStateOf(emptySet<Stroke>())
    
      override fun onCreate(savedInstanceState: Bundle?) {
        ...
        inProgressStrokesView.addFinishedStrokesListener(this)
      }
    
      // ... (handle touch events)
    
      @UiThread
      override fun onStrokesFinished(strokes: Map<InProgressStrokeId, Stroke>) {
        finishedStrokesState.value += strokes.values
        inProgressStrokesView.removeFinishedStrokes(strokes.keys)
      }
    }
    

    擷取完成的筆觸後,即可使用 CanvasStrokesRenderer 把它們提交到畫面上

    class MainActivity : ComponentActivity(), InProgressStrokesFinishedListener {
      private lateinit var inProgressStrokesView: InProgressStrokesView
      private val finishedStrokesState = MutableState<emptySet<Stroke>()>
    
      override fun onCreate(savedInstanceState: Bundle?) {
        inProgressStrokesView = InProgressStrokesView(this)
        inProgressStrokesView.addFinishedStrokesListener(this)
        canvasStrokeRenderer = CanvasStrokeRenderer.create()
        //...
        DrawingSurface(
          inProgressStrokesView = inProgressStrokesView,
          canvasStrokeRenderer = canvasStrokeRenderer,
          finishedStrokesState = finishedStrokesState
        )
        //...
        }
      //...
    }
    
    @SuppressLint("ClickableViewAccessibility")
    @Composable
    fun DrawingSurface(
        inProgressStrokesView: InProgressStrokesView,
        finishedStrokesState: Set<Stroke>
    ) {
        val canvasStrokeRenderer = CanvasStrokeRenderer.create()
        //...
    
        Box(modifier = Modifier.fillMaxSize()) {
            AndroidView(
                //...
            )
    
            Canvas(modifier = Modifier) {
                val canvasTransform = Matrix()
                drawContext.canvas.nativeCanvas.concat(canvasTransform)
                val canvas = drawContext.canvas.nativeCanvas
    
                finishedStrokesState.value.forEach { stroke ->
                    canvasStrokeRenderer.draw(stroke = stroke, canvas = canvas, strokeToScreenTransform = canvasTransform)
                }
            }
        }
    }