1

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.

Andrew
  • 655
  • 2
  • 7
  • 11
  • 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 Oct 03 '12 at 12:22

3 Answers3

6

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

Duncan C
  • 128,072
  • 22
  • 173
  • 272
  • Thanks for the suggestion, but I need to do this for non-rectangular polygons as well though, so I don't think this bounding-rectangle approach would work in my case. – Andrew Apr 28 '12 at 10:15
  • Gotcha. You'd use the same approach, although the math would get a lot more complex. Assuming you're using regular polygons, you can figure out the number of degrees of each angle. (I'd have to go look up the formula.) The circle for the arc would fit into the corner made by each vertex such that the center of the circle bisected the angle. The circle would touch two sides of the polygon at points that form a right angle between the polygon side and the – Duncan C Apr 28 '12 at 23:54
  • Oops. Hit return by accident, and then didn't edit it soon enough. Trying to explain how to do it is more than I can fit in 500 characters. Suffice it to say you'd use trig and geometry to figure out the coordinates of the center of the arc for each corner of your polygon, and the intersection points of that arc with the polygon. – Duncan C Apr 29 '12 at 00:23
2

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/

Snowman
  • 31,411
  • 46
  • 180
  • 303
  • Thanks for the link, but I'd be needing a more dynamic solution where the points of the polygon don't need to be known in advance. – Andrew Apr 27 '12 at 23:32
-5

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

kalai
  • 56
  • 8
  • And it seems very uncool that this link is a rendition of [my answer](http://stackoverflow.com/questions/24767978/how-to-round-corners-of-uiimage-with-hexagon-mask/24770675#24770675) without [attribution](http://blog.stackoverflow.com/2009/06/attribution-required/). – Rob Nov 30 '15 at 14:46