How to resize image in ios with 3D effect.

Question

I want to resize the image and stretch the image by picking any corner. For reference Check Video. I want to develop the same effect in ios native using CGContext or Using BazirPath.

Please let me know how to do the such a thing in ios. Provide any reference to make this kind of image operation. My project is in swift 3. So that is preferred option for me.

See my answer [to this question](http://stackoverflow.com/questions/9608600/how-can-i-render-a-square-bitmap-to-an-arbitrary-four-sided-polygon-using-gdi/9609615#9609615). It's the same thing, but the question is about using Windows GDI instead of iOS' Core Graphics. However, the answer is platform agnostic. — user1118321, Nov 15 '16 at 06:49
@user1118321 in your answer image stretching is correct. but i want source code or any reference in openGL. — Crazy Developer, Nov 16 '16 at 05:39

score 3 · Accepted Answer · answered Nov 17 '16 at 12:52

There is a library available on github: (it has been developed with Objective-C but you can use it in your Swift 3 project)

That kind of transformation is not so easy if you start from scratch, even if CoreGraphic is powerfull, the learning slope is hard.

https://github.com/agens-no/AGGeometryKit

And as you can see here, it's based on CoreGraphic so you can use CGContext and UIBezierPath

#import <Foundation/Foundation.h>
#import <CoreGraphics/CoreGraphics.h>
#import <UIKit/UIKit.h>

#import "AGKBaseDefines.h"

AGK_EXTERN_C_BEGIN

CGImageRef CGImageDrawWithCATransform3D_AGK(CGImageRef imageRef,
                                            CATransform3D transform,
                                            CGPoint anchorPoint,
                                            CGSize size,
                                            CGFloat scale) CF_RETURNS_RETAINED;

AGK_EXTERN_C_END

score 1 · Answer 2 · answered Nov 16 '16 at 23:47

The CIPerspectiveTransform filter will let you do this if all you want to do is change the corners. If you want to be able to edit all of the mesh points as a bezier path as in photoshop and have the image warp to adjust then you need to do some 3D math, tesselate the patches to triangles and apply the image as a texture to the resulting geometry.

Anyways here is a playground that illustrates how to use CIPerspective transform:

    import UIKit
    import PlaygroundSupport

    let uiImage = UIImage(named: "a.png")!
    let image = CIImage(image: uiImage)!
    let filter = CIFilter(name: "CIPerspectiveTransform")!
    let topLeft = CGPoint(x: -10, y: 0)
    let bottomLeft = CGPoint(x: 100, y: uiImage.size.height)
    let topright = CGPoint(x: uiImage.size.width, y: -20)
    let bottomright = CGPoint(x: uiImage.size.width, y:uiImage.size.height)

    filter.setValue(CIVector(cgPoint:topLeft), forKey: "inputTopLeft")
    filter.setValue(CIVector(cgPoint:topright), forKey: "inputTopRight")
    filter.setValue(CIVector(cgPoint:bottomright), forKey: "inputBottomRight")
    filter.setValue(CIVector(cgPoint:bottomLeft), forKey: "inputBottomLeft")
    filter.setValue(image, forKey: kCIInputImageKey)
    let transformedImage = UIImage(ciImage: filter.outputImage!)

    PlaygroundPage.current.liveView = UIImageView(image: transformedImage)

score 0 · Answer 3 · answered Nov 18 '16 at 10:41

You can set horizontal as well as vertical effects:

Vertical effect

let verticalMotionEffect = UIInterpolatingMotionEffect(keyPath: "center.y",
type: .TiltAlongVerticalAxis)
verticalMotionEffect.minimumRelativeValue = -10
verticalMotionEffect.maximumRelativeValue = 10

Horizontal effect

let horizontalMotionEffect = UIInterpolatingMotionEffect(keyPath: "center.x",
    type: .TiltAlongHorizontalAxis)
horizontalMotionEffect.minimumRelativeValue = -10
horizontalMotionEffect.maximumRelativeValue = 10

let group = UIMotionEffectGroup()
group.motionEffects = [horizontalMotionEffect, verticalMotionEffect]
myBackgroundView.addMotionEffect(group)

How to resize image in ios with 3D effect.

3 Answers3