使用 UIBezierPath 的圆角多边形

Posted 2023-03-12

【中文标题】使用 UIBezierPath 的圆角多边形

【英文标题】：Polygon with rounded corners using UIBezierPath

【发布时间】：2012-04-27 21:07:53

【问题描述】：

我想使用 UIBezierPath 创建一个带圆角的多边形。我相信使用addCurveToPoint:controlPoint1:controlPoint2: 和http://www.codeproject.com/Articles/31859/Draw-a-Smooth-Curve-through-a-Set-of-2D-Points-wit 中的类似代码可以实现这一点，但我想知道是否有任何现有（或更好的）方法可以实现这一点？

我应该指出，这将需要用于任何凸多边形（例如在 voronoi 图中找到），而不仅仅是矩形。

【问题讨论】：

您是只寻找圆弧，还是可以接受贝塞尔曲线？我有一些偷工减料并用贝塞尔曲线替换它们的代码。

【参考方案1】：

您不想要 addCurveToPoint。如果您使用的是 UIBezierPath，则需要 addArcWithCenter:radius:startAngle:endAngle:顺时针：

这就是你要做的。画出你的矩形。找出你想要的圆角半径。在每个角落画圆，从每边插入你的角落半径。 （每个角圆的中心将从每个角插入 x 和 y 中的角半径。）然后绘制 4 条线的序列，连接矩形与每个角的圆接触的点。

每条弧线将覆盖 90 度（pi/2，以弧度为单位）。右上角的范围从 0 到 pi/2。左上角的角度将从 pi/2 开始并转到 pi。左下角的圆弧范围从 pi 到 3/2 pi。右下弧的角度范围为 3/2 pi 到 2pi。

您将使用以下序列：

moveToPoint addLineToPoint -- 第一边

addArcWithCenter:radius:startAngle:endAngle:顺时针 -- 首先 圆角

lineToPoint --第二边，到下一个圆角的开始

addArcWithCenter:radius:startAngle:endAngle:顺时针 -- 秒 圆角

lineToPoint --第三边，到下一个圆角的开始

addArcWithCenter:radius:startAngle:endAngle:顺时针 -- 第三 圆角

lineToPoint --forth 边，到最后的开头 圆角

addArcWithCenter:radius:startAngle:endAngle:顺时针——四舍五入 角落，连接回第一侧。

关闭路径

【讨论】：

感谢您的建议，但我也需要对非矩形多边形执行此操作，因此我认为这种边界矩形方法不适用于我的情况。

明白了。您将使用相同的方法，尽管数学会变得更加复杂。假设您使用的是正多边形，您可以计算出每个角度的度数。 （我必须去查找公式。）弧的圆将适合每个顶点形成的角，使得圆的中心平分角度。圆将在多边形边和多边形之间形成直角的点接触多边形的两侧

糟糕。意外点击返回，然后没有尽快编辑它。试图解释如何做到这一点超出了我可以容纳 500 个字符的范围。只需说您将使用三角函数和几何图形来计算多边形每个角的圆弧中心的坐标，以及该圆弧与多边形的交点。

【参考方案2】：

您可以使用 PaintCodeApp，因此您无需编写任何绘图代码。有一个演示下载：http://www.paintcodeapp.com/

【讨论】：

感谢您的链接，但我需要一个更动态的解决方案，其中不需要提前知道多边形的点。

【参考方案3】：

您可以参考下面的链接来创建一个带有圆角的多边形。

http://www.scriptscoop.net/t/ec0f886dcfea/create-hexagon-imageview-shape-in-ios.html

【讨论】：

而且这个链接是my answer 没有attribution 的演绎，这似乎很不酷。