如何绘制平行四边形按钮

Question

我需要绘制带有平行四边形形状的自定义按钮。做这个的最好方式是什么？图像方式（即为控件设置背景图像）不合适。

Answer 1

希望这很容易。一些谷歌搜索后，我想出了一个解决方案

UIParallelogramButton.h

#import <UIKit/UIKit.h> 
#import "QuartzCore/QuartzCore.h" 

@interface UIParallelogramButton : UIButton 
{ 
    CGFloat offset; 
} 
@property CGFloat offset; 
@end 

UIParallelogramButton.m

#import "UIParallelogramButton.h" 

@implementation UIParallelogramButton 
@synthesize offset; 

- (id)initWithFrame:(CGRect)frame 
{ 
    self = [super initWithFrame:frame]; 
    if (self) 
    { 
     offset = 0.0F; 
    } 
    return self; 
} 

- (void)drawRect:(CGRect)rect 
{ 
    UIBezierPath* maskPath = [UIBezierPath bezierPath]; 
    [maskPath moveToPoint:CGPointMake(rect.origin.x + offset, rect.origin.y)]; 
    [maskPath addLineToPoint:CGPointMake(rect.size.width + rect.origin.x, rect.origin.y)]; 
    [maskPath addLineToPoint:CGPointMake(rect.origin.x + rect.size.width - offset, rect.origin.y + rect.size.height)]; 
    [maskPath addLineToPoint:CGPointMake(rect.origin.x, rect.origin.y + rect.size.height)]; 
    [maskPath closePath]; 
    CAShapeLayer* maskLayer = [[CAShapeLayer alloc] init]; 
    maskLayer.frame = self.bounds; 
    maskLayer.path = maskPath.CGPath; 
    self.layer.mask = maskLayer; 
} 
@end 

Answer 2

，如果你不通过Brain89提供的解决方案是好的不需要为该按钮设置任何图像。我有背景和内容图像，我需要制作平行四边形按钮而不更改图像。我使用下面的代码：

// Pass 0..1 value to either skewX if you want to compress along the X axis 
// or skewY if you want to compress along the Y axis 
- (void)parallelogramButtonWithButton:(UIButton *)button withSkewX:(CGFloat)skewX withSkewY:(CGFloat)skewY { 
    CGAffineTransform affineTransform = CGAffineTransformConcat(CGAffineTransformIdentity, CGAffineTransformMake(1, skewY, skewX, 1, 0, 0)); 
    button.layer.affineTransform = affineTransform; 
}