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

我设计了这个代码来生成一个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 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);

看起来像这样：

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

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

解决方法

相关文章