歪斜的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向左或向右倾斜数字，而非零值向上或向下倾斜数字。

由于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