指针在iOS中绘制像挤压气泡一样的形状

Question

我正在尝试制作一个小圆泡形状，在整圆和挤压形状之间切换。我遇到了this article使用UIBezierPath分解为直线和圆形以形成带圆角的矩形形状。但在开始之前，我认为如果我能得到一些关于如何前进的指示会更好。例如，如果我使用UIBezierPath，那么在挤压气泡的情况下，如何将路径分解为单独的曲线。我想的形状是一个椭圆形，在两个相对的两侧有凹凸起，有点像沙漏。我无法弄清楚如何制作这种形状。任何指针都会受到赞赏。

Answer 1

创建UIBezierPath的Swift 2代码：

var borderWidth : CGFloat = 4 // Should be less or equal to the `radius` property
var radius : CGFloat = 10
var triangleHeight : CGFloat = 15

private func bubblePathForContentSize(contentSize: CGSize) -> UIBezierPath {
    let rect = CGRectMake(0, 0, contentSize.width, contentSize.height).offsetBy(dx: radius, dy: radius + triangleHeight)
    let path = UIBezierPath();
    let radius2 = radius - borderWidth / 2 // Radius adjasted for the border width

    path.moveToPoint(CGPointMake(rect.maxX - triangleHeight * 2, rect.minY - radius2))
    path.addLineToPoint(CGPointMake(rect.maxX - triangleHeight, rect.minY - radius2 - triangleHeight))
    path.addArcWithCenter(CGPointMake(rect.maxX, rect.minY), radius: radius2, startAngle: CGFloat(-M_PI_2), endAngle: 0, clockwise: true)
    path.addArcWithCenter(CGPointMake(rect.maxX, rect.maxY), radius: radius2, startAngle: 0, endAngle: CGFloat(M_PI_2), clockwise: true)
    path.addArcWithCenter(CGPointMake(rect.minX, rect.maxY), radius: radius2, startAngle: CGFloat(M_PI_2), endAngle: CGFloat(M_PI), clockwise: true)
    path.addArcWithCenter(CGPointMake(rect.minX, rect.minY), radius: radius2, startAngle: CGFloat(M_PI), endAngle: CGFloat(-M_PI_2), clockwise: true)
    path.closePath()
    return path
}

你可以用这条路做任何你想做的事。例如，使用它来设置CAShapeLayer，然后将其添加到视图中：

bubbleLayer.path = bubblePathForContentSize(contentView.bounds.size).CGPath
bubbleLayer.fillColor = fillColor.CGColor
bubbleLayer.strokeColor = borderColor.CGColor
bubbleLayer.lineWidth = borderWidth
bubbleLayer.position = CGPoint.zero
myView.layer.addSublayer(bubbleLayer)

Answer 2

你可以使用它。这会形成一个看起来像挤压泡沫的形状。

/// Oval Drawing
UIBezierPath* ovalPath = UIBezierPath.bezierPath;
[ovalPath moveToPoint: CGPointMake(151, 76)];
[ovalPath addCurveToPoint: CGPointMake(151.31, 38.76) controlPoint1:CGPointMake(172, 82) controlPoint2: CGPointMake(165.62, 27.52)];
[ovalPath addCurveToPoint: CGPointMake(99.69, 38.76) controlPoint1: CGPointMake(137, 50) controlPoint2: CGPointMake(113.94, 28.41)];
[ovalPath addCurveToPoint: CGPointMake(99.69, 76.24) controlPoint1: CGPointMake(85.44, 49.11) controlPoint2: CGPointMake(85.44, 65.89)];
[ovalPath addCurveToPoint: CGPointMake(151, 76) controlPoint1: CGPointMake(113.94, 86.59) controlPoint2: CGPointMake(130, 70)];
[ovalPath closePath];
[UIColor.grayColor setFill];
[ovalPath fill];