Transform: Pan, Zoom और Rotate

कुछ हावभाव एक साथ दो उँगलियों का उपयोग करते हैं। Compose पैन, ज़ूम और घुमाव को detectTransformGestures नामक एक सहायक में समेटता है। 🤏

pointerInput के भीतर detectTransformGestures आपको पैन के रूप में Offset, ज़ूम के रूप में Float scale और घुमाव को डिग्री में एक साथ देता है।

याद रखी गई स्थिति में एक scale, ऑफ़सेट और घुमाव रखें। हावभाव से हर मान अपडेट करें, ताकि तत्व तुरंत रूपांतरित हो।

ज़ूम मान सापेक्ष होता है, इसलिए उसे बदलने के बजाय अपनी स्केल में गुणा करें। बाहर की ओर पिंच करने से आकार बढ़ता है और अंदर की ओर करने से घटता है।

घुमाव का अंतर हावभाव के हर चरण में डिग्री में मिलता है। उसे जोड़ते जाएँ, ताकि दो उँगलियों को घुमाने पर सामग्री सहज रूप से घूमे।

पैन Offset बताता है कि हावभाव का केंद्र कितनी दूर गया। सामग्री को उँगलियों के नीचे सरकाने के लिए इसे अपनी ऑफ़सेट स्थिति में जोड़ें।

रूपांतरण दिखाने का साफ़ तरीका graphicsLayer संशोधक है। एक ही जगह scaleX, scaleY, rotationZ और translation सेट करें।

graphicsLayer के भीतर अपने ऑफ़सेट से translationX और translationY सेट करें। इससे महँगा लेआउट चरण चलाए बिना रूपांतरण होता है।

उपयोगकर्ता बहुत अधिक पिंच कर सकते हैं, इसलिए coerceIn से अपनी स्केल को उचित सीमाओं में सीमित करें। इससे सामग्री गायब होने या पूरी दुनिया जितनी बड़ी होने से बचती है।

graphicsLayer पहले scale, फिर घुमाव और अंत में अनुवाद लागू करता है। यह क्रम जानने से आप अनुमान लगा सकते हैं कि रूपांतरित सामग्री कहाँ पहुँचेगी।

डिफ़ॉल्ट रूप से रूपांतरण तत्व के केंद्र के आसपास होता है। किसी अन्य बिंदु के आसपास ज़ूम और घुमाव करने के लिए graphicsLayer में transformOrigin समायोजित करें।

आपने पैन, ज़ूम और घुमाव के लिए detectTransformGestures का उपयोग किया, फिर उन्हें सीमित करके graphicsLayer के माध्यम से लागू किया। पिंच-टू-ज़ूम अब आपका है। 🎉