snapchat-like pinch zoom on iOS

Question

I've published iOS app in swift whose main functions are: 1) add a photo / take a photo 2) add emoji on the photo 3) zoom, rotate, drag emoji to decorate photo 4) share it on instagram.

Emojis can be rotated, zoomed, and dragged. I've implemented these functions using UIGestureRecognizers such as UIRoationGestrueRecognizer, UIPinchGestureRecognizer, and UIPanGesstureRecognizer.

Now I am trying to update app with snapchat-like pinch zoom feature where users can zoom in / out emojis between two fingers to the extreme. Current pinch gesture works only when users' fingers are on the imageView (emoji).

Any idea / example code how to do snapchat-like pinch zoom? Below codes are how I handled rotation, pinch, and drag. Thanks in advance.

// UI Gesture Recognizers
@IBAction func handlePinch(recognizer : UIPinchGestureRecognizer) {
    if(deleteMode) {
        return
    }
    if let view = recognizer.view {
        view.transform = CGAffineTransformScale(view.transform,
            recognizer.scale, recognizer.scale)
        recognizer.scale = 1
    }
}

@IBAction func handleRotate(recognizer : UIRotationGestureRecognizer) {
    if(deleteMode) {
        return
    }
    if let view = recognizer.view {
        view.transform = CGAffineTransformRotate(view.transform, recognizer.rotation)
        recognizer.rotation = 0
    }
}

@IBAction func handlePan(recognizer:UIPanGestureRecognizer) {
    if(deleteMode) {
        return
    }
    let translation = recognizer.translationInView(self.view)
    var centerX: CGFloat!
    var centerY: CGFloat!

    if let view = recognizer.view {

        // limit the boundary - using backgroundPanel.frame.width, height, origin.x, origin.y
        if(view.center.x + translation.x < panelBackground.frame.origin.x) {
            centerX = view.center.x + translation.x + 10
        } else if(view.center.x > panelBackground.frame.size.width){
            centerX = view.center.x + translation.x - 10
        } else {
            centerX = view.center.x + translation.x
        }

        if(view.center.y < panelBackground.frame.origin.y - 60){
            // set y that I can use below
            centerY = view.center.y + translation.y + 10
        } else if(view.center.y > panelBackground.frame.size.height){
            centerY = view.center.y + translation.y - 10
        } else {
            centerY = view.center.y + translation.y
        }

        // set final position
        view.center = CGPoint(x:centerX,
            y:centerY)

        recognizer.setTranslation(CGPointZero, inView: self.view)

    }
}

@IBAction func handleLongPress(recognizer: UILongPressGestureRecognizer) {
    if(recognizer.state == UIGestureRecognizerState.Began) {
        if(!deleteMode) {
            print("LongPress - Delete Shows")
            for (_, stickers) in self.backgroundImage.subviews.enumerate() {
                for (_, deleteButtons) in stickers.subviews.enumerate() {
                    if let delete:UIImageView = deleteButtons as? UIImageView{
                        if(delete.accessibilityIdentifier == "delete") {
                            delete.alpha = 0.5
                        }
                    }
                }
            }
            deleteMode = true
        } else {
            deleteButtonHides()
        }
    }
}

@MuhammadRaheelMateen I searched a lot but couldn't find any examples for snapchat-like pinch zoom in swift. If you can find one please provide one. — Sean Sehwan Choi, Mar 02 '16 at 20:37

Emre Önder · Answer 1 · 2019-12-17T10:17:26.033

I'm also looking drag, pan and zoom at the same time like snapchat but if you are just looking for zoom. I'm using below function for a label to zoom via pinch. It is not smooth but do the zooming job.

  func handlePinch(recognizer: UIPinchGestureRecognizer) {
    if let view = recognizer.view as? UILabel {
        let pinchScale: CGFloat = recognizer.scale
        view.transform = view.transform.scaledBy(x: pinchScale, y: pinchScale)
        recognizer.scale = 1.0
    }
}

For drag,pan and zoom at the same time, checkout my below post:

Pinch, drag and pan at the same time

score 0 · Answer 2 · answered Jan 06 '20 at 08:20

To achieve this snapchat like pinch zooming, add pinch gesture on Parent view also and instead of recognizer transform the selected sticker as written below:

@objc func mainImgPinchGesture(_ recognizer: UIPinchGestureRecognizer) {
       print("----pinchGestureAction")
       if let view = recognizer.view {
        if selectedSubView != nil{
            self.selectedSubView.transform = view.transform.scaledBy(x: recognizer.scale, y: recognizer.scale)
            self.selectedSubView.contentScaleFactor = 1
         }
       }
   }

snapchat-like pinch zoom on iOS

2 Answers2