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