खरोंच से Android घटक - 2 - छवियों के लिए आवर्धक

इंटरनेट पर समय-समय पर, मुख्य रूप से विभिन्न दुकानों और व्यापारिक फर्श की वेबसाइटों पर, हम एक सॉफ्टवेयर आवर्धक के रूप में आते हैं जो आपको विभिन्न सामानों की अधिक विस्तार से तस्वीरों की जांच करने की अनुमति देता है (वेबसाइट www.ebay.com पर कुछ ऐसा ही लागू किया गया है)। हम एंड्रॉइड प्लेटफ़ॉर्म (विशेषकर शुरुआती) के लिए इस तरह के एक आवर्धक के निर्माण में लगे रहेंगे।

असाइनमेंट: तस्वीरों की अधिक विस्तृत समीक्षा के लिए एक घटक आवर्धक का विकास करना। प्रारंभ में, स्क्रीन एक चित्र दिखाती है जिसके आयाम डिवाइस की स्क्रीन के आनुपातिक होते हैं (चित्र पूर्ण स्क्रीन पर दिखाया गया है)। जब आप स्क्रीन पर अपनी उंगली को छूते हैं, तो छवि को बढ़ाना चाहिए और इस क्षेत्र को स्पर्श के सापेक्ष दिखाया जाएगा, अर्थात, जब आप प्रतिशत पर क्लिक करते हैं, तो छवि का बढ़े हुए मध्य भाग दिखाई देना चाहिए, और जब आप ऊपरी दाएं कोने पर क्लिक करते हैं, तो दाहिने ऊपरी हिस्से का बढ़ा हुआ भाग दिखाया जाना चाहिए, आदि। एन।

ट्रेनिंग

एक नई परियोजना और PZoom वर्ग बनाएं, पूर्वजों के रूप में दृश्य वर्ग का उपयोग करें।
हम निम्नलिखित कार्यों में रुचि रखते हैं:
PZoom - वर्ग निर्माता;
onDraw - ड्राइंग फ़ंक्शन, हर बार कॉल किया जाता है जब घटक को फिर से तैयार करना आवश्यक होता है;
onTouchEvent - बाहरी घटनाओं पर नज़र रखने का कार्य, जिसे हर बार उपयोगकर्ता उंगली से स्क्रीन पर क्लिक करता है और घटक को छूता है, साथ ही जब वह घटक पर अपनी उंगली घुमाता है और अपनी उंगली भी दबाता है।
अपने कार्य को सरल बनाने के लिए, हम ड्रा करने योग्य फ़ोल्डर में पहले से रखी गई केवल एक तस्वीर का उपयोग "img" नाम से करेंगे (चित्र जितना बड़ा होगा, उतना ही अधिक दृश्य प्रभाव आपको मिलेगा)। कक्षा की शुरुआत में, ड्रा करने योग्य प्रकार की एक नई वस्तु घोषित करें।

private Drawable image; //   

निर्माता में आगे, वांछित चित्र को चित्र में रखें और फ़्रेम सेट करें:

 image = context.getResources().getDrawable(R.drawable.img); image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight()); 

अब ड्राइंग प्रक्रिया को फिर से बनाएँ:

  @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.save(); //    (,   .....) image.draw(canvas); //      canvas.restore(); //  ,      } 

आवेदन के मुख्य वर्ग पर जाएं और निम्नानुसार वर्ग के निर्माता को संशोधित करें:

  @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(new PZoom(this)); } 

ये क्रियाएं Pzoom क्लास बनाती हैं और इसे मुख्य के रूप में परिभाषित करती हैं, यानी अब केवल इस घटक को स्क्रीन पर प्रदर्शित किया जाएगा।
अब, यदि आप एप्लिकेशन चलाते हैं, तो आप स्क्रीन पर केवल डाउनलोड की गई छवि का हिस्सा देखेंगे, क्योंकि यह स्क्रीन पर पूरी तरह से फिट नहीं है (चित्र स्क्रीन से बड़ा है)।

कार्यात्मक

शुरू करने के लिए, आइए डिफ़ॉल्ट रूप से चित्र को स्क्रीन के बीच में फिट करें और इसके आयाम स्क्रीन के आनुपातिक हैं। ऐसा करने के लिए, हम एक अलग सेटकेंटर फ़ंक्शन लिखेंगे जो सतह पर छवि की स्थिति निर्धारित करता है, साथ ही साथ अनुपात के लिए सही गुणक भी होता है।
कक्षा की शुरुआत में अतिरिक्त चर घोषित करें:

  int X = 0,Y = 0; //     float scale = 0; //    int pX = 0, pY = 0; //     int dWidth = 0, dHeight = 0; //   

अब फंक्शन का मुख्य भाग (इसे चबाने का कोई मतलब नहीं है, यह प्राथमिक गणित है):

  void SetCenter(){ //     if(dWidth>dHeight) // scale = (float)dHeight/image.getIntrinsicHeight(); else scale = (float)dWidth/image.getIntrinsicWidth(); //    if((dWidth-image.getIntrinsicWidth()*scale)>0){ X = (int)((dWidth-(image.getIntrinsicWidth()*scale))/2/scale); Y = 0; } else { X = 0; Y = (int)((dHeight-(image.getIntrinsicHeight()*scale))/2/scale); } } 

अब हम विजेट के ड्राइंग फ़ंक्शन को जोड़ते हैं:

 @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.save(); //    (,   .....) if (dWidth==0){ //        dWidth = canvas.getWidth(); dHeight = canvas.getHeight(); } if (pX==0) { //    SetCenter(); //      } canvas.scale(scale, scale); // ZooM canvas.translate(X,Y); //   image.draw(canvas); //      canvas.restore(); //  ,      } 

शुरुआत में, विजेट आकार चर में डेटा की उपलब्धता की जांच होती है, यदि वे शून्य के बराबर हैं, तो हम विजेट आकार का पता लगाते हैं। अगला, कर्सर की स्थिति में डेटा की उपस्थिति की जांच की जाती है, यदि यह शून्य है (उपयोगकर्ता की उंगली विजेट पर नहीं है), तो हम छवि केंद्रित फ़ंक्शन शुरू करते हैं। उसके बाद, छवि को खिंचाव के मूल्य के अनुसार आकार दिया जाता है। फिर तस्वीर की एक पारी है। अंत में, चित्र खींचा जाता है और मैट्रिसेस को रीसेट किया जाता है।
हम सबसे महत्वपूर्ण चीज की ओर मुड़ते हैं - दबाए गए उंगली के सापेक्ष चित्र के आकार और स्थिति को बदलते हुए। सबसे पहले, आपको ऑन-स्क्रीन स्क्रीन पर उंगली की स्थिति के लिए प्रक्रिया को फिर से परिभाषित करना चाहिए:

  @Override public boolean onTouchEvent(MotionEvent event) { //   pX=(int) event.getX(); //   X pY=(int) event.getY(); //   Y int Action=event.getAction(); //  //   if (Action==MotionEvent.ACTION_UP){ pX = 0; pY = 0; } invalidate(); //   return true; } 

मैं यह वर्णन नहीं करूंगा कि कौन रुचि रखता है तो पहले लेख का संदर्भ लें। यह स्क्रीन पर छवि की नई स्थिति की गणना करने के लिए एक प्रक्रिया बनाने के लिए बनी हुई है, इसके निम्न रूप होंगे:

  void NewPosition(){ scale = 1; //    //          X = (int)((float)-image.getIntrinsicWidth()*((float)pX/dWidth)+((float)dWidth*((float)pX/dWidth))); Y = (int)((float)-image.getIntrinsicHeight()*((float)pY/dHeight)+((float)dHeight*((float)pY/dHeight))); //         if (X>0) X=0; if (Y>0) Y=0; } 

विजेट के रेंडरिंग फ़ंक्शन को थोड़ा बदल दें, अर्थात्, यदि कर्सर पोजिशन वेरिएबल खाली नहीं है, तो हम एक नए पोजिशन की गणना करते हैं:

 if (pX==0) { //    SetCenter(); //      } else { NewPosition(); //      } 

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

आवर्धक कांच वर्ग का अंतिम दृश्य:

 package com.gc986.photozoom; import android.content.Context; import android.graphics.Canvas; import android.graphics.drawable.Drawable; import android.view.MotionEvent; import android.view.View; public class PZoom extends View { private Drawable image; //   int X = 0,Y = 0; //     float scale = 0; //    int pX = 0, pY = 0; //     int dWidth = 0, dHeight = 0; //   public PZoom(Context context) { super(context); //     image = context.getResources().getDrawable(R.drawable.img); image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight()); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.save(); //    (,   .....) if (dWidth==0){ //        dWidth = canvas.getWidth(); dHeight = canvas.getHeight(); } if (pX==0) { //    SetCenter(); //      } else { NewPosition(); //      } canvas.scale(scale, scale); // ZooM canvas.translate(X,Y); //   image.draw(canvas); //      canvas.restore(); //  ,      } /** */ void SetCenter(){ //     if(dWidth>dHeight) // scale = (float)dHeight/image.getIntrinsicHeight(); else scale = (float)dWidth/image.getIntrinsicWidth(); //    if((dWidth-image.getIntrinsicWidth()*scale)>0){ X = (int)((dWidth-(image.getIntrinsicWidth()*scale))/2/scale); Y = 0; } else { X = 0; Y = (int)((dHeight-(image.getIntrinsicHeight()*scale))/2/scale); } } /**   */ void NewPosition(){ scale = 1; //    //          X = (int)((float)-image.getIntrinsicWidth()*((float)pX/dWidth)+((float)dWidth*((float)pX/dWidth))); Y = (int)((float)-image.getIntrinsicHeight()*((float)pY/dHeight)+((float)dHeight*((float)pY/dHeight))); //         if (X>0) X=0; if (Y>0) Y=0; } @Override public boolean onTouchEvent(MotionEvent event) { //   pX=(int) event.getX(); //   X pY=(int) event.getY(); //   Y int Action=event.getAction(); //  //   if (Action==MotionEvent.ACTION_UP){ pX = 0; pY = 0; } invalidate(); //   return true; } } 

इसे आदर्श रूप से पता लगाना चाहिए - http://youtu.be/GHB91_RzORY
आप निम्न लिंक पर सभी टिप्पणियों के साथ नमूना संग्रह डाउनलोड कर सकते हैं - http://www.anprog.com/documents/Photo_Zoom.zip