如何使用贝塞尔路径实现我的绘图？

Posted 2023-03-12

【中文标题】如何使用贝塞尔路径实现我的绘图？

【英文标题】：How to achieve my drawing using a bezier path?

【发布时间】：2015-06-23 05:33:41

【问题描述】：

我想得到这样的东西：

我想一种方法是在子路径中用两个圆角绘制我的矩形。然后添加另一个子通道来绘制箭头。

我的问题是：有没有比绘制 4 条线和一些曲线更简单的方法来绘制箭头？我尝试使用 2 行和 bezierPath.lineJoinStyle = kCGLineJoinRound 来完成它，但是当我填充它时，我得到了一个三角形。

这是我在绘制路径时从 PaintCode 得到的代码。

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

更新：

箭头实际上是一些“虚空”的绘图。它是一个箭头的形状，但里面什么都没有（我们可以看穿它）

【参考方案1】：

这里有一些 Core Graphics 代码可以制作出您正在寻找的形状。您必须将其转换为等效的 BezierPath 命令，但这应该不会太难。当然，您还必须根据您对尺寸和颜色的偏好来调整坐标和颜色。如您所见，它由两个线形组成，CGContextSetLineCap 命令用于圆整两个线形的末端：

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

【讨论】：

谢谢。我试图通过在自定义视图的 `drawRect` 方法中添加代码来测试它，但没有出现。我需要触发一些东西来绘制路径吗？

不，如果剪切并粘贴到自定义视图的 drawRect 方法中，我上面提供的代码应该可以按原样工作。我只是尝试这样做并在 Xcode 的模拟器中运行它，它工作正常。

我在操场上试过了，没用。好的，我会想办法的。谢谢

我在我正在使用的 Objective-C 程序中运行了上面的代码。我刚刚注意到您正在使用 Swift。对 Swift 不太熟悉，但不要注意到上面的 Core Graphics 代码中有任何会导致问题的东西。

我的错，我不够精确...我更新了问题。我的矩形中的箭头是一个箭头，您可以将其取下矩形以在矩形中具有透明的箭头形状