如何在 iOS 中使用 Bezier 路径绘制具有直线和弯角的不同形状

Question

我需要使用 Bezier 路径和数组中的 CGPoints 在拐角处绘制一个带有直线和曲线的形状。数组中提到的 CGPoints 表示形状的角。路径应根据数组中的 CGPoints（坐标）动态绘制。

Sample shape for reference

Answer 1

绘制多边形

   //// General Declarations
CGContextRef context = UIGraphicsGetCurrentContext();

//// Polygon Drawing
CGContextSaveGState(context);
CGContextTranslateCTM(context, CGRectGetMinX(frame) + 33.5, CGRectGetMinY(frame) + 226.5);
CGContextRotateCTM(context, -90 * M_PI / 180);

UIBezierPath* polygonPath = [UIBezierPath bezierPath];
[polygonPath moveToPoint: CGPointMake(99.5, 0)];
[polygonPath addLineToPoint: CGPointMake(185.67, 47.75)];
[polygonPath addLineToPoint: CGPointMake(185.67, 143.25)];
[polygonPath addLineToPoint: CGPointMake(99.5, 191)];
[polygonPath addLineToPoint: CGPointMake(13.33, 143.25)];
[polygonPath addLineToPoint: CGPointMake(13.33, 47.75)];
[polygonPath closePath];
[UIColor.grayColor setFill];
[polygonPath fill];

CGContextRestoreGState(context);

把它放在你的 uiview 的 drawRect 方法中：

这给出了图像：

弯曲的多边形：

//// Bezier Drawing
UIBezierPath* bezierPath = [UIBezierPath bezierPath];
[bezierPath moveToPoint: CGPointMake(CGRectGetMinX(frame) + 59.5, CGRectGetMinY(frame) + 126.5)];
[bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 55.5, CGRectGetMinY(frame) + 116.5)];
[bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 59.5, CGRectGetMinY(frame) + 105.5)];
[bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 91.5, CGRectGetMinY(frame) + 55.5)];
[bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 101.5, CGRectGetMinY(frame) + 44.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 91.5, CGRectGetMinY(frame) + 55.5) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 96.75, CGRectGetMinY(frame) + 48.5)];
[bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 113.5, CGRectGetMinY(frame) + 39.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 106.25, CGRectGetMinY(frame) + 40.5) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 113.5, CGRectGetMinY(frame) + 39.5)];
[bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 188.5, CGRectGetMinY(frame) + 39.5)];
[bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 203.5, CGRectGetMinY(frame) + 44.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 188.5, CGRectGetMinY(frame) + 39.5) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 198, CGRectGetMinY(frame) + 40.5)];
[bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 213.5, CGRectGetMinY(frame) + 55.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 209, CGRectGetMinY(frame) + 48.5) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 213.5, CGRectGetMinY(frame) + 55.5)];
[bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 245.5, CGRectGetMinY(frame) + 105.5)];
[bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 249.5, CGRectGetMinY(frame) + 116.5)];
[bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 245.5, CGRectGetMinY(frame) + 126.5)];
[bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 213.5, CGRectGetMinY(frame) + 173.5)];
[bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 203.5, CGRectGetMinY(frame) + 180.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 213.5, CGRectGetMinY(frame) + 173.5) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 209, CGRectGetMinY(frame) + 177.25)];
[bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 188.5, CGRectGetMinY(frame) + 183.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 198, CGRectGetMinY(frame) + 183.75) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 188.5, CGRectGetMinY(frame) + 183.5)];
[bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 113.5, CGRectGetMinY(frame) + 183.5)];
[bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 101.5, CGRectGetMinY(frame) + 180.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 113.5, CGRectGetMinY(frame) + 183.5) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 106.25, CGRectGetMinY(frame) + 183.75)];
[bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 94.5, CGRectGetMinY(frame) + 173.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 96.75, CGRectGetMinY(frame) + 177.25) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 94.5, CGRectGetMinY(frame) + 173.5)];
[bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 59.5, CGRectGetMinY(frame) + 126.5)];
[UIColor.grayColor setFill];
[bezierPath fill];
[UIColor.grayColor setStroke];
bezierPath.lineWidth = 1;
[bezierPath stroke];

要产生与您的图像相似的结果：

//// Bezier Drawing
UIBezierPath* bezierPath = [UIBezierPath bezierPath];
[bezierPath moveToPoint: CGPointMake(CGRectGetMinX(frame) + 57.5, CGRectGetMinY(frame) + 126.5)];
[bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 55.5, CGRectGetMinY(frame) + 116.5)];
[bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 57.5, CGRectGetMinY(frame) + 105.5)];
[bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 73.5, CGRectGetMinY(frame) + 55.5)];
[bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 78.5, CGRectGetMinY(frame) + 44.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 73.5, CGRectGetMinY(frame) + 55.5) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 76.12, CGRectGetMinY(frame) + 48.5)];
[bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 84.5, CGRectGetMinY(frame) + 39.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 80.88, CGRectGetMinY(frame) + 40.5) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 84.5, CGRectGetMinY(frame) + 39.5)];
[bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 122, CGRectGetMinY(frame) + 39.5)];
[bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 129.5, CGRectGetMinY(frame) + 44.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 122, CGRectGetMinY(frame) + 39.5) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 126.75, CGRectGetMinY(frame) + 40.5)];
[bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 134.5, CGRectGetMinY(frame) + 55.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 132.25, CGRectGetMinY(frame) + 48.5) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 134.5, CGRectGetMinY(frame) + 55.5)];
[bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 150.5, CGRectGetMinY(frame) + 105.5)];
[bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 152.5, CGRectGetMinY(frame) + 116.5)];
[bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 150.5, CGRectGetMinY(frame) + 126.5)];
[bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 134.5, CGRectGetMinY(frame) + 173.5)];
[bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 129.5, CGRectGetMinY(frame) + 180.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 134.5, CGRectGetMinY(frame) + 173.5) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 132.25, CGRectGetMinY(frame) + 177.25)];
[bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 122, CGRectGetMinY(frame) + 183.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 126.75, CGRectGetMinY(frame) + 183.75) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 122, CGRectGetMinY(frame) + 183.5)];
[bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 84.5, CGRectGetMinY(frame) + 183.5)];
[bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 78.5, CGRectGetMinY(frame) + 180.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 84.5, CGRectGetMinY(frame) + 183.5) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 80.88, CGRectGetMinY(frame) + 183.75)];
[bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 75, CGRectGetMinY(frame) + 173.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 76.12, CGRectGetMinY(frame) + 177.25) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 75, CGRectGetMinY(frame) + 173.5)];
[bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 57.5, CGRectGetMinY(frame) + 126.5)];
[UIColor.grayColor setStroke];
bezierPath.lineWidth = 1;
[bezierPath stroke];