Snapchat-Like Text on Image

Snapchat-like text on image

Found a solution, apparently all I needed to do in the Rotation & Pinch is to always reset the view's rotation / scale.
For instance, setting my recognizer.scale to 1.0 and recognizer.rotation to 0.0.

Here is an example of my code:

func handlePan(recognizer: UIPanGestureRecognizer) {
    let translation = recognizer.translationInView(view)
    if let view = recognizer.view {
        view.center = CGPoint(x:view.center.x + translation.x,
            y:view.center.y + translation.y)
    }
    recognizer.setTranslation(CGPointZero, inView: view)
}

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

func handleRotate(recognizer: UIRotationGestureRecognizer) {
    if let view = recognizer.view as? UILabel {
        let rotation: CGFloat = recognizer.rotation
        view.transform = CGAffineTransformRotate(view.transform, rotation)
        recognizer.rotation = 0.0
    }
}

How does Snapchat show text over image

If we check /ph/upload in Snapchat API (last updated 23-12-2013) we can see that you can upload either a photo or a video.

Of course, this is not the latest version (although this is the last documentation I could find) but I am assumming nothing has changed in that regard.

That means the text is inserted to the photo in the mobile client app, not on the server.

In my opinion, you shouldn't base any decisions about your API architecture on Snapchat because it's unlikely you have the same use cases. In general:

1. Sending data separately is more flexible and makes client implementation simpler.
2. Rendering data on the client is better for user experience (everything is faster and the user can see the final result) and also it saves a lot of server resources (the more users you have the more this will be visible).

Objective-C How does snapchat make the text on top of an image/video so sharp and not pixelated?

When you use UIGraphicsBeginImageContext, it defaults to a 1x scale (i.e. non-retina resolution). You probably want:

UIGraphicsBeginImageContextWithOptions(imageView.layer.bounds.size, YES, 0);

Which will use the same scale as the screen (probably 2x). The final parameter is the scale of the resulting image; 0 means "whatever the screen is".

---

Related Topics