ios - 在不提供透视图并保持高度和宽度的情况下倾斜 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 使图形向上倾斜或向下。

由于 tan π/4 = 1(或者，如果您愿意，tan 45° = 1)，affineTransformMakeShear(1, 0) 返回的变换将一个矩形变成一个平行四边形，其左边和右边缘为 π/4 弧度(或 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