Swift 實現可拖動的遮罩層，展現兩張圖片的不同處

上面這張圖來自TinyPNG，他們的圖片壓縮服務真的不錯，不過如果我們需要去比較這兩張圖的差異，
眼球就需要不停的左右移動去看兩張圖，難免會覺得看不出差異在哪裡。

所以如果能夠將兩張圖片堆疊在一起，中間有根桿子來讓我們滑動，通過滑動來看出兩張圖片的差異，就可以變得直觀很多。

這是一張在「裡冷園區」參加高空擊球活動的照片，其實從小時候開始，從高空往下看都會有點恐懼，
不過來到這個園區就是為了不斷突破這個恐懼感，去挑戰各種高空活動。

左邊看得見的部分是原圖，右邊則是修改過的圖，我們可以通過拖動中間的桿子來即時的看見兩張圖在同一個位置上的差異性。

Swift實現方法

最底層，我們放了一張「原圖」，而在原圖的上面蓋著一張「修改過的圖」，而「修改過的圖」的上面我們放了一張maskView。

一開始我麼會將maskView設定在右側並且寬度為屏幕的一半。

設定mask

這裡的imageView2是指「修改過的圖」，即第二層的那張圖。

我們將imageView2的mask設定為maskView，也就是說，imageView2只會顯示和maskView重疊的部分。

imageView2.mask = maskView

1	imageView2.mask = maskView

UIPanGesture

然後給中間橘色的barImageView設置一個拖動手勢的偵測（UIPanGesture）

    func setupGesture() {
        barImageView.isUserInteractionEnabled = true
        
        let panGesture = UIPanGestureRecognizer(target: self, action: #selector(barDidSwipe(gesture:)))
        barImageView.addGestureRecognizer(panGesture)
    }

func setupGesture() {

barImageView.isUserInteractionEnabled = true

let panGesture = UIPanGestureRecognizer(target: self, action: #selector(barDidSwipe(gesture:)))

barImageView.addGestureRecognizer(panGesture)

}

barImageView的寬度是25，所以中心點的x可以簡單算成12.5，當使用者拖動中間的bar時，我們改變barImageView以及遮罩層的寬度即可（讓他左側跟著barImageview）。

移動barImageView和maskView

我們可以得到使用目前拖動的位置（point），通過檢測point.x的位置，接下來就是簡單的計算了。

    func barDidSwipe(gesture:UIGestureRecognizer) {
        if let panGesture = gesture as? UIPanGestureRecognizer {
            let point = panGesture.location(in: view)
            
            
            let halfBarWidth = CGFloat(12.5)
            barImageView.frame.origin.x = point.x - halfBarWidth
            
            let newMaskViewFrame = CGRect(x: point.x,
                                          y: maskView.frame.origin.y,
                                          width: view.frame.width - point.x,
                                          height: maskView.frame.height)
            maskView.frame = newMaskViewFrame
            
        }
        
    }

func barDidSwipe(gesture:UIGestureRecognizer) {

if let panGesture = gesture as? UIPanGestureRecognizer {

let point = panGesture.location(in: view)

let halfBarWidth = CGFloat(12.5)

barImageView.frame.origin.x = point.x - halfBarWidth

let newMaskViewFrame = CGRect(x: point.x,

y: maskView.frame.origin.y,

width: view.frame.width - point.x,

height: maskView.frame.height)

maskView.frame = newMaskViewFrame

}

參考和推薦

本文中的例子請參考Github上的「可拖動圖片遮罩層的例子」。

分享文章 – 「Swift 實現可拖動的遮罩層，展現兩張圖片的不同處」 – https://ios.devdon.com/archives/483

Swift實現方法

設定mask

UIPanGesture

移動barImageView和maskView

參考和推薦

2 thoughts on “Swift 實現可拖動的遮罩層，展現兩張圖片的不同處”

發表迴響取消回覆

Swift實現方法

設定mask

UIPanGesture

移動barImageView和maskView

參考和推薦

2 thoughts on “Swift 實現可拖動的遮罩層，展現兩張圖片的不同處”

發表迴響 取消回覆

發表迴響取消回覆