0

How can I achieve custom shaped movie in IOS?

I have a UIBezierPath and CAShapeLayer. I would like to display movie in that shape.

I'm looking for the effect like skew - http://i57.tinypic.com/16020ps.jpg

I'm using QR code reader and there I get the boundaries(UIBezierPath) of the found qr code. I want to be able to display the video over the qr code to achieve AR effect.

Thanks for the help!

rmaddy
  • 314,917
  • 42
  • 532
  • 579
user2011328
  • 307
  • 3
  • 10

1 Answers1

0

You can do this by creating a mask layer on top of the MPMoviePlayerController view.

I just tested this by creating a simple single view project. I added the QuartzCore and MediaPlayer frameworks.

This is the code from ViewController.m:

#import "ViewController.h"
#import <QuartzCore/QuartzCore.h>
#import <MediaPlayer/MediaPlayer.h>


@interface ViewController ()

@property (nonatomic, strong) MPMoviePlayerController *movieController;
@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    NSString *moviePath = [[NSBundle mainBundle] pathForResource:@"myMovie" ofType:@"mov"];

    NSURL *url = nil;
    if (moviePath != nil) {
        url = [NSURL fileURLWithPath:moviePath];
    }

    self.movieController = [[MPMoviePlayerController alloc] initWithContentURL:url];

    self.movieController.view.frame = CGRectMake(50, 50, 400, 400);
    [self.view addSubview:self.movieController.view];
    [self.movieController play];

    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.frame = self.movieController.view.bounds;

    UIBezierPath* bezierPath = [UIBezierPath bezierPath];
    [bezierPath moveToPoint: CGPointMake(118.81, 189.76)];
    [bezierPath addCurveToPoint: CGPointMake(188.77, 37.51) controlPoint1: CGPointMake(118.81, 189.76) controlPoint2: CGPointMake(138.99, 36.06)];
    [bezierPath addCurveToPoint: CGPointMake(255.06, 158.26) controlPoint1: CGPointMake(238.56, 38.96) controlPoint2: CGPointMake(226.1, 78.56)];
    [bezierPath addCurveToPoint: CGPointMake(369.21, 200.26) controlPoint1: CGPointMake(284.02, 237.96) controlPoint2: CGPointMake(314.4, 134.08)];
    [bezierPath addCurveToPoint: CGPointMake(269.79, 300.02) controlPoint1: CGPointMake(424.02, 266.44) controlPoint2: CGPointMake(319.71, 329.77)];
    [bezierPath addCurveToPoint: CGPointMake(151.95, 300.02) controlPoint1: CGPointMake(219.86, 270.26) controlPoint2: CGPointMake(202.68, 327.08)];
    [bezierPath addCurveToPoint: CGPointMake(15.71, 284.27) controlPoint1: CGPointMake(101.22, 272.95) controlPoint2: CGPointMake(-0.1, 369.78)];
    [bezierPath addCurveToPoint: CGPointMake(118.81, 189.76) controlPoint1: CGPointMake(31.51, 198.75) controlPoint2: CGPointMake(118.81, 189.76)];
    [bezierPath closePath];

    maskLayer.fillColor = [[UIColor whiteColor] CGColor];
    maskLayer.backgroundColor = [[UIColor clearColor] CGColor];
    maskLayer.path = [bezierPath CGPath];


    self.movieController.view.layer.mask = maskLayer;

}

@end

(The bezier path is a hat shape created quickly in PaintCode, so it's a bit odd.)

Caroline
  • 4,875
  • 2
  • 31
  • 47
  • Are you sure that masking won't crop the original video? I will try your code and see if it works for me. Thanks! – user2011328 Apr 15 '14 at 12:34
  • I just tried the code. Masking won't do for me because it clips the video and does not change it's boundaries. I'm looking for a skew like affect. – user2011328 Apr 15 '14 at 12:38
  • The self.movieController.view.frame line determines the size. You would change that to suit the size of your movie, and the bezier path would have to be created to suit the size of your frame too. – Caroline Apr 15 '14 at 12:38
  • Do you mean like this? http://stackoverflow.com/questions/2351586/iphone-image-stretching-skew – Caroline Apr 15 '14 at 12:39
  • Yes, something like that. The only problem is that I don't have starting video/image coordinates to calculate the transform matrix. I'm using QR code reader and there I get the boundaries(UIBezierPath) of the found qr code. I want to be able to display the video over the qr code to achieve AR effect. – user2011328 Apr 15 '14 at 12:48
  • Probably too mathematical for me to help then - sorry! – Caroline Apr 15 '14 at 12:50