ios - 如何添加圆到矩形？ UIBezierPath

Question

我需要使用bezeirPath绘制此形状:


我做了以下事情:

我创建了矩形路径。

然后我添加了五个圈子。

如下面的代码所示:

let stickLayerBezeirPath = UIBezierPath(rect: rectangleFrame)
  for(var i = 0 ;i < circlesNumber ; i++){



            stickLayerBezeirPath.addArcWithCenter(
                                                  centerPoint,
                                                  radius: CIRCLE_RADIUS,
                                                  startAngle:       CGFloat(0).degreesToRadians,
                                                  endAngle: CGFloat(360).degreesToRadians,
                                                  clockwise: true)



        }

stickLayer = CAShapeLayer()
self.stickLayer.path = stickLayerBezeirPath.CGPath

但是我得到了一个图层，它不能正确地将矩形与圆连接起来:


我期望没有线的图层。

如何解决？

Answer 1

您可以尝试以下方法:h:29 w:197

    let bezier3Path = UIBezierPath()
bezier3Path.moveToPoint(CGPointMake(217, 51.5))
bezier3Path.addCurveToPoint(CGPointMake(201.97, 66), controlPoint1: CGPointMake(217, 59.51), controlPoint2: CGPointMake(210.27, 66))
bezier3Path.addCurveToPoint(CGPointMake(187.66, 55.98), controlPoint1: CGPointMake(195.28, 66), controlPoint2: CGPointMake(189.62, 61.8))
bezier3Path.addCurveToPoint(CGPointMake(161.34, 55.98), controlPoint1: CGPointMake(187.66, 55.98), controlPoint2: CGPointMake(168.57, 55.98))
bezier3Path.addCurveToPoint(CGPointMake(147.03, 66), controlPoint1: CGPointMake(159.38, 61.8), controlPoint2: CGPointMake(153.72, 66))
bezier3Path.addCurveToPoint(CGPointMake(132.74, 56), controlPoint1: CGPointMake(140.36, 66), controlPoint2: CGPointMake(134.7, 61.81))
bezier3Path.addCurveToPoint(CGPointMake(104.26, 56), controlPoint1: CGPointMake(132.74, 56), controlPoint2: CGPointMake(116.69, 56))
bezier3Path.addCurveToPoint(CGPointMake(89.97, 66), controlPoint1: CGPointMake(102.3, 61.81), controlPoint2: CGPointMake(96.64, 66))
bezier3Path.addCurveToPoint(CGPointMake(75.66, 55.98), controlPoint1: CGPointMake(83.28, 66), controlPoint2: CGPointMake(77.62, 61.8))
bezier3Path.addCurveToPoint(CGPointMake(49.34, 55.98), controlPoint1: CGPointMake(75.66, 55.98), controlPoint2: CGPointMake(56.57, 55.98))
bezier3Path.addCurveToPoint(CGPointMake(35.03, 66), controlPoint1: CGPointMake(47.38, 61.8), controlPoint2: CGPointMake(41.72, 66))
bezier3Path.addCurveToPoint(CGPointMake(20, 51.5), controlPoint1: CGPointMake(26.73, 66), controlPoint2: CGPointMake(20, 59.51))
bezier3Path.addCurveToPoint(CGPointMake(29.43, 38.04), controlPoint1: CGPointMake(20, 45.4), controlPoint2: CGPointMake(23.9, 40.19))
bezier3Path.addCurveToPoint(CGPointMake(35.03, 37), controlPoint1: CGPointMake(31.16, 37.37), controlPoint2: CGPointMake(33.05, 37))
bezier3Path.addCurveToPoint(CGPointMake(49.34, 47.02), controlPoint1: CGPointMake(41.72, 37), controlPoint2: CGPointMake(47.38, 41.2))
bezier3Path.addLineToPoint(CGPointMake(75.66, 47.02))
bezier3Path.addCurveToPoint(CGPointMake(77.66, 43.17), controlPoint1: CGPointMake(76.13, 45.63), controlPoint2: CGPointMake(76.81, 44.34))
bezier3Path.addCurveToPoint(CGPointMake(81.92, 39.25), controlPoint1: CGPointMake(78.8, 41.61), controlPoint2: CGPointMake(80.25, 40.27))
bezier3Path.addCurveToPoint(CGPointMake(89.97, 37), controlPoint1: CGPointMake(84.25, 37.83), controlPoint2: CGPointMake(87.01, 37))
bezier3Path.addCurveToPoint(CGPointMake(104.26, 47), controlPoint1: CGPointMake(96.64, 37), controlPoint2: CGPointMake(102.3, 41.19))
bezier3Path.addLineToPoint(CGPointMake(132.74, 47))
bezier3Path.addCurveToPoint(CGPointMake(141.43, 38.04), controlPoint1: CGPointMake(134.12, 42.92), controlPoint2: CGPointMake(137.33, 39.63))
bezier3Path.addCurveToPoint(CGPointMake(147.03, 37), controlPoint1: CGPointMake(143.16, 37.37), controlPoint2: CGPointMake(145.05, 37))
bezier3Path.addCurveToPoint(CGPointMake(161.34, 47.02), controlPoint1: CGPointMake(153.72, 37), controlPoint2: CGPointMake(159.38, 41.2))
bezier3Path.addLineToPoint(CGPointMake(187.66, 47.02))
bezier3Path.addCurveToPoint(CGPointMake(188.61, 44.83), controlPoint1: CGPointMake(187.92, 46.26), controlPoint2: CGPointMake(188.24, 45.53))
bezier3Path.addCurveToPoint(CGPointMake(189.66, 43.17), controlPoint1: CGPointMake(188.92, 44.25), controlPoint2: CGPointMake(189.27, 43.7))
bezier3Path.addCurveToPoint(CGPointMake(201.97, 37), controlPoint1: CGPointMake(192.38, 39.44), controlPoint2: CGPointMake(196.88, 37))
bezier3Path.addCurveToPoint(CGPointMake(217, 51.5), controlPoint1: CGPointMake(210.27, 37), controlPoint2: CGPointMake(217, 43.49))
bezier3Path.closePath()
UIColor.grayColor().setFill()
bezier3Path.fill()

结果如下:



做得如何:

首先使用贝塞尔曲线路径创建一个圆:

let ovalPath = UIBezierPath(ovalInRect: CGRectMake(31, 24, 47, 49))
UIColor.grayColor().setFill()
ovalPath.fill()

-创建另一个圆，并与第一个圆保持一定距离绘制:

let oval2Path = UIBezierPath(ovalInRect: CGRectMake(157, 24, 47, 49))
    UIColor.grayColor().setFill()
    oval2Path.fill()

-现在在这两个圆柱之间绘制一个矩形:

let rectanglePath = UIBezierPath(rect: CGRectMake(83, 44, 69, 9))
UIColor.grayColor().setFill()
rectanglePath.fill()

-移动3个贝塞尔曲线路径，使它们看起来像是合并的:

//// Oval Drawing
let ovalPath = UIBezierPath(ovalInRect: CGRectMake(32, 24, 47, 49))
UIColor.grayColor().setFill()
ovalPath.fill()


//// Oval 2 Drawing
let oval2Path = UIBezierPath(ovalInRect: CGRectMake(143, 24, 47, 49))
UIColor.grayColor().setFill()
oval2Path.fill()


//// Rectangle Drawing
let rectanglePath = UIBezierPath(rect: CGRectMake(76, 44, 69, 9))
UIColor.grayColor().setFill()
rectanglePath.fill()

-现在将三个贝塞尔曲线路径合并为一个，结果是:

//// Bezier Drawing
let bezierPath = UIBezierPath()
bezierPath.moveToPoint(CGPointMake(190, 48.5))
bezierPath.addCurveToPoint(CGPointMake(166.5, 73), controlPoint1: CGPointMake(190, 62.03), controlPoint2: CGPointMake(179.48, 73))
bezierPath.addCurveToPoint(CGPointMake(143.4, 53), controlPoint1: CGPointMake(155, 73), controlPoint2: CGPointMake(145.42, 64.38))
bezierPath.addCurveToPoint(CGPointMake(78.6, 53), controlPoint1: CGPointMake(143.4, 53), controlPoint2: CGPointMake(91, 53))
bezierPath.addCurveToPoint(CGPointMake(55.5, 73), controlPoint1: CGPointMake(76.58, 64.38), controlPoint2: CGPointMake(67, 73))
bezierPath.addCurveToPoint(CGPointMake(32, 48.5), controlPoint1: CGPointMake(42.52, 73), controlPoint2: CGPointMake(32, 62.03))
bezierPath.addCurveToPoint(CGPointMake(43.8, 27.25), controlPoint1: CGPointMake(32, 39.41), controlPoint2: CGPointMake(36.75, 31.47))
bezierPath.addCurveToPoint(CGPointMake(55.5, 24), controlPoint1: CGPointMake(47.25, 25.18), controlPoint2: CGPointMake(51.24, 24))
bezierPath.addCurveToPoint(CGPointMake(78.6, 44), controlPoint1: CGPointMake(67, 24), controlPoint2: CGPointMake(76.58, 32.62))
bezierPath.addLineToPoint(CGPointMake(143.4, 44))
bezierPath.addCurveToPoint(CGPointMake(145.44, 37.61), controlPoint1: CGPointMake(143.8, 41.75), controlPoint2: CGPointMake(144.49, 39.6))
bezierPath.addCurveToPoint(CGPointMake(166.5, 24), controlPoint1: CGPointMake(149.29, 29.54), controlPoint2: CGPointMake(157.27, 24))
bezierPath.addCurveToPoint(CGPointMake(190, 48.5), controlPoint1: CGPointMake(179.48, 24), controlPoint2: CGPointMake(190, 34.97))
bezierPath.closePath()
UIColor.grayColor().setFill()
bezierPath.fill()