कैसे करें स्विफ्टयूआई के साथ इमेज?

Question

मेरे पास Assets.xcassets में एक बड़ी छवि है। इसे छोटा बनाने के लिए SwiftUI के साथ इस छवि का आकार कैसे बदलें?

मैंने फ्रेम सेट करने की कोशिश की लेकिन यह काम नहीं करता है:

Image(room.thumbnailImage)
    .frame(width: 32.0, height: 32.0)

Answer 1

.resizable()किसी भी आकार के संशोधन को लागू करने से पहले आपको इसका उपयोग करना चाहिए Image।

Image(room.thumbnailImage)
    .resizable()
    .frame(width: 32.0, height: 32.0)

Comments

और आप कैसे पहलू अनुपात रखते हुए छवि का आकार बदलते हैं?

— मार्क कांग

@MarkKang मैंने इसे आज़माया नहीं, लेकिन aspectRatio(_:contentMode:)

— rraphael

छवि ("Image01") .resizable () .aspectRatio (UIImage (नाम: "image01"))

— मार्क कांग

वह अच्छा रहेगा। लेकिन मुझे लगता है कि फिट के साथ एक बग है। hackingwithswift.com/swiftui/…

— मार्क कांग

Image("name").resizable().scaledToFit()हालांकि, यह छोटा नहीं है। तो आप अपनी छवि को एक दृश्य में लपेट सकते हैं, दृश्य के फ्रेम को जिस भी आकार की आवश्यकता है, उसे समायोजित कर सकते हैं, फिर scaledToFit()तब पहलू अनुपात रखते हुए छवि को उतना बड़ा बना सकते हैं।

— ०:०४ पर जैमों

Answer 2

इस बारे में कैसा है:

struct ResizedImage: View {
    var body: some View {

            Image("myImage")
                .resizable()
                .scaledToFit()
                .frame(width: 200.0,height:200)

    }
}

छवि दृश्य 200x200 है, लेकिन छवि मूल पहलू अनुपात को बनाए रखती है (उस फ्रेम के भीतर)

Comments

यह समाधान मेरे मामले में मूल पहलू अनुपात को नहीं रखता है।

— पोइया

@ pm89 आपकी मूल और अंतिम छवि / दृश्य किस आकार के हैं?

— कन्फ्यूज्ड वोरलॉन

मूल पहलू अनुपात 3/2 है और परिणाम 1/1 हो जाता है जो छवि को फैलाता है। यह एक स्विफ्टयूई बग लगता है। मैंने मार्क कांग द्वारा सुझाई गई विधि का उपयोग स्वीकार किए गए उत्तर के तहत टिप्पणियों में किया, Image(uiImage: image!).resizable().aspectRatio(image!.size, contentMode: .fill)जहां imageप्रकार है UIImageक्योंकि Imageप्रकार किसी भी आकार की संपत्ति को उजागर नहीं करता है।

— पोइया

मेरे लिए यह इस तरह काम करता है जिसमें पहलू अनुपात को ध्यान में रखते हुए, धन्यवाद l

— laka

यह मेरे लिए पहलू अनुपात रखता है, लेकिन आकार का सम्मान नहीं करता है - यानी, मुझे एक वर्ग छवि नहीं मिलती है।

— क्रिस प्रिंस

Answer 3

@ रिप्रेल के जवाब और टिप्पणियों पर विस्तार:

Xcode 11 बीटा 2 के रूप में, आप किसी अन्य तत्व में छवि को लपेटकर मूल पहलू अनुपात को बनाए रखते हुए, मनमाने आयामों के लिए एक छवि को स्केल कर सकते हैं।

जैसे

struct FittedImage: View
{
    let imageName: String
    let width: CGFloat
    let height: CGFloat

    var body: some View {
        VStack {
            Image(systemName: imageName)
                .resizable()
                .aspectRatio(1, contentMode: .fit)
        }
        .frame(width: width, height: height)
    }
}


struct FittedImagesView: View
{
    private let _name = "checkmark"

    var body: some View {

        VStack {

            FittedImage(imageName: _name, width: 50, height: 50)
            .background(Color.yellow)

            FittedImage(imageName: _name, width: 100, height: 50)
            .background(Color.yellow)

            FittedImage(imageName: _name, width: 50, height: 100)
            .background(Color.yellow)

            FittedImage(imageName: _name, width: 100, height: 100)
            .background(Color.yellow)

        }
    }
}

परिणाम

(किसी कारण से, छवि थोड़ी धुंधली दिखाई दे रही है। बाकी का आश्वासन दिया है कि असली आउटपुट तेज है।)

Comments

आप शायद SO पर एक धुंधली छवि देख रहे हैं क्योंकि आप एक उच्च-डीपीआई मॉनिटर का उपयोग कर रहे हैं। मैं इसे एक नियमित-डीपीआई मॉनिटर पर रखता हूं और यह कुरकुरा दिखता है

— बेन लेगिएरियो

यह मूल पहलू अनुपात रखता है, केवल इसलिए कि मूल छवि का पहलू अनुपात 1 है (छवि एक वर्ग है) और आप उपयोग कर रहे हैं .aspectRatio(1, ...। यह कहने के लिए नहीं कि यहाँ किसी अन्य समाधान ने मेरे लिए अब तक काम किया है ...

— पोइया

Answer 4

SwiftUI में, .resizable()किसी छवि का आकार बदलने के लिए विधि का उपयोग करें । का उपयोग करके .aspectRatio()और निर्दिष्ट करके ContentMode, आप छवि को "फिट" या "भर" कर सकते हैं, जैसा कि उपयुक्त है।

उदाहरण के लिए, यहां वह कोड है जो फिटिंग द्वारा छवि का आकार बदलता है:

Image("example-image")
.resizable()
.aspectRatio(contentMode: .fit)

Answer 5

खैर, यह स्विफ्टयूआई में बहुत आसान लगता है / उनके द्वारा दिए गए डेमो के बाद: https://developer.apple.com/videos/play/wwdc2019/204

struct RoomDetail: View {
     let room: Room
     var body: some View {

     Image(room.imageName)
       .resizable()
       .aspectRatio(contentMode: .fit)
 }

आशा है कि इससे सहायता मिलेगी।

Answer 6

struct AvatarImage: View {
    var body: some View {

            Image("myImage")
                .resizable()
                .scaledToFill() // <=== Saves aspect ratio
                .frame(width: 60.0, height:60)
                .clipShape(Circle())

    }
}

Answer 7

नोट: मेरी छवि का नाम है img_Logoऔर आप छवि का नाम बदल सकते हैं छवि गुण इसे परिभाषित कर सकते हैं:

 VStack(alignment: .leading, spacing: 1) {
                        //Image Logo Start
                        Image("img_Logo")
                            .resizable()
                            .padding(.all, 10.0)
                            .frame(width: UIScreen.main.bounds.width * 0.4, height: UIScreen.main.bounds.height * 0.2)
                        //Image Logo Done
                    }

Comments

मैं आपको अपने कोड के साथ एक संक्षिप्त पाठ, किसी प्रकार का स्पष्टीकरण लिखने की अत्यधिक सलाह दूंगा। कृपया यहां आचार संहिता देखें: stackoverflow.com/conduct

— disp_name

Answer 8

एक अन्य दृष्टिकोण scaleEffectसंशोधक का उपयोग करना है :

Image(room.thumbnailImage)
    .resizable()
    .scaleEffect(0.5)

Answer 9

यदि आप आकार बदलने के साथ पहलू अनुपात का उपयोग करना चाहते हैं तो आप निम्नलिखित कोड का उपयोग कर सकते हैं:

Image(landmark.imageName).resizable()
                .frame(width: 56.0, height: 56.0)
                .aspectRatio(CGSize(width:50, height: 50), contentMode: .fit)

Answer 10

चूंकि हमें छवि का आकार हार्डकोड / तय नहीं करना चाहिए। यहां विभिन्न उपकरणों पर स्क्रीन के रिज़ॉल्यूशन के अनुसार समायोजित करने के लिए रेंज प्रदान करने का एक बेहतर तरीका है।

Image("ImageName Here")
       .resizable()
       .frame(minWidth: 60.0, idealWidth: 75.0, maxWidth: 95.0, minHeight: 80.0, idealHeight: 95.0, maxHeight: 110.0, alignment: .center)
       .scaledToFit()
       .clipShape(Capsule())
       .shadow(color: Color.black.opacity(5.0), radius: 5, x: 5, y: 5)

Answer 11

डिफ़ॉल्ट रूप से, छवि दृश्य स्वचालित रूप से अपनी सामग्री के आकार का हो जाता है, जो उन्हें स्क्रीन से परे जा सकता है। यदि आप resizable () संशोधक जोड़ते हैं, तो छवि इसके बजाय स्वचालित रूप से आकार में हो जाएगी ताकि यह सभी उपलब्ध स्थान को भर दे:

Image("example-image")
    .resizable()

हालाँकि, इससे छवि भी अपने मूल पहलू अनुपात को विकृत कर सकती है, क्योंकि इसे अंतरिक्ष को भरने के लिए जितनी भी राशि की आवश्यकता होती है, उसे सभी आयामों में बढ़ाया जाएगा।

यदि आप इसका पहलू अनुपात रखना चाहते हैं, तो आपको इस तरह से .fill या .fit का उपयोग करके एक पहलू अनुपात संशोधक जोड़ना चाहिए।

Image("example-image")
    .resizable()
    .aspectRatio(contentMode: .fit)

Answer 12

यदि आप स्विफ्टयूआई में छवि का आकार बदलना चाहते हैं तो बस निम्नलिखित कोड का उपयोग करें:

import SwiftUI

    struct ImageViewer : View{
        var body : some View {
            Image("Ssss")
            .resizable()
            .frame(width:50,height:50)
        }
    }

लेकिन यहाँ इस के साथ समस्या है। यदि आप इस छवि को एक बटन के अंदर जोड़ते हैं, तो छवि नहीं दिखाई जाएगी, बस नीले रंग का एक ब्लॉक होगा। इस समस्या को हल करने के लिए, बस यह करें:

import SwiftUI

struct ImageViewer : View{
    var body : some View {
        Button(action:{}){
        Image("Ssss")
        .renderingMode(.original)
        .resizable()
        .frame(width:50,height:50)
    }
   }
}

Answer 13

आप निम्न के रूप में छवि गुण परिभाषित कर सकते हैं: -

   Image("\(Image Name)")
   .resizable() // Let you resize the images
   .frame(width: 20, height: 20) // define frame size as required
   .background(RoundedRectangle(cornerRadius: 12) // Set round corners
   .foregroundColor(Color("darkGreen"))      // define foreground colour 

Answer 14

कोड की तार्किक संरचना को समझना बहुत महत्वपूर्ण है। जैसे स्विफ्टयूआई में एक छवि डिफ़ॉल्ट रूप से resizable नहीं है। इस प्रकार, किसी भी छवि का आकार बदलने के लिए आपको एक छवि दृश्य घोषित करने के तुरंत बाद .resizable () संशोधक को लागू करके इसे आकार बदलने योग्य बनाना होगा।

Image("An Image file name")
    .resizable()