2015-08-29 60 views
1

我要画这样一个路径:enter image description hereUIBezierPath绘制矩形和弧形在一起

,这是我写的:

CGFloat radius = 50; 

UIBezierPath *path = [UIBezierPath bezierPath]; 

[path moveToPoint:CGPointMake(radius, CGRectGetMinY(rect))]; 

[path addLineToPoint:CGPointMake(CGRectGetMaxX(rect) - radius, CGRectGetMinY(rect))]; 
[path addLineToPoint:CGPointMake(CGRectGetMaxX(rect) -radius, CGRectGetMaxY(rect))]; 
[path addLineToPoint:CGPointMake(radius, CGRectGetMaxY(rect))]; 
[path closePath]; 
UIBezierPath *path1 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(radius, CGRectGetMinY(rect) + radius) radius:radius startAngle:0.5 * M_PI endAngle:1.5 *M_PI clockwise:YES]; 

UIBezierPath *path2 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CGRectGetMaxX(rect) - radius, CGRectGetMaxY(rect) - radius) radius:radius startAngle:-0.5 * M_PI endAngle:0.5 *M_PI clockwise:YES]; 


[path1 appendPath:path]; 
[path1 appendPath:path2]; 

所以我就这样result

怎样的结果我可以去掉两条异常线吗?由于

+0

为什么不使用'UIBezierPath * path = [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:radius];'? – Bannings

回答

1

就试试这个:

- (void)drawRect:(CGRect)rect{ 
    CGContextRef context = UIGraphicsGetCurrentContext(); 

    const CGFloat radius = 50; 
    const CGFloat lineWidth = 10; 

    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectInset(rect, lineWidth/2, lineWidth/2) 
                cornerRadius:radius]; 

    CGContextSetStrokeColorWithColor(context, [UIColor whiteColor].CGColor); 
    path.lineWidth = lineWidth; 
    [path stroke]; 

    CGContextSetFillColorWithColor(context, [UIColor grayColor].CGColor); 
    [path fill]; 
} 

enter image description here


您可以实现像这样的自定义视图:

@interface RoundedView: UIView 

@property (nonatomic, strong) UIColor *strokeColor; 
@property (nonatomic, strong) UIColor *fillColor; 

@end 

@implementation RoundedView 

- (instancetype)initWithFrame:(CGRect)frame { 
    self = [super initWithFrame:frame]; 
    if (self) { 
     self.backgroundColor = [UIColor clearColor]; 
    } 
    return self; 
} 

-(void)drawRect:(CGRect)rect{ 
    CGContextRef context = UIGraphicsGetCurrentContext(); 

    const CGFloat radius = 50; 
    const CGFloat lineWidth = 10; 

    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectInset(rect, lineWidth/2, lineWidth/2) 
                cornerRadius:radius]; 

    CGContextSetStrokeColorWithColor(context, self.strokeColor.CGColor); 
    path.lineWidth = lineWidth; 
    [path stroke]; 

    CGContextSetFillColorWithColor(context, self.fillColor.CGColor); 
    [path fill]; 
} 

@end 

然后使用它:

RoundedView *view = [[RoundedView alloc] initWithFrame:CGRectMake(10, 20, 200, 100)]; 
[self.view addSubview:view]; 
+0

是的,你是对的。我通过CGPath解决了它,但你的答案更简单 – LiMo

+0

我很高兴帮助你:) – Bannings

1

这里有您需要什么,只需要调整它:

- (void)drawSkateboard: (CGRect)frame { 
    UIColor* fillColor = [UIColor colorWithRed: 0 green: 0 blue: 0 alpha: 1]; 
    UIBezierPath* bezierPath = UIBezierPath.bezierPath; 
    [bezierPath moveToPoint: CGPointMake(CGRectGetMinX(frame) + 529, CGRectGetMinY(frame) + 414)]; 
    [bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 207, CGRectGetMinY(frame) + 414)]; 
    [bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame), CGRectGetMinY(frame) + 207) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 93.2, CGRectGetMinY(frame) + 414) controlPoint2: CGPointMake(CGRectGetMinX(frame), CGRectGetMinY(frame) + 320.9)]; 
    [bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame), CGRectGetMinY(frame) + 207)]; 
    [bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 207, CGRectGetMinY(frame)) controlPoint1: CGPointMake(CGRectGetMinX(frame), CGRectGetMinY(frame) + 93.2) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 93.1, CGRectGetMinY(frame))]; 
    [bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 529, CGRectGetMinY(frame))]; 
    [bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 736, CGRectGetMinY(frame) + 207) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 642.8, CGRectGetMinY(frame)) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 736, CGRectGetMinY(frame) + 93.1)]; 
    [bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 736, CGRectGetMinY(frame) + 207)]; 
    [bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 529, CGRectGetMinY(frame) + 414) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 736, CGRectGetMinY(frame) + 320.9) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 642.9, CGRectGetMinY(frame) + 414)]; 
    [bezierPath closePath]; 
    bezierPath.miterLimit = 4; 
    [fillColor setFill]; 
    [bezierPath fill]; 
} 

这是一个风景iPhone 6+大小,它会产生这样的:

enter image description here

我把它尺寸全屏显示,以便通过使用整个屏幕界限的百分比和分区来调整它的大小以满足您的需求,但这仅仅是一个例子,就是这样。我会再发一些。这是另一个,这是一个紧密匹配你的,这也是一个iPhone 6 +,全屏宽度,你只是按(所需的高度)*(([ UIScreen mainScreen] .bounds。高度)/(736)),然后做宽度的数字相同,但宽度很明显,这将iphone调整6+向下和向上

- (void)drawSkateboard: (CGRect)frame { 

    UIColor* color = [UIColor colorWithRed: 0.451 green: 0.416 blue: 1 alpha: 1]; 
    UIBezierPath* bezierPath = UIBezierPath.bezierPath; 
    [bezierPath moveToPoint: CGPointMake(CGRectGetMinX(frame) + 0.87704 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.71739 * CGRectGetHeight(frame))]; 
    [bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 0.12296 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.71739 * CGRectGetHeight(frame))]; 
    [bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 0.00000 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.49879 * CGRectGetHeight(frame)) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 0.05530 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.71739 * CGRectGetHeight(frame)) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 0.00000 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.61908 * CGRectGetHeight(frame))]; 
    [bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 0.00000 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.49879 * CGRectGetHeight(frame))]; 
    [bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 0.12296 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.28019 * CGRectGetHeight(frame)) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 0.00000 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.37850 * CGRectGetHeight(frame)) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 0.05530 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.28019 * CGRectGetHeight(frame))]; 
    [bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 0.87704 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.28019 * CGRectGetHeight(frame))]; 
    [bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 1.00000 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.49879 * CGRectGetHeight(frame)) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 0.94470 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.28019 * CGRectGetHeight(frame)) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 1.00000 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.37850 * CGRectGetHeight(frame))]; 
    [bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 1.00000 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.49879 * CGRectGetHeight(frame))]; 
    [bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 0.87704 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.71739 * CGRectGetHeight(frame)) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 1.00000 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.61908 * CGRectGetHeight(frame)) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 0.94470 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.71739 * CGRectGetHeight(frame))]; 
    [bezierPath closePath]; 
    bezierPath.miterLimit = 4; 

    [color setFill]; 
    [bezierPath fill]; 
} 

和结果:

enter image description here

灰色背景,iphone 6+屏幕,白色的边框,你贴什么相同的大小尺寸:

- (void)drawSkateboard: (CGRect)frame { 
    UIBezierPath* rectanglePath = [UIBezierPath bezierPathWithRect: CGRectMake(CGRectGetMinX(frame), CGRectGetMinY(frame), 736, 414)]; 
    [UIColor.lightGrayColor setFill]; 
    [rectanglePath fill]; 

    UIBezierPath* bezierPath = UIBezierPath.bezierPath; 
    [bezierPath moveToPoint: CGPointMake(CGRectGetMinX(frame) + 0.82853 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.69300 * CGRectGetHeight(frame))]; 
    [bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 0.17147 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.69300 * CGRectGetHeight(frame))]; 
    [bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 0.06291 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.50000 * CGRectGetHeight(frame)) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 0.11182 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.69300 * CGRectGetHeight(frame)) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 0.06291 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.60628 * CGRectGetHeight(frame))]; 
    [bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 0.06291 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.50000 * CGRectGetHeight(frame))]; 
    [bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 0.17147 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.30700 * CGRectGetHeight(frame)) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 0.06291 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.39396 * CGRectGetHeight(frame)) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 0.11168 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.30700 * CGRectGetHeight(frame))]; 
    [bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 0.82853 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.30700 * CGRectGetHeight(frame))]; 
    [bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 0.93709 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.50000 * CGRectGetHeight(frame)) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 0.88818 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.30700 * CGRectGetHeight(frame)) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 0.93709 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.39372 * CGRectGetHeight(frame))]; 
    [bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 0.93709 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.50000 * CGRectGetHeight(frame))]; 
    [bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 0.82853 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.69300 * CGRectGetHeight(frame)) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 0.93709 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.60604 * CGRectGetHeight(frame)) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 0.88818 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.69300 * CGRectGetHeight(frame))]; 
    [bezierPath closePath]; 
    bezierPath.miterLimit = 4; 

    [UIColor.blueColor setFill]; 
    [bezierPath fill]; 
    [UIColor.whiteColor setStroke]; 
    bezierPath.lineWidth = 5.5; 
    [bezierPath stroke]; 
} 

结果:

enter image description here

AND,顶部这一关,这里的一个类别,这是相当不错的,你在你的号码堵塞,和急你做:

#define TOP_LEFT(X, Y)\ 
    CGPointMake(rect.origin.x + X * limitedRadius,\ 
       rect.origin.y + Y * limitedRadius) 
#define TOP_RIGHT(X, Y)\ 
    CGPointMake(rect.origin.x + rect.size.width - X * limitedRadius,\ 
       rect.origin.y + Y * limitedRadius) 
#define BOTTOM_RIGHT(X, Y)\ 
    CGPointMake(rect.origin.x + rect.size.width - X * limitedRadius,\ 
       rect.origin.y + rect.size.height - Y * limitedRadius) 
#define BOTTOM_LEFT(X, Y)\ 
    CGPointMake(rect.origin.x + X * limitedRadius,\ 
       rect.origin.y + rect.size.height - Y * limitedRadius) 

+ (UIBezierPath*)bezierPathWithIOS7RoundedRect: (CGRect)rect cornerRadius: (CGFloat)radius { 

    UIBezierPath* path = UIBezierPath.bezierPath; 
    CGFloat limit = MIN(rect.size.width, rect.size.height)/2/1.52866483; 
    CGFloat limitedRadius = MIN(radius, limit); 

    [path moveToPoint: TOP_LEFT(1.52866483, 0.00000000)]; 
    [path addLineToPoint: TOP_RIGHT(1.52866471, 0.00000000)]; 
    [path addCurveToPoint: TOP_RIGHT(0.66993427, 0.06549600) 
      controlPoint1: TOP_RIGHT(1.08849323, 0.00000000) 
      controlPoint2: TOP_RIGHT(0.86840689, 0.00000000)]; 
    [path addLineToPoint: TOP_RIGHT(0.63149399, 0.07491100)]; 
    [path addCurveToPoint: TOP_RIGHT(0.07491176, 0.63149399) 
      controlPoint1: TOP_RIGHT(0.37282392, 0.16905899) 
      controlPoint2: TOP_RIGHT(0.16906013, 0.37282401)]; 
    [path addCurveToPoint: TOP_RIGHT(0.00000000, 1.52866483) 
      controlPoint1: TOP_RIGHT(0.00000000, 0.86840701) 
      controlPoint2: TOP_RIGHT(0.00000000, 1.08849299)]; 
    [path addLineToPoint: BOTTOM_RIGHT(0.00000000, 1.52866471)]; 
    [path addCurveToPoint: BOTTOM_RIGHT(0.06549569, 0.66993493) 
      controlPoint1: BOTTOM_RIGHT(0.00000000, 1.08849323) 
      controlPoint2: BOTTOM_RIGHT(0.00000000, 0.86840689)]; 
    [path addLineToPoint: BOTTOM_RIGHT(0.07491111, 0.63149399)]; 
    [path addCurveToPoint: BOTTOM_RIGHT(0.63149399, 0.07491111) 
      controlPoint1: BOTTOM_RIGHT(0.16905883, 0.37282392) 
      controlPoint2: BOTTOM_RIGHT(0.37282392, 0.16905883)]; 
    [path addCurveToPoint: BOTTOM_RIGHT(1.52866471, 0.00000000) 
      controlPoint1: BOTTOM_RIGHT(0.86840689, 0.00000000) 
      controlPoint2: BOTTOM_RIGHT(1.08849323, 0.00000000)]; 
    [path addLineToPoint: BOTTOM_LEFT(1.52866483, 0.00000000)]; 
    [path addCurveToPoint: BOTTOM_LEFT(0.66993397, 0.06549569) 
      controlPoint1: BOTTOM_LEFT(1.08849299, 0.00000000) 
      controlPoint2: BOTTOM_LEFT(0.86840701, 0.00000000)]; 
    [path addLineToPoint: BOTTOM_LEFT(0.63149399, 0.07491111)]; 
    [path addCurveToPoint: BOTTOM_LEFT(0.07491100, 0.63149399) 
      controlPoint1: BOTTOM_LEFT(0.37282401, 0.16905883) 
      controlPoint2: BOTTOM_LEFT(0.16906001, 0.37282392)]; 
    [path addCurveToPoint: BOTTOM_LEFT(0.00000000, 1.52866471) 
      controlPoint1: BOTTOM_LEFT(0.00000000, 0.86840689) 
      controlPoint2: BOTTOM_LEFT(0.00000000, 1.08849323)]; 
    [path addLineToPoint: TOP_LEFT(0.00000000, 1.52866483)]; 
    [path addCurveToPoint: TOP_LEFT(0.06549600, 0.66993397) 
      controlPoint1: TOP_LEFT(0.00000000, 1.08849299) 
      controlPoint2: TOP_LEFT(0.00000000, 0.86840701)]; 
    [path addLineToPoint: TOP_LEFT(0.07491100, 0.63149399)]; 
    [path addCurveToPoint: TOP_LEFT(0.63149399, 0.07491100) 
      controlPoint1: TOP_LEFT(0.16906001, 0.37282401) 
      controlPoint2: TOP_LEFT(0.37282401, 0.16906001)]; 
    [path addCurveToPoint: TOP_LEFT(1.52866483, 0.00000000) 
      controlPoint1: TOP_LEFT(0.86840701, 0.00000000) 
      controlPoint2: TOP_LEFT(1.08849299, 0.00000000)]; 
    [path closePath]; 
    return path; 
} 

这最后一个将工作和Flex不过基本上你想让它弯曲

GIST:

https://gist.github.com/anonymous/1e86aedc1a7c204cd7fb

https://gist.github.com/anonymous/0b7a7f08bbd1f2622d9a

+0

是的,没问题,祝你好运 – Loxx