Snapchat-like text in image

Question

I am trying to implement editable Snapchat text in an image. What I have done so far is to implement UILabel in the center of UIImageView, and I have added 3 gestures to this UILabel: UIPanGestureRecognizer, UIPinchGestureRecognizer and UIRotationGestureRecognizer.

I managed to implement the pan method, but it’s not easy for me to make Pinch + Rotation the same way they do, I get terrible T_T results

What do you guys think this was done? which components are involved in this, and if you have reading / viewing material that I could use for this.

Thanks:)

EDIT:

These are the methods I used to handle Pinch and Rotation:

func handlePinch(recognizer: UIPinchGestureRecognizer) { if let view = recognizer.view as? UILabel { view.transform = CGAffineTransformScale(view.transform, recognizer.scale, recognizer.scale) } } func handleRotate(recognizer: UIRotationGestureRecognizer) { if let view = recognizer.view as? UILabel { view.transform = CGAffineTransformRotate(view.transform, recognizer.rotation) } } 

Preview of how the pinch that I performed works: https://drive.google.com/file/d/0B-AVM51jxsvUY2RUUHdWbGo5QlU/view?usp=sharing

Answer 1

Found a solution, apparently, all I had to do in Rotation and Pinch was always reset the rotation / view scale. For example, setting my detectizer.scale to 1.0 and recognizing .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 } } 

Answer 2

For "scaled up / down too much too much":

You need to handle the value of the clamp stiffness scale according to your needs.

From your recognition method, you will get a scale value as:

  var pinchScale: CGFloat = recogniser.scale 

You need to change this value or how to reduce it by / 10 or / 100 according to your needs, and use this value in label conversion instead of using the scale bar.

Answer 3

The problem is that your code accepts the current transformation and adds another transformation based on the current "movement", so you accumulate changes (connecting them, really) when you move during one gesture.

Store instance variables for rotation, scaling, and moving, update the corresponding values ​​in each of your gesture recognizer actions (you will also need to save each state at the beginning of each gesture, so you can apply the delta to its original state) and create a transformation from scratch using these three variables. Of course, the creation of the transformation must be factorized in a separate function, since you are going to use it several times.

Answer 4

I'm not sure if this is exactly what you are looking for (I never used snapchat), but this may give you some ideas

https://github.com/danielinoa/DIImageView

I'm not sure if this has a pinch gesture, but I'm not quite sure how you mean it will be used anyway.

Here is a demo of this project: https://www.cocoacontrols.com/controls/diimageview

In general, I recommend checking cocoacontrols every time you run the risk of implementing something like this. You can usually find compelling examples, and sometimes you will find exactly what you need.