这个代码生成一个具有尖锐边缘的三角形,但我想让它圆角！我花了两个小时尝试与addArcWithCenter …,lineCapStyle和lineJoinStyle等工作,但似乎没有任何工作.
UIBezierPath *bezierPath = [UIBezierPath bezierPath]; CGPoint center = CGPointMake(rect.size.width / 2,0); CGPoint bottomLeft = CGPointMake(10,rect.size.height - 0); CGPoint bottomRight = CGPointMake(rect.size.width - 0,rect.size.height - 0); [bezierPath moveToPoint:center]; [bezierPath addLineToPoint:bottomLeft]; [bezierPath addLineToPoint:bottomRight]; [bezierPath closePath];
所以我的问题是,我将如何舍弃UIBezierPath中的三角形的所有边缘(我需要子层,多个路径等)？
N.B我没有绘制这个BezierPath,所以在drawRect中的所有CGContext …函数都不能帮助我:(
谢谢！
解决方法
FWIW：这个答案通过解释CGPathAddArcToPoint(…)为您做什么来达到教育目的.我强烈建议您阅读它,因为它将帮助您了解和欣赏CGPath API.然后,您应该继续使用,如an0’s answer所示,而不是在您的应用程序中边缘边缘时使用此代码.这个代码只能用作参考,如果你想玩,并学习这样的几何计算.
原来的答案
因为我觉得这样的问题很有趣,我不得不回答:)
这是一个很长的答案.没有简短版本：D
注意：为了我自己的简单,我的解决方案正在对用于形成三角形的点进行一些假设,例如：
>三角形的面积足够大以适合圆角(例如,三角形的高度大于角落中圆圈的直径),我没有检查或试图阻止任何类型的奇怪的结果,否则发生.
>角落按逆时针顺序排列.您可以使其适用于任何订单,但是为了简单起见,它感觉到一个足够的限制.
如果你想要的话,你可以使用相同的技术来舍入任何多边形,只要它是非常凸的(即不是一个尖锐的星).我不会解释如何做,但它遵循相同的原则.
这一切都是以三角形开始的,你想绕一些半径的角落r：
圆角三角形应该包含在尖角三角形中,所以第一步是找到尽可能靠近角落的位置,在那里您可以配合半径为r的圆.
这样做的一个简单方法是创建平行于三角形中三个边的3条新线,并将距离r的每一个向内移动,与原始边正交.
为此,您可以计算每条线的斜率/角度和要应用于两个新点的偏移量：
CGFloat angle = atan2f(end.y - start.y,end.x - start.x); CGVector offset = CGVectorMake(-sinf(angle)*radius,cosf(angle)*radius);
注意：为了清楚起见,我使用的是CGVector类型(在iOS 7中可用),但是您也可以使用一个或多个大小来处理以前的操作系统版本.
那么您将偏移量添加到每一行的起点和终点：
CGPoint offsetStart = CGPointMake(start.x + offset.dx,start.y + offset.dy); CGPoint offsetEnd = CGPointMake(end.x + offset.dx,end.y + offset.dy);
当你做,你会看到三条线在三个地方相交：
每个交点正好是两侧的距离r(假设三角形足够大,如上所述).
您可以计算两行的交点为：
// (x1⋅y2-y1⋅x2)(x3-x4) - (x1-x2)(x3⋅y4-y3⋅x4) // px = ––––––––––––––––––––––––––––––––––––––––––– // (x1-x2)(y3-y4) - (y1-y2)(x3-x4) // (x1⋅y2-y1⋅x2)(y3-y4) - (y1-y2)(x3⋅y4-y3⋅x4) // py = ––––––––––––––––––––––––––––––––––––––––––– // (x1-x2)(y3-y4) - (y1-y2)(x3-x4) CGFloat intersectionX = ((x1*y2-y1*x2)*(x3-x4) - (x1-x2)*(x3*y4-y3*x4)) / ((x1-x2)*(y3-y4) - (y1-y2)*(x3-x4)); CGFloat intersectionY = ((x1*y2-y1*x2)*(y3-y4) - (y1-y2)*(x3*y4-y3*x4)) / ((x1-x2)*(y3-y4) - (y1-y2)*(x3-x4)); CGPoint intersection = CGPointMake(intersectionX,intersectionY);
其中(x1,y1)至(x2,y2)为第一行,(x3,y3)至(x4,y4)为第二行.
如果然后在每个交点上放置一个半径为r的圆圈,您可以看到它将确实为圆角三角形(忽略三角形和圆圈的不同线宽)：
现在要创建一个圆形的三角形,你想要创建一个从原来的三角形正交于交点的点到一条线到一条线(等)的路径.这也是圆形与原来三角形相切的点.
知道三角形中所有三边的斜率,角半径和圆心(交点),每个圆角的起始和终止角是该边的斜率 – 90度.要将这些东西分组在一起,我在代码中创建了一个结构体,但如果不想要,则不需要：
typedef struct {
CGPoint centerPoint;
CGFloat startAngle;
CGFloat endAngle;
} CornerPoint;
为了减少代码重复,我创建了一个自己计算交点的方法,以及从一个点到另一个点给出的一个点的角度到最后一点(它不是闭合的,因此它不是一个三角形)：
- (CornerPoint)roundedCornerWithLinesFrom:(CGPoint)from
via:(CGPoint)via
to:(CGPoint)to
withRadius:(CGFloat)radius
{
CGFloat fromAngle = atan2f(via.y - from.y,via.x - from.x);
CGFloat toAngle = atan2f(to.y - via.y,to.x - via.x);
CGVector fromOffset = CGVectorMake(-sinf(fromAngle)*radius,cosf(fromAngle)*radius);
CGVector toOffset = CGVectorMake(-sinf(toAngle)*radius,cosf(toAngle)*radius);
CGFloat x1 = from.x +fromOffset.dx;
CGFloat y1 = from.y +fromOffset.dy;
CGFloat x2 = via.x +fromOffset.dx;
CGFloat y2 = via.y +fromOffset.dy;
CGFloat x3 = via.x +toOffset.dx;
CGFloat y3 = via.y +toOffset.dy;
CGFloat x4 = to.x +toOffset.dx;
CGFloat y4 = to.y +toOffset.dy;
CGFloat intersectionX = ((x1*y2-y1*x2)*(x3-x4) - (x1-x2)*(x3*y4-y3*x4)) / ((x1-x2)*(y3-y4) - (y1-y2)*(x3-x4));
CGFloat intersectionY = ((x1*y2-y1*x2)*(y3-y4) - (y1-y2)*(x3*y4-y3*x4)) / ((x1-x2)*(y3-y4) - (y1-y2)*(x3-x4));
CGPoint intersection = CGPointMake(intersectionX,intersectionY);
CornerPoint corner;
corner.centerPoint = intersection;
corner.startAngle = fromAngle - M_PI_2;
corner.endAngle = toAngle - M_PI_2;
return corner;
}
然后我使用该代码3次来计算3个角：
CornerPoint leftCorner = [self roundedCornerWithLinesFrom:right
via:left
to:top
withRadius:radius];
CornerPoint topCorner = [self roundedCornerWithLinesFrom:left
via:top
to:right
withRadius:radius];
CornerPoint rightCorner = [self roundedCornerWithLinesFrom:top
via:right
to:left
withRadius:radius];
现在,拥有所有必要的数据,启动我们创建实际路径的部分.我将依赖于CGPathAddArc将从当前点到起点添加一条直线,而不必自己绘制这些行(这是记录的行为).
我手动必须计算的唯一点是路径的起点.我选择右下角的开始(没有具体原因).从那里,您只需在起点和终点角度的交点中加上中心的弧：
CGMutablePathRef roundedTrianglePath = CGPathCreateMutable(); // manually calculated start point CGPathMoveToPoint(roundedTrianglePath,NULL,leftCorner.centerPoint.x + radius*cosf(leftCorner.startAngle),leftCorner.centerPoint.y + radius*sinf(leftCorner.startAngle)); // add 3 arcs in the 3 corners CGPathAddArc(roundedTrianglePath,leftCorner.centerPoint.x,leftCorner.centerPoint.y,radius,leftCorner.startAngle,leftCorner.endAngle,NO); CGPathAddArc(roundedTrianglePath,topCorner.centerPoint.x,topCorner.centerPoint.y,topCorner.startAngle,topCorner.endAngle,rightCorner.centerPoint.x,rightCorner.centerPoint.y,rightCorner.startAngle,rightCorner.endAngle,NO); // close the path CGPathCloseSubpath(roundedTrianglePath);
看起来像这样：
最终结果没有所有的支持线,看起来像这样：
