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()

结果如下：

这是怎么回事：

首先使用bezier路径创建一个圆圈：

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个bezier路径，使它们看起来像是合并的：

//// 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路径合并为一个，结果如下：

//// 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()

Answer 2

在我的情况下，我必须在用户登录或注销时绘制指标。

我在Swift 4（游乐场）中进行了测试

jobdate column

检查screenShot

如何将圆圈添加到矩形？ UIBezierPath

2 个答案: