मुख्य सामग्री पर जाएँ
CrossFly 100% ओपन सोर्सGitHub पर फ़ॉलो करें
CrossFlyCrossFly
शुरू करें

यह पृष्ठ पुर्तगाली से मशीन-अनुवादित है और इसमें त्रुटियाँ हो सकती हैं। पुर्तगाली संस्करण प्रामाणिक है।

किसी Component में पृष्ठभूमि छवि कैसे सेट करें

उद्देश्य। किसी भी Component (एक स्क्रीन, एक पैनल, एक कार्ड) की सामग्री के पीछे एक छवि खींचना, यह नियंत्रित करते हुए कि वह क्षेत्र को कैसे भरे और कहाँ केंद्रित रहे। ImageView के विपरीत, पृष्ठभूमि छवि को घटक स्वयं, अपने बच्चों के पीछे, पेंट करता है।

उपयोग की गई APIs

  • void Component.addBackgroundImage(Image image, ImageSize imageSize, float centerX, float centerY) — एक पृष्ठभूमि छवि जोड़ता है। centerX/centerY 0 से 1 तक के अंश हैं जो छवि को शेष स्थान के भीतर स्थित करते हैं (0.5, 0.5 = केंद्रित)।
  • void Component.addBackgroundImage(Image image, Relative width, Relative height, float centerX, float centerY) — ImageSize के बजाय स्पष्ट सापेक्ष चौड़ाई/ऊँचाई (via Relative) वाला प्रकार।
  • ImageSize (enum, UIConstants में सत्यापित): ORIGINAL, RATIO, STRETCH, FIT, FIT_WIDTH, FIT_HEIGHT, FIT_HALF_WIDTH, FIT_HALF_HEIGHT।

पृष्ठभूमि के लिए उपयोगी मोड (BackgroundImage.onPaint में व्यवहार)

  • FIT — अनुपात बनाए रखते हुए पूरे क्षेत्र को कवर करता है (बाहर निकल सकता है/कट सकता है)। वॉलपेपर के लिए विशिष्ट मोड।
  • RATIO — अनुपात बनाए रखते हुए पूरी छवि को क्षेत्र के भीतर फिट करता है (letter-box)।
  • STRETCH — अनुपात की अनदेखी करते हुए ठीक-ठीक भरने के लिए खींचता है।
  • ORIGINAL — प्राकृतिक आकार, बिना स्केल के।

पूर्ण उदाहरण (कॉपी करें, पेस्ट करें और चलाएँ)

package com.exemplo;

import java.io.IOException;

import dev.crossfly.ui.*;                     // Window, Component
import dev.crossfly.ui.layout.*;             // VerticalLayout
import dev.crossfly.ui.image.*;              // Image, ImageException
import dev.crossfly.ui.UIConstants.ImageSize;

/** चलाने योग्य मुख्य स्क्रीन। launcher (classname) की ओर संकेत करें और चलाएँ: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      try {
         Image bg = new Image("/sdcard/wallpaper.jpg");

         // पूरे component को (यहाँ, विंडो स्वयं) कवर करता है, केंद्रित,
         // अनुपात बनाए रखते हुए:
         addBackgroundImage(bg, ImageSize.FIT, 0.5f, 0.5f);
      } catch (ImageException | IOException e) {
         // फ़ाइल नहीं मिली या भ्रष्ट है
      }
   }
}

नीचे दिया गया अंश केवल मुख्य भाग दिखाता है। चलाने के लिए, इसे ऊपर दिए गए MainWindow ढांचे में रखें।

न्यूनतम अंश

// स्रोत में सत्यापित: Component.addBackgroundImage (158, 181); BackgroundImage.java onPaint (105)
import dev.crossfly.ui.image.Image;
import dev.crossfly.ui.UIConstants.ImageSize;

Image bg = new Image("/sdcard/wallpaper.jpg");

// पूरे component को कवर करता है, केंद्रित, अनुपात बनाए रखते हुए:
meuComponent.addBackgroundImage(bg, ImageSize.FIT, 0.5f, 0.5f);

कार्यान्वयन नोट्स (स्रोत):

  • ORIGINAL को छोड़कर सभी मोड के लिए, यदि छवि लक्ष्य क्षेत्र से बड़ी हो तो BackgroundImage छवि को एक बार पूर्व-स्केल करता है (resize(..., ResizeMode.STRETCH, ResizeQuality.FAST)) और परिणाम को कैश करता है, जिससे GPU की टेक्सचर बैंडविड्थ कम होती है। यदि resize विफल हो, तो यह मूल छवि पर वापस आ जाता है।
  • centerX/centerY छवि को शेष स्थान के भीतर विस्थापित करते हैं: स्थिति (component.width - w) * centerX है (Y के लिए भी वही)। 0,0 के साथ छवि ऊपरी बाएँ कोने से चिपक जाती है।
  • एक ही घटक में कई पृष्ठभूमि छवियाँ जोड़ना संभव है; उन्हें सम्मिलन के क्रम में पेंट किया जाता है।

और गहराई से जानें

  • संबंधित रेसिपी: carregar-arquivo-rede.md — पृष्ठभूमि के रूप में उपयोग करने से पहले छवि को लोड करें।
  • छवियाँ — ImageSize के मोड विस्तार से।
क्या यह पृष्ठ उपयोगी था?