การแปลง: เลื่อน ซูม และหมุน

ท่าทางบางอย่างใช้สองนิ้วพร้อมกัน Compose รวมการเลื่อน การซูม และการหมุนไว้ในตัวช่วยเดียวที่เรียกว่า detectTransformGestures 🤏

ภายใน pointerInput detectTransformGestures จะส่งการเลื่อนเป็น Offset การซูมเป็นค่า Float scale และการหมุนเป็นองศามาให้พร้อมกัน

เก็บค่า scale ออฟเซ็ต และการหมุนไว้ในสถานะที่จดจำได้ อัปเดตแต่ละค่าจากท่าทางเพื่อให้องค์ประกอบเปลี่ยนรูปแบบแบบเรียลไทม์

ค่า การซูม เป็นค่าที่สัมพันธ์กับค่าเดิม จึงควรนำไปคูณกับสเกลแทนการแทนที่ค่าเดิม การบีบนิ้วออกจะขยาย ส่วนการบีบนิ้วเข้าจะย่อ

ค่าความเปลี่ยนแปลงของ การหมุน มีหน่วยเป็นองศาต่อหนึ่งขั้นของท่าทาง ให้สะสมค่านี้เพื่อให้การบิดสองนิ้วหมุนเนื้อหาอย่างลื่นไหล

ค่า Offset ของ การเลื่อน จะรายงานว่าจุดกึ่งกลางของท่าทางเคลื่อนที่ไปไกลเพียงใด ให้บวกค่านี้เข้ากับสถานะออฟเซ็ตเพื่อเลื่อนเนื้อหาใต้ปลายนิ้ว

วิธีแสดงการเปลี่ยนรูปแบบที่เป็นระเบียบคือใช้ตัวปรับแต่ง graphicsLayer ตั้งค่า scaleX, scaleY, rotationZ และการเลื่อนทั้งหมดไว้ในที่เดียว

ภายใน graphicsLayer ให้ตั้งค่า translationX และ translationY จากออฟเซ็ตของคุณ วิธีนี้จะเปลี่ยนรูปแบบโดยไม่บังคับให้เกิดขั้นตอนจัดวางที่มีต้นทุนสูง

ผู้ใช้อาจบีบนิ้วอย่างรุนแรง ดังนั้นให้ จำกัด สเกลให้อยู่ในขอบเขตที่เหมาะสมด้วย coerceIn เพื่อป้องกันไม่ให้เนื้อหาหายไปหรือขยายจนเต็มโลก

graphicsLayer จะใช้ scale ก่อน จากนั้นจึงหมุน แล้วจึงเลื่อน การรู้ลำดับนี้ช่วยให้คุณคาดเดาตำแหน่งที่เนื้อหาซึ่งผ่านการเปลี่ยนรูปแบบจะไปปรากฏได้

โดยค่าเริ่มต้น การเปลี่ยนรูปแบบจะใช้จุดศูนย์กลางขององค์ประกอบเป็นจุดหมุน ปรับ transformOrigin ใน graphicsLayer เพื่อซูมและหมุนรอบจุดอื่น

คุณใช้ detectTransformGestures สำหรับการเลื่อน การซูม และการหมุน แล้วนำไปใช้ผ่าน graphicsLayer พร้อมจำกัดค่า ตอนนี้คุณพร้อมใช้การบีบนิ้วเพื่อซูมแล้ว 🎉