使用UIBezierPath的带圆角的多边形 [英] Polygon with rounded corners using UIBezierPath

问题描述

我想使用UIBezierPath创建一个带圆角的多边形。我相信这可以使用 addCurveToPoint：controlPoint1：controlPoint2：以及类似于 http://www.codeproject.com/Articles/31859/Draw-a-Smooth-曲线通过一组2D点 - 机智，但我想知道是否有任何现有（或更好）的方法来实现这一目标？

I would like to use UIBezierPath to create a polygon shape with rounded corners. I believe this will be possible using addCurveToPoint:controlPoint1:controlPoint2: and similar code to that found in http://www.codeproject.com/Articles/31859/Draw-a-Smooth-Curve-through-a-Set-of-2D-Points-wit, but I was wondering if there's any existing (or better) way to achieve this?

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

I should point out that this will need to be for any convex polygon (such as found in a voronoi diagram) and not just a rectangular shape.

推荐答案

您不需要addCurveToPoint。如果您正在使用UIBezierPath，则需要addArcWithCenter：radius：startAngle：endAngle：顺时针：

You don't want addCurveToPoint. If you're using UIBezierPath, you want addArcWithCenter:radius:startAngle:endAngle:clockwise:

这是您的工作。画出你的矩形。弄清楚你想要的角半径。在每个角落画圆圈，从每个角落插入角落半径。 （每个角圆的中心将从每个角落插入x和y的角半径。）然后绘制出4条线的序列，连接矩形接触每个角落的圆的点。

Here's what you do. Draw your rectangle. Figure out the corner radius you want. Draw circles in each corner, inset from each side by your corner radius. (the center of each corner circle will be inset from each corner by the corner radius in both x and y.) Then map out a sequence of 4 lines, connecting the points where your rectangle touches the circles in each corner.

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

Each arc will cover 90 degrees (pi/2, in radians.) The top right corner's are will range from 0 to pi/2. The top left corner's angle will start at pi/2 and go to pi. the bottom left corner's arc will range from pi to 3/2 pi. The bottom right arc's angle will range from 3/2 pi to 2pi.

您将使用以下序列：

• moveToPoint addLineToPoint - 第一面

• moveToPoint addLineToPoint -- first side

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

addArcWithCenter:radius:startAngle:endAngle:clockwise -- first rounded corner

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

lineToPoint --second side, to beginning of next rounded corner

addArcWithCenter：radius：startAngle： endAngle：顺时针 - 第二个
圆角

addArcWithCenter:radius:startAngle:endAngle:clockwise -- second rounded corner

lineToPoint - 第三方，到下一个圆角的开头

lineToPoint --third side, to beginning of next rounded corner

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

addArcWithCenter:radius:startAngle:endAngle:clockwise -- third rounded corner

lineToPoint - 第四方，到最后$ b $的开头b圆角

lineToPoint --forth side, to beginning of last rounded corner

addArcWithCenter：radius：startAngle：endAngle：顺时针 - 四舍五入
角，连接回第一面。

addArcWithCenter:radius:startAngle:endAngle:clockwise-- forth rounded corner, connecting back to first side.

closePath

closePath

这篇关于使用UIBezierPath的带圆角的多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！