Image Warp in IOS - ios

Question

i am new bie in IOS Image editing work.
I want to make functionality of Image Warp in ios or swift (any one).
I search lots of googling but not getting exact what i want
below link i am searf
How can you apply distortions to a UIImage using OpenGL ES?
https://github.com/BradLarson/GPUImage
https://github.com/Ciechan/BCMeshTransformView
Here is image what i want (When i touch the grid point image should we wrap and if i place the grid point at original place its should be original like wise)

Answer 1

I've written an extension for BCMeshTransformView that allows you to apply warp transform in response to user's touch input.
extension BCMutableMeshTransform {
static func warpTransform(from startPoint:CGPoint,
to endPoint:CGPoint, in size:CGSize) -> BCMutableMeshTransform {
let resolution:UInt = 30
let mesh = BCMutableMeshTransform.identityMeshTransform(withNumberOfRows: resolution,
numberOfColumns: resolution)!
let _startPoint = CGPoint(x: startPoint.x/size.width, y: startPoint.y/size.height)
let _endPoint = CGPoint(x: endPoint.x/size.width, y: endPoint.y/size.height)
let dragDistance = _startPoint.distance(to: _endPoint)
for i in 0..<mesh.vertexCount {
var vertex = mesh.vertex(at: i)
let myDistance = _startPoint.distance(to: vertex.from)
let hEdgeDistance = min(vertex.from.x, 1 - vertex.from.x)
let vEdgeDistance = min(vertex.from.y, 1 - vertex.from.y)
let hProtection = min(100, pow(hEdgeDistance * 100, 1.5))/100
let vProtection = min(100, pow(vEdgeDistance * 100, 1.5))/100
if (myDistance < dragDistance) {
let maxDistort = CGPoint(x:(_endPoint.x - _startPoint.x) / 2,
y:(_endPoint.y - _startPoint.y) / 2)
let normalizedDistance = myDistance/dragDistance
let normalizedImpact = (cos(normalizedDistance * .pi) + 1) / 2
vertex.to.x += maxDistort.x * normalizedImpact * hProtection
vertex.to.y += maxDistort.y * normalizedImpact * vProtection
mesh.replaceVertex(at: i, with: vertex)
}
}
return mesh
}
}
Then just set the property to your transformView.
fileprivate var startPoint:CGPoint?
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
guard let touch = touches.first else { return }
startPoint = touch.location(in: self)
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
guard let startPoint_ = startPoint else { return }
guard let touch = touches.first else { return }
let position = touch.location(in: self)
transformView.meshTransform = BCMutableMeshTransform.warpTransform(from: startPoint_,
to: position, in: bounds.size)
}
The warp code is not perfect, but it gets the job done in my case. You can play with it, but the general idea stays the same.

Answer 2

Take a look at my answer to this question:
Warp \ bend effect on a UIView?
You might also look at this git library:
https://github.com/Ciechan/BCMeshTransformView
That might be a good starting point for what you want to do, but you'll need to learn about OpenGL, transformation matrices, at lots of other things.
What you are asking about is fairly straightforward OpenGL. You just need to set up a triangle strip that describes the modified grid points. You'd load your image as a texture, and then render the texture using the triangle strips.
However, "straightforward OpenGL" is sort of like straightforward rocket science. The high-level concepts may be straightforward, but there end up being lots of very fussy details you have to get right in order to make it work.
Take a look at this short video I created with my app Face Dancer
Face Dancer video with grid lines