0

I would like to get something like this:

enter image description here

I guess one way to do it would be to draw my rectangle with the two rounded angle in a subpath. Then add another subpass to draw the arrow.

My question is: is there a simpler way to draw the arrow than drawing 4 lines and some curves? I tried doing it by using 2 lines and bezierPath.lineJoinStyle = kCGLineJoinRound but when I fill it, I get a triangle.

This is the code I get from PaintCode when I draw the path.

//// Rectangle Drawing
var rectanglePath = UIBezierPath()
rectanglePath.moveToPoint(CGPointMake(26.71, 14))
rectanglePath.addLineToPoint(CGPointMake(85.29, 14))
rectanglePath.addCurveToPoint(CGPointMake(90.18, 14.39), controlPoint1: CGPointMake(87.8, 14), controlPoint2: CGPointMake(89.05, 14))
rectanglePath.addLineToPoint(CGPointMake(90.4, 14.45))
rectanglePath.addCurveToPoint(CGPointMake(93.57, 17.79), controlPoint1: CGPointMake(91.87, 15.01), controlPoint2: CGPointMake(93.04, 16.24))
rectanglePath.addCurveToPoint(CGPointMake(94, 23.17), controlPoint1: CGPointMake(94, 19.21), controlPoint2: CGPointMake(94, 20.53))
rectanglePath.addLineToPoint(CGPointMake(94, 54))
rectanglePath.addLineToPoint(CGPointMake(18, 54))
rectanglePath.addLineToPoint(CGPointMake(18, 23.17))
rectanglePath.addCurveToPoint(CGPointMake(18.37, 18.02), controlPoint1: CGPointMake(18, 20.53), controlPoint2: CGPointMake(18, 19.21))
rectanglePath.addLineToPoint(CGPointMake(18.43, 17.79))
rectanglePath.addCurveToPoint(CGPointMake(21.6, 14.45), controlPoint1: CGPointMake(18.96, 16.24), controlPoint2: CGPointMake(20.13, 15.01))
rectanglePath.addCurveToPoint(CGPointMake(26.71, 14), controlPoint1: CGPointMake(22.95, 14), controlPoint2: CGPointMake(24.2, 14))
rectanglePath.closePath()
UIColor.grayColor().setFill()
rectanglePath.fill()


//// Bezier Drawing
var bezierPath = UIBezierPath()
bezierPath.moveToPoint(CGPointMake(31.5, 37.5))
bezierPath.addLineToPoint(CGPointMake(56.5, 30.5))
bezierPath.addLineToPoint(CGPointMake(80.5, 37.5))
bezierPath.addLineToPoint(CGPointMake(80.5, 37.5))
bezierPath.addLineToPoint(CGPointMake(56.5, 30.5))
bezierPath.addLineToPoint(CGPointMake(31.5, 37.5))
bezierPath.addLineToPoint(CGPointMake(31.5, 37.5))
bezierPath.closePath()
bezierPath.lineJoinStyle = kCGLineJoinRound;

UIColor.grayColor().setFill()
bezierPath.fill()
UIColor.whiteColor().setStroke()
bezierPath.lineWidth = 5
bezierPath.stroke()

UPDATE:

The arrow is actually some "void" drawing. It's the shape of an arrow but there is nothing inside (we can see through it)

Community
  • 1
  • 1
Nico
  • 6,269
  • 9
  • 45
  • 85

1 Answers1

0

Here's some Core Graphics code that makes a shape like what you're looking for. You would have to translate it into the equivalent BezierPath commands, but that shouldn't be too difficult. You'll of course also have to tweak the coordinates and the colors to your preferences for the size and color. As you can see, it consists of two line shapes with the CGContextSetLineCap command used to round out the ends of each the two line shapes:

    CGContextRef ctx = UIGraphicsGetCurrentContext();   // iOS

/*  Line Shape 1  */
CGMutablePathRef pathRef = CGPathCreateMutable();
CGPathMoveToPoint(pathRef, NULL, 137, 192);
CGPathAddLineToPoint(pathRef, NULL, 300, 145);

CGContextSetLineWidth(ctx, 30);
CGContextSetLineCap(ctx, kCGLineCapRound);
CGContextSetRGBStrokeColor(ctx, 0.129, 0.992, 1, 1);
CGContextAddPath(ctx, pathRef);
CGContextStrokePath(ctx);

CGPathRelease(pathRef);

/*  Line Shape 2  */
CGMutablePathRef pathRef2 = CGPathCreateMutable();
CGPathMoveToPoint(pathRef2, NULL, 463, 192);
CGPathAddLineToPoint(pathRef2, NULL, 300, 145);

CGContextSetLineWidth(ctx, 30);
CGContextSetLineCap(ctx, kCGLineCapRound);
CGContextSetRGBStrokeColor(ctx, 0.129, 0.992, 1, 1);
CGContextAddPath(ctx, pathRef2);
CGContextStrokePath(ctx);

CGPathRelease(pathRef2);
Samuel W.
  • 370
  • 1
  • 10
  • Thanks. I tried to test it by adding the code inside the `drawRect`` method of a custom view but nothing appeared. Do I need to trigger something to draw the path? – Nico Jun 23 '15 at 06:17
  • No, the code I presented above should work as-is if cut and pasted into the drawRect method of a custom view. I just tried doing that and running it in Xcode's simulator and it works fine. – Samuel W. Jun 23 '15 at 06:33
  • I tried it in the playground and it didn't work. Okay I'll find a way. Thanks – Nico Jun 23 '15 at 06:45
  • I ran the above code in an Objective-C program I'm using. I just noticed that you're using Swift. Not too familiar with Swift, but don't notice anything offhand in the Core Graphics code above that should cause a problem. – Samuel W. Jun 23 '15 at 06:54
  • My bad, I wasn't precise enough... I updated the question. The arrow in my rectangle is an arrow that you would take off the rectangle to have a transparent shape of an arrow in the rectangle – Nico Jun 23 '15 at 07:32