วาดเส้น

หากต้องการประสิทธิภาพการวาดที่ดีที่สุด ให้ใช้เมธอดของคลาส InProgressStrokesView ซึ่งได้แก่ startStroke(), addToStroke() และ finishStroke() โดยส่งออบเจ็กต์ MotionEvent เป็นอินพุต

1. ตั้งค่าคอมโพเนนต์ UI

   ผสานรวม InProgressStrokesView เข้ากับลำดับชั้นของข้อมูลพร็อพเพอร์ตี้

   <FrameLayout>
   
     <ScrollView
       android:id="@+id/my_content"
       android:width="match_parent"
       android:height="match_parent"
       >
       <!-- Your content here. -->
     </ScrollView>
   
     <androidx.ink.authoring.InProgressStrokesView
       android:id="@+id/in_progress_strokes_view"
       android:width="match_parent"
       android:height="match_parent"
       />
   
   </FrameLayout>
   

2. สร้างอินสแตนซ์ InProgressStrokesView

   ภายในเมธอด [onCreate()][ink-draw-include6] ของกิจกรรมหรือ Fragment ให้รับการอ้างอิง InProgressStrokesView และสร้าง Listener แบบสัมผัสเพื่อจัดการอินพุตของผู้ใช้

   class MyActivity : View.OnTouchListener {
       private lateinit var contentView: ScrollView
       private lateinit var inProgressStrokesView: InProgressStrokesView
       private lateinit var predictor: MotionEventPredictor
   
       // ... other variables
   
       override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)
         predictor = MotionEventPredictor.newInstance(contentView)
           contentView = findViewById(R.id.my_content)
           contentView.setOnTouchListener(touchListener)
           inProgressStrokesView = findViewById(R.id.in_progress_strokes_view)
       }
   
       // ... (touchListener implementation)
   }
   

   หมายเหตุ: การใช้อินเทอร์เฟซ MotionEventPredictor จะช่วยปรับปรุงเวลาในการตอบสนองของโรคหลอดเลือดสมองโดยการคาดการณ์กิจกรรมการสัมผัสที่จะเกิดขึ้น ใช้ MotionEventPredictorเพื่อให้ได้ประสิทธิภาพสูงสุด

3. จัดการกิจกรรมการแตะ

   เมื่อสร้างคอมโพเนนต์ UI แล้ว ตอนนี้คุณก็เริ่มวาดตามเหตุการณ์การแตะได้

   MotionEvent action	InProgressStrokesView method	คำอธิบาย
   ACTION_DOWN	startStroke()	เริ่มแสดงผลเส้นวาด
   ACTION_MOVE	addToStroke()	แสดงภาพเส้นต่อ
   ACTION_UP	finishStroke()	แสดงผลเส้นให้เสร็จสมบูรณ์
   ACTION_CANCEL หรือ FLAG_CANCELED	cancelStroke()	ใช้การปฏิเสธฝ่ามือ ยกเลิกการรักษาโรคหลอดเลือดสมอง

   class MyActivity : View.OnTouchListener {
     private lateinit var contentView: ScrollView
     private lateinit var inProgressStrokesView: InProgressStrokesView
   
     private var pointerId = -1
     private var strokeId: InProgressStrokeId? = null
     private lateinit var predictor: MotionEventPredictor
   
     override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
   
       contentView = findViewById(R.id.my_content)
       predictor = MotionEventPredictor.create(contentView)
       contentView.setOnTouchListener(touchListener)
       inProgressStrokesView = findViewById(R.id.in_progress_strokes_view)
     }
   
     private val touchListener = { view: View, event: MotionEvent ->
       predictor.record(event)
         when (event.actionMasked) {
           MotionEvent.ACTION_DOWN -> {
             // First pointer - treat it as inking.
             view.requestUnbufferedDispatch(event)
             val pointerIndex = event.actionIndex
             pointerIdToStrokeId[event.getPointerId(pointerIndex)] =
               inProgressStrokesView.startStroke(event, pointerId)
             return true
           }
           MotionEvent.ACTION_POINTER_DOWN -> {
             val stroke = strokeId ?: return false
             inProgressStrokesView.cancelStroke(stroke, event)
             strokeId = null
             pointerId = -1
             return false
           }
           MotionEvent.ACTION_MOVE -> {
             val predictedEvent = predictor.predict()
             try
             {
               for (pointerIndex in 0 until pointerCount) {
                 val strokeId =
                 pointerIdToStrokeId[event.getPointerId(pointerIndex)] ?: continue
                 inProgressStrokesView.addToStroke(event, pointerId, strokeId, predictedEvent)
               } finally {
                 predictedEvent?.recycle()
               }
             }
           }
           MotionEvent.ACTION_UP -> {
             val pointerIndex = event.actionIndex
             val strokeId =
               pointerIdToStrokeId[event.getPointerId(pointerIndex)] ?: return false
             inProgressStrokesView.finishStroke(event, pointerId, strokeId)
             return true
           }
           MotionEvent.ACTION_CANCEL -> {
             val pointerIndex = event.actionIndex
             val strokeId =
               pointerIdToStrokeId[event.getPointerId(pointerIndex)] ?: return false
             inProgressStrokesView.cancelStroke(strokeId, event)
             return true
           }
         }
       return false
     }
   }
   

4. จัดการสโตรกที่เสร็จแล้ว

   เมื่อเรียกใช้ finishStroke() ระบบจะทำเครื่องหมายเส้นว่าเสร็จสมบูรณ์ แต่กระบวนการสรุปจะไม่ได้เกิดขึ้นทันที เส้นโครงร่างจะได้รับการประมวลผลโดยสมบูรณ์และจะเข้าถึงแอปพลิเคชันได้ในเวลาไม่นานหลังจากที่เรียกใช้ finishStroke() โดยเฉพาะอย่างยิ่งเมื่อไม่มีสโตรกอื่นๆ อยู่ระหว่างดำเนินการ วิธีนี้ช่วยให้มั่นใจได้ว่าการดำเนินการวาดทั้งหมดจะเสร็จสมบูรณ์ก่อนที่จะส่งเส้นให้กับไคลเอ็นต์เป็นเสร็จสมบูรณ์

   หากต้องการดึงข้อมูลเส้นที่เสร็จแล้ว คุณมี 2 ตัวเลือก ได้แก่

   • ใช้อินเทอร์เฟซ InProgressStrokesFinishedListener ภายในกิจกรรมหรือ ViewModel และลงทะเบียนผู้ฟังกับ InProgressStrokesView ด้วย addFinishedStrokesListener
   • ใช้เมธอด getFinishedStrokes() ของ InProgressStrokesView เพื่อรับเส้นที่เสร็จแล้วทั้งหมดโดยตรง

   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)
     }
   }
   

   เมื่อดึงข้อมูลเส้นที่วาดเสร็จแล้ว คุณจะใช้ ViewStrokeRenderer เป็นภาพนามธรรมระดับสูงขึ้นที่สร้างขึ้นจาก CanvasStrokeRenderer ได้ วิธีนี้ช่วยให้กระบวนการแสดงผลภายในลําดับชั้นของมุมมองง่ายขึ้น

   class DrawingView(context: Context) : View(context) {
     private val viewStrokeRenderer = ViewStrokeRenderer(myCanvasStrokeRenderer, this)
   
     override fun onDraw(canvas: Canvas) {
       viewStrokeRenderer.drawWithStrokes(canvas) { scope ->
         canvas.scale(myZoomLevel)
         canvas.rotate(myRotation)
         canvas.translate(myPanX, myPanY)
         scope.drawStroke(myStroke)
         // Draw other objects including more strokes, apply more transformations, ...
       }
     }
   }