SwiftUI Image 圖片處理

ThankCAT發表於2024-05-06

程式碼片段

//
//  ContentView.swift
//  SwiftUIImage
//
//  Created by CHEN Hao on 2024/5/6.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        Image("paris")
            .resizable() // 延伸模式,平鋪整個螢幕
        
            // 不保持長寬比
            // .ignoresSafeArea() // 忽略安全區域&排除忽略的安全區域(.container, edges: .bottom)
        
            // 保持長寬比
            // .scaledToFit()
            // 同上
            .aspectRatio(contentMode: .fit)
            // .frame(width: 300)
            // .clipped() // 剪裁圖片,基於frame設定的寬度
            // .clipShape(Circle()) // 剪裁成形狀
            // .opacity(0.5) // 透明度
        
            // 重疊
//            .overlay(
//                Image(systemName: "heart.fill")
//                    .font(.system(size: 50))
//                    .foregroundStyle(.black)
//                    .opacity(0.5)
//            )
        
//            .overlay(
//                    Text("If you are lucky enough to have lived in Paris as a young man, then wherever you go for the rest of your life it stays with you, for Paris is a moveable feast.\n\n- Ernest Hemingway")
//                        .fontWeight(.heavy)
//                        .font(.system(.headline, design: .rounded))
//                        .foregroundStyle(.white)
//                        .padding()
//                        .background(Color.black) // 背景顏色
//                        .cornerRadius(10) // 圓角
//                        .opacity(0.8)
//                        .padding(),
//                    
//                    alignment: .top // 覆蓋位置對齊
//
//            )
        
//            .overlay(
//                Rectangle()
//                    .foregroundStyle(.black)
//                    .opacity(0.4)
//            )
            // 同上
            .overlay(
                Color.black
                    .opacity(0.4)
                    .overlay(
                        Text("Paris")
                            .fontWeight(.black)
                            .font(.largeTitle)
                            .foregroundStyle(.white)
                            .frame(width: 200)
                    )
            )
            
    }
}

#Preview {
    ContentView()
}

效果

相關文章