QuartzCore - 将圆角添加到多边形

Question

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

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

我尝试了几种不同的技术来添加圆角，例如设置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();

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

Answer 1

我想你想使用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步长。