倾斜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