Image

顯示圖像的view

---

定義

@frozen struct Image

• 文檔地址

簡介

Image是個后綁定的控件，系統只在需要它的時候才會給它賦予實際的數值。

---

基礎使用

1、 顯示圖片

import SwiftUI

struct ContentView: View {
    var body: some View {
       Image("1")
    }
}

效果

---

2、 自動適應大小

例子1的圖片沒有完全顯示全，我們可以用Image的resizable()來讓圖片自動適應

struct ContentView: View {
    var body: some View {
       Image("1")
        .resizable()
    }
}

效果

---

3. 保持原始比例

但是，這也可能導致圖像的原始縱橫比失真，因為它將在所有尺寸上拉伸所需的任何量以使其填充空間。

struct ContentView: View {
    var body: some View {
       Image("1")
        .resizable()
        .aspectRatio(contentMode: .fit)
    }
}

---

4. 點擊放大

struct ContentView: View {
     @State private var scale: CGFloat = 1.0
    
    var body: some View {
       Image("1")
        .resizable()
        .aspectRatio(contentMode: .fit)
         .scaleEffect(scale)
        .gesture(
            TapGesture()
                .onEnded { _ in
                    self.scale += 0.1
                    print("\(self.scale)")
                }
        )
    }
}

效果

---

5、手勢放大

struct ContentView: View {
    @State private var scale: CGFloat = 1.0
    
    var body: some View {
        Image("1")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .scaleEffect(scale)
            .gesture(MagnificationGesture()
                .onChanged { value in
                    self.scale = value.magnitude
                }
        )
    }
}

---

6、隨手勢移動

 @GestureState private var dragOffset = CGSize.zero
    @State private var position = CGSize.zero
    var body: some View {
        Image("1")
            .font(.system(size: 100))
            .offset(x: position.width + dragOffset.width, y: position.height + dragOffset.height)
            .animation(.easeInOut)
            .foregroundColor(.green)
            .gesture(
                DragGesture()
                    .updating($dragOffset, body: { (value, state, transaction) in
                        
                        state = value.translation
                    })
                    .onEnded({ (value) in
                        self.position.height += value.translation.height
                        self.position.width += value.translation.width
                    })
        )
        
    }

---

6、完整拖拽縮放三個手勢都支持

import SwiftUI

struct ContentView: View {
    @GestureState private var dragOffset = CGSize.zero
    @State private var position = CGSize.zero
    @State private var scale: CGFloat = 1.0
    
    
    var body: some View {
        Image("1")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .offset(x: position.width + dragOffset.width, y: position.height + dragOffset.height)
            .animation(.easeInOut)
            .scaleEffect(scale)
            
            // 縮放
            .gesture(MagnificationGesture()
                .onChanged { value in
                    self.scale = value.magnitude
                }
        )
            // 拖拽
            .gesture(
                DragGesture()
                    .updating($dragOffset, body: { (value, state, transaction) in
                        
                        state = value.translation
                    })
                    .onEnded({ (value) in
                        self.position.height += value.translation.height
                        self.position.width += value.translation.width
                    })
        )
            //點擊放大
            .gesture(
                TapGesture()
                    .onEnded { _ in
                        self.scale += 0.1
                        print("\(self.scale)")
                }
        )
        
        
        
    }
}

效果

---

參考資源

• https://www.appcoda.com/swiftui-gestures/