ios 通过核心图形绘制圆角用于自定义形状

p1tboqfb  于 2023-08-08  发布在  iOS
关注(0)|答案(2)|浏览(104)

我画自定义形状使用核心图形,我想为这个形状圆角,这是我的代码绘制我的自定义形状

CGPoint p1=[self getPointFromAngleQuarter:start_angle2 andRaduis:card.small_Raduis andCenter:center];
CGContextMoveToPoint(context, p1.x, p1.y);
CGPoint p2=[self getPointFromAngleQuarter:start_angle2 andCenter:center andRaduis:self.large_Raduis];
CGContextAddLineToPoint(context, p2.x, p2.y);
CGContextAddArc(context,center.x, center.y, selectedLargeRaduis, start, end,0);
CGPoint p5=[self getPointFromAngle:end_Angle andCenter:center andRaduis:self.small_Raduis];
CGContextAddLineToPoint(context, p5.x, p5.y);
CGContextAddArc(context,center.x, center.y,selectedSmallRaduis, end, start,1);
CGContextDrawPath(context, kCGPathFill);

字符串
这是我自定义形状的最终结果
Custom Shape


的数据

plicqrtu

plicqrtu1#

如果此形状是纯色,简单的解决方案是使用非常宽的线宽,加上圆形线帽和圆形线连接。我想,虽然,你希望这个圆形的形状完全躺在你的图片中包括的形状。然后,技巧是偏移你画的弧的量等于拐角半径的路径(和中风的两倍宽度的拐角半径的线)。
例如,考虑这个图(这不是所需的形状,但向我们展示了如何到达那里):
x1c 0d1x的数据
背景中的黑色形状是您的原始形状。白色的路径是我要画的路径,以实现圆角。浅灰色是使用大线宽、圆形线连接和圆形线帽描边的路径。深灰色是用另一种颜色填充的路径。
希望这能说明这个想法。创建新路径,偏移角半径,并使用两倍于角半径的线宽绘制。如果你简单地画一个实心的反笔划(替换上图中的浅灰色)和实心的黑色填充(替换上图中的深灰色),你会得到你想要的形状:



下面是在Objective-C中获取路径(第一张图中的白色)的例程:

- (UIBezierPath *)arcWithRoundedCornerAt:(CGPoint)center
                              startAngle:(CGFloat)startAngle
                                endAngle:(CGFloat)endAngle
                             innerRadius:(CGFloat)innerRadius
                             outerRadius:(CGFloat)outerRadius
                            cornerRadius:(CGFloat)cornerRadius {
    CGFloat innerTheta = asin(cornerRadius / 2.0 / (innerRadius + cornerRadius)) * 2.0;
    CGFloat outerTheta = asin(cornerRadius / 2.0 / (outerRadius - cornerRadius)) * 2.0;

    UIBezierPath *path = [UIBezierPath bezierPath];

    [path addArcWithCenter:center
                    radius:innerRadius + cornerRadius
                startAngle:endAngle - innerTheta
                  endAngle:startAngle + innerTheta
                 clockwise:false];

    [path addArcWithCenter:center
                    radius:outerRadius - cornerRadius
                startAngle:startAngle + outerTheta
                  endAngle:endAngle - outerTheta
                 clockwise:true];

    [path closePath];

    return path;
}

字符串
Swift 3:

private func arcWithRoundedCorners(at center: CGPoint, startAngle: CGFloat, endAngle: CGFloat, innerRadius: CGFloat, outerRadius: CGFloat, cornerRadius: CGFloat) -> UIBezierPath {
    let innerTheta = asin(cornerRadius / 2 / (innerRadius + cornerRadius)) * 2
    let outerTheta = asin(cornerRadius / 2 / (outerRadius - cornerRadius)) * 2

    let path = UIBezierPath()

    path.addArc(withCenter: center, radius: innerRadius + cornerRadius, startAngle: endAngle - innerTheta, endAngle: startAngle + innerTheta, clockwise: false)
    path.addArc(withCenter: center, radius: outerRadius - cornerRadius, startAngle: startAngle + outerTheta, endAngle: endAngle - outerTheta, clockwise: true)
    path.close()

    return path
}


(You如果你愿意的话,我可以用Core Graphics调用来做上面的事情,但我通常使用UIBezierPath
但是,如果您需要填充的颜色与笔划的颜色不同,则该过程将更加复杂,因为您不能仅使用此技术。相反,您实际上必须定义一个路径,该路径是上述形状的轮廓,但不仅包括绘制两个大弧,还包括为每个角绘制四个小弧。用三角函数来构造这条路径虽然很繁琐,但也很简单,但除非万不得已,否则我不会这么做。

6yjfywim

6yjfywim2#

Rob的回答很好。
只是对于那些不喜欢阅读文本,只喜欢复制粘贴的人来说,不要忘记自定义您的Bezier路径:

let path = UIBezierPath()
path.lineWidth = cornerRadius * 2
path.lineCapStyle = .round
path.lineJoinStyle = .round

path.addArc(withCenter: center, radius: innerRadius + cornerRadius, startAngle: endAngle - innerTheta, endAngle: startAngle + innerTheta, clockwise: false)
path.addArc(withCenter: center, radius: outerRadius - cornerRadius, startAngle: startAngle + outerTheta, endAngle: endAngle - outerTheta, clockwise: true)
path.close()

let color = UIColor.black //any color
color.setStroke()
color.setFill()
path.stroke()
path.fill()

字符串

相关问题