ios – UIBezierPath具有圆形边缘的三角形

概述我设计了这个代码来生成一个Bezier Path,该路径用作CAShapeLayer屏蔽UIView的路径(视图的高度和宽度是可变的) 这个代码生成一个具有尖锐边缘的三角形,但我想让它圆角！我花了两个小时尝试与addArcWithCenter …,lineCapStyle和lineJoinStyle等工作,但似乎没有任何工作. UIBezierPath *bezierPath = [UIBezie 我设计了这个代码来生成一个BezIEr Path,该路径用作CAShapeLayer屏蔽UIVIEw的路径(视图的高度和宽度是可变的)

这个代码生成一个具有尖锐边缘的三角形,但我想让它圆角！我花了两个小时尝试与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 pointCGPathMovetoPoint(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 pathCGPathCloseSubpath(roundedTrianglePath);

看起来像这样：

最终结果没有所有的支持线,看起来像这样：

总结

以上是内存溢出为你收集整理的ios – UIBezierPath具有圆形边缘的三角形全部内容，希望文章能够帮你解决ios – UIBezierPath具有圆形边缘的三角形所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。