倾斜UIView没有提供透视和保持高度和宽度

Question

嗨,

我试图实现像图像中的转换,但我只有一个类似的转换,但使用CGATransform3D的透视(我不想要).我如何使用objective-c实现这一目标？变换后的图像应具有与原始图像相同的高度和宽度,但底部倾斜给定角度.

在此先感谢您的帮助.

Answer 1

这是"剪切"或"倾斜"转换.幸运的是,剪切变换是仿射变换,iOS支持UIView和CALayer级别的仿射变换.但是,它没有构造剪切变换的便利功能,所以让我们写一个:

static CGAffineTransform affineTransformMakeShear(CGFloat xShear, CGFloat yShear) {
    return CGAffineTransformMake(1, yShear, xShear, 1, 0, 0);
}

它究竟是什么xShear和yShear意思并不明显.xShear是y轴倾斜yShear的角度的反正切,并且是x轴倾斜的角度的反正切.这可能看起来倒退,但它具有您期望的视觉效果:非零xShear向左或向右yShear倾斜图形,非零向上或向下倾斜图形.

由于1的反正切是π/ 4 = 45°,因此返回的变换affineTransformMakeShear(1, 0)将矩形变成平行四边形,其左右边缘为45°.

演示:

请注意,两个轴上的剪切可以与旋转和刻度的组合相同.

这是我的演示代码:

#import "ViewController.h"

@interface ViewController ()

@property (strong, nonatomic) IBOutlet UIView *shearedView;
@property (strong, nonatomic) IBOutlet UISlider *verticalShearSlider;
@property (strong, nonatomic) IBOutlet UISlider *horizontalShearSlider;
@property (strong, nonatomic) IBOutlet UILabel *verticalShearLabel;
@property (strong, nonatomic) IBOutlet UILabel *horizontalShearLabel;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self updateAppearance:nil];
}

static CGAffineTransform affineTransformMakeShear(CGFloat xShear, CGFloat yShear) {
    return CGAffineTransformMake(1, yShear, xShear, 1, 0, 0);
}

- (IBAction)updateAppearance:(id)sender {
    CGFloat xShear = self.horizontalShearSlider.value;
    CGFloat yShear = self.verticalShearSlider.value;
    self.shearedView.transform = affineTransformMakeShear(xShear, yShear);
    self.horizontalShearLabel.text = [NSString stringWithFormat:@"%.2f", xShear];
    self.verticalShearLabel.text = [NSString stringWithFormat:@"%.2f", yShear];
}

@end