Crazy Developer
Crazy Developer

Reputation: 3464

How to resize image in ios with 3D effect.

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.

Upvotes: 2

Views: 918

Answers (3)

User511
User511

Reputation: 1486

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)

Upvotes: 0

Alban
Alban

Reputation: 1622

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

Upvotes: 3

Josh Homann
Josh Homann

Reputation: 16327

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)

Upvotes: 1

Related Questions