QuartzCore - 将圆角添加到多边形

时间:2013-03-16 00:12:10

标签: iphone ios core-graphics quartz-graphics quartz-core

我试图画一个半透明的黑色矩形,中间有一个三角形。

我完全使用下面的代码。但是,我想绕三角形的角落。

我尝试了几种不同的技术来添加圆角,例如设置CGContextSetLineCap用于描边,并使用quartz创建我的路径并使用CGContextAddArcToPoint,但我没有得到任何工作。

正如我所提到的,下面的代码适用于三角形切口。我怎样才能围绕三角形的角落?

CGContextRef context = UIGraphicsGetCurrentContext();
CGPoint position = CGPointMake(rect.size.width/2, rect.size.height * .7);
CGSize size = CGSizeMake(rect.size.width*.8, rect.size.height*.5);

CGFloat firstPointX = (position.x - (size.width / 2));
CGFloat firstPointY = (position.y - (size.height));
CGPoint firstPoint = CGPointMake(firstPointX, firstPointY);

CGFloat secondPointX = position.x + (size.width / 2);
CGFloat secondPointY = position.y - (size.height);
CGPoint secondPoint = CGPointMake(secondPointX, secondPointY);


UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:position];
[path addLineToPoint:firstPoint];
[path moveToPoint:firstPoint];
[path addLineToPoint:secondPoint];
[path addLineToPoint:position];
[path closePath];

CGContextAddRect(context, rect);
CGContextAddPath(context, path.CGPath);
CGContextEOClip(context);

UIColor *translucentColor = [UIColor colorWithWhite:0 alpha:0.5];
CGContextSetFillColorWithColor(context, translucentColor.CGColor);

CGContextFillRect(context, rect);

UIGraphicsEndImageContext();

编辑:这是我想要完成的一个例子。

enter image description here

1 个答案:

答案 0 :(得分:3)

我想你想使用CGContextAddArc。如果需要,它会绘制一个圆的一部分,并带有一条直线。这是绘制一个填充UIView的圆角框的代码。对于一个三角形,你有3条线而不是4条。顶部有两条,底部有两条。这是来自我的roundBoxView类:

CGContextRef context = UIGraphicsGetCurrentContext();
CGRect boxRect = self.bounds;

float bRadius = self.cornerRadius;
float shrink = self.strokeThickness/2;

CGContextBeginPath(context);

// instead of this gray you could later add options for other colors
CGContextSetGrayFillColor(context, 0.0f, self.backgroundOpacity);
CGContextMoveToPoint(context, CGRectGetMinX(boxRect)+shrink + bRadius, CGRectGetMinY(boxRect)+shrink);

CGContextAddArc(context, CGRectGetMaxX(boxRect)-shrink - bRadius, CGRectGetMinY(boxRect)+shrink + bRadius, bRadius, 3 * (float)M_PI / 2, 0, 0);
CGContextAddArc(context, CGRectGetMaxX(boxRect)-shrink - bRadius, CGRectGetMaxY(boxRect)-shrink - bRadius, bRadius, 0, (float)M_PI / 2, 0);
CGContextAddArc(context, CGRectGetMinX(boxRect)+shrink + bRadius, CGRectGetMaxY(boxRect)-shrink - bRadius, bRadius, (float)M_PI / 2, (float)M_PI, 0);
CGContextAddArc(context, CGRectGetMinX(boxRect)+shrink + bRadius, CGRectGetMinY(boxRect)+shrink + bRadius, bRadius, (float)M_PI, 3 * (float)M_PI / 2, 0);

CGContextClosePath(context);
CGContextFillPath(context);

当然,而不是boxRect是完整的边界,你可以将它传递给你的方法,并使用你想要的任何边界绘制它。要使它成为一个三角形,你只需要3行而不是2行,你可能需要做一些数学来计算起点和终点角度。在一个盒子上,这些角度总是90度(这里给出的是icky弧度)但是在三角形上你要么必须动态计算角度,要么在三角形上有预设的纵横比,这样你就可以使用预设的开始和停止角度。在示例中,如图3所示,你可以做120度或M_PI / 1.5步长。