UIView – 台形を作る


UIViewで台形を作る方法のメモ

(XcodeのiOS6 Simulatorで試しています。)



ポイント

・CATransform3Dを使った射影で画面上に台形で映す

・マトリクスのm34成分

・rotation



m34の値によって、どの程度変形するかを制御できるので、

それを視覚的に見るサンプル。m34の値は 0 から 1000

サンプルコード


#import "ViewController.h"

#import <QuartzCore/QuartzCore.h>


@interface ViewController () {

    NSTimer *timer;

}

@property (nonatomic, strong) UIView *flipView;

@property (nonatomic, strong) UILabel *sliderLabel;

@end


@implementation ViewController


- (void)viewDidLoad

{

    [super viewDidLoad];

    self.view.backgroundColor = [UIColor grayColor];

}


- (void)viewDidAppear:(BOOL)animated

{

    

    // UIView を投射して台形にしてみる

    // 回転は、updateView のなかで、m34はスライダーで設定

    self.flipView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 300)];

    self.flipView.backgroundColor = [UIColor yellowColor];

    float vx = self.view.center.x;

    float vy = self.view.center.y - 50;

    self.flipView.center = CGPointMake(vx, vy);

    [self.view addSubview:self.flipView];

    

    // 辺のギザギザを滑らかに

    self.flipView.layer.shadowOpacity = 0.01;

    

    

    

    

    // m34の値変更用にSliderを表示

    UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(0, 0, 250, 22)];

    slider.minimumValue = 0.0;

    slider.maximumValue = 1000;

    float sliderx = self.view.center.x;

    float slidery = self.view.bounds.size.height - 30;

    slider.center = CGPointMake(sliderx, slidery);

    

    // スライダーから指を離したときに値が変更されるように TouchUpInside

    [slider addTarget:self action:@selector(changeM34:) forControlEvents:UIControlEventTouchUpInside];

    [self.view addSubview:slider];

    

    // slider用ラベル

    self.sliderLabel = [[UILabel alloc] initWithFrame:CGRectMake(slider.frame.origin.x, slider.frame.origin.y - 30, 200, 40)];

    self.sliderLabel.backgroundColor = [UIColor clearColor];

    self.sliderLabel.text = @"m34 = 0";

    [self.view addSubview:self.sliderLabel];

    

    // タイマー

    timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(updateView:) userInfo:nil repeats:YES];

    [timer fire];

    

}


- (void)updateView:(NSTimer*)sender

{

    CATransform3D transform = self.flipView.layer.transform;

    transform = CATransform3DRotate(transform, M_PI * 0.02, 1.0, 0, 0);

    self.flipView.layer.transform = transform;

}


- (void)changeM34:(UISlider*)sender

{

    

    float m34= 0;

    self.sliderLabel.text = @"m34 = 0";

    

    if (sender.value != 0) {

        m34 = 1.0 / sender.value;

        // ラベル

        self.sliderLabel.text = [NSString stringWithFormat:@"m34 = 1 / %f", sender.value];

    }

    

    // m34の値を変更

    CATransform3D transform = CATransform3DIdentity;

    transform.m34 = m34;

    self.flipView.layer.transform = transform;

    

    

}



- (void)viewDidDisappear:(BOOL)animated

{

    [timer invalidate];

    timer = nil;

    self.flipView = nil;

}




- (void)didReceiveMemoryWarning

{

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}


@end