Polygon with rounded corners using UIBezierPath

1
votes

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?

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.

3
ioscore-graphicspolygonuibezierpath
Are you looking for circular arcs only, or would Bezier curves be acceptable ? I have some code that cut corners and replace them by Bezier curves. - alecail

3 Answers

6
votes

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

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.

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.

You'll use a sequence of:

  • moveToPoint addLineToPoint -- first side

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

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

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

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

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

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

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

    closePath

2
votes

You can use PaintCodeApp so you don't have to write any of the drawing code. There's a demo download available: http://www.paintcodeapp.com/

-5
votes

You can refer below link to create a polygon shape with rounded corners.

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