在 Swift 的 SpriteKit 中如何绘制带有多种颜色边框的空心圆形？

Question

除黑色外，边框周围有不同的颜色。

我最近开始尝试使用Swift和SpriteKit。

正如标题所说，我正在尝试用Swift绘制一个空心圆，并在圆形边界周围涂上多种颜色。

我没有任何代码可供提供，对此深感抱歉。

欢迎给出提示。

谢谢提前， Svante。

- Svante

---

你能提供一个样例图片吗？多种颜色是指什么？包括渐变吗？ - Teja Nandamuri

类似于这个，除了黑色之外还有其他颜色：http://i.imgur.com/rDVBiQv.png - Svante

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Teja Nandamuri

Answer 1

更简单的方法是在Photoshop中完成此操作，然后在视图中使用该图像。

要绘制具有多种颜色的圆形，您需要拥有多个贝塞尔路径。

我尝试使用贝塞尔路径绘制四色圆形，但无法得到完美的圆形切割。

- (void)drawRect: (CGRect)frame
{
    //// Color Declarations
    UIColor* color2 = [UIColor colorWithRed: 0.062 green: 0.416 blue: 0.888 alpha: 1];
    UIColor* color3 = [UIColor colorWithRed: 0.768 green: 0.09 blue: 0.09 alpha: 1];
    UIColor* color4 = [UIColor colorWithRed: 0.109 green: 0.853 blue: 0.145 alpha: 1];

    //// Bezier Drawing
    UIBezierPath* bezierPath = [UIBezierPath bezierPath];
    [UIColor.redColor setStroke];
    bezierPath.lineWidth = 2;
    [bezierPath stroke];

     SKShapeNode *sBezierPath = [SKShapeNode shapeNodeWithPath: bezierPath.CGPath];
     [self addChild: sBezierPath];
    //// Bezier 4 Drawing
    UIBezierPath* bezier4Path = [UIBezierPath bezierPath];
    [bezier4Path moveToPoint: CGPointMake(CGRectGetMinX(frame) + 9.5, CGRectGetMinY(frame) + 50.5)];
    [bezier4Path addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 17.5, CGRectGetMinY(frame) + 77.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 9.5, CGRectGetMinY(frame) + 50.5) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 7.75, CGRectGetMinY(frame) + 68.5)];
    [bezier4Path addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 48.5, CGRectGetMinY(frame) + 88.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 27.25, CGRectGetMinY(frame) + 86.5) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 48.5, CGRectGetMinY(frame) + 88.5)];
    [UIColor.blackColor setStroke];
    bezier4Path.lineWidth = 1;
    [bezier4Path stroke];

   SKShapeNode *sBezier4Path = [SKShapeNode shapeNodeWithPath: bezier4Path.CGPath];
     [self addChild: sBezier4Path];

    //// Bezier 5 Drawing
    UIBezierPath* bezier5Path = [UIBezierPath bezierPath];
    [bezier5Path moveToPoint: CGPointMake(CGRectGetMinX(frame) + 48.5, CGRectGetMinY(frame) + 88.5)];
    [bezier5Path addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 58.37, CGRectGetMinY(frame) + 89.05) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 48.5, CGRectGetMinY(frame) + 88.5) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 52.71, CGRectGetMinY(frame) + 89.12)];
    [bezier5Path addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 81.5, CGRectGetMinY(frame) + 81.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 65.65, CGRectGetMinY(frame) + 88.95) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 75.31, CGRectGetMinY(frame) + 86.7)];
    [bezier5Path addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 91.5, CGRectGetMinY(frame) + 50.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 92.5, CGRectGetMinY(frame) + 72.25) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 91.5, CGRectGetMinY(frame) + 50.5)];
    [color2 setStroke];
    bezier5Path.lineWidth = 1;
    [bezier5Path stroke];

    SKShapeNode *sBezier5Path = [SKShapeNode shapeNodeWithPath: bezier5Path.CGPath];
     [self addChild: sBezier5Path];

    //// Bezier 2 Drawing
    UIBezierPath* bezier2Path = [UIBezierPath bezierPath];
    [bezier2Path moveToPoint: CGPointMake(CGRectGetMinX(frame) + 9.5, CGRectGetMinY(frame) + 50.5)];
    [bezier2Path addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 22.5, CGRectGetMinY(frame) + 22.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 9.5, CGRectGetMinY(frame) + 50.5) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 12.25, CGRectGetMinY(frame) + 30.5)];
    [bezier2Path addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 50.5, CGRectGetMinY(frame) + 15.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 32.75, CGRectGetMinY(frame) + 14.5) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 50.5, CGRectGetMinY(frame) + 15.5)];
    [color4 setStroke];
    bezier2Path.lineWidth = 1;
    [bezier2Path stroke];

     SKShapeNode *sBezier2Path = [SKShapeNode shapeNodeWithPath: bezier2Path.CGPath];
     [self addChild: sBezier2Path];


    //// Bezier 3 Drawing
    UIBezierPath* bezier3Path = [UIBezierPath bezierPath];
    [bezier3Path moveToPoint: CGPointMake(CGRectGetMinX(frame) + 50.5, CGRectGetMinY(frame) + 15.5)];
    [bezier3Path addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 79.5, CGRectGetMinY(frame) + 24.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 50.5, CGRectGetMinY(frame) + 15.5) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 69.25, CGRectGetMinY(frame) + 16)];
    [bezier3Path addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 91.5, CGRectGetMinY(frame) + 50.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 89.75, CGRectGetMinY(frame) + 33) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 91.5, CGRectGetMinY(frame) + 50.5)];
    [color3 setStroke];
    bezier3Path.lineWidth = 1;
    [bezier3Path stroke];

    SKShapeNode *sBezier3Path = [SKShapeNode shapeNodeWithPath: bezier3Path.CGPath];
     [self addChild: sBezier3Path];
}

Swift：

func drawRect(frame: CGRect) {
    //// Color Declarations
    var color2: UIColor = UIColor(red: 0.062, green: 0.416, blue: 0.888, alpha: 1)
    var color3: UIColor = UIColor(red: 0.768, green: 0.09, blue: 0.09, alpha: 1)
    var color4: UIColor = UIColor(red: 0.109, green: 0.853, blue: 0.145, alpha: 1)
    //// Bezier Drawing
    let bezierPath = UIBezierPath()
    var strokeColor: UIColor = UIColor.redColor()
    strokeColor.setStroke()
    bezierPath.lineWidth = 2
    bezierPath.stroke()


    let sBezierPath = SKShapeNode()
    sBezierPath.path=bezierPath.CGPath
    self.addChild(sBezierPath)

    //// Bezier 4 Drawing
    let bezier4Path = UIBezierPath()
    bezier4Path.moveToPoint(CGPointMake(CGRectGetMinX(frame) + 9.5, CGRectGetMinY(frame) + 50.5))
    bezier4Path.addCurveToPoint(CGPointMake(CGRectGetMinX(frame) + 17.5, CGRectGetMinY(frame) + 77.5), controlPoint1: CGPointMake(CGRectGetMinX(frame) + 9.5, CGRectGetMinY(frame) + 50.5), controlPoint2: CGPointMake(CGRectGetMinX(frame) + 7.75, CGRectGetMinY(frame) + 68.5))
    bezier4Path.addCurveToPoint(CGPointMake(CGRectGetMinX(frame) + 48.5, CGRectGetMinY(frame) + 88.5), controlPoint1: CGPointMake(CGRectGetMinX(frame) + 27.25, CGRectGetMinY(frame) + 86.5), controlPoint2: CGPointMake(CGRectGetMinX(frame) + 48.5, CGRectGetMinY(frame) + 88.5))
    var strokeColor4: UIColor = UIColor.blackColor()
    strokeColor4.setStroke()
    bezier4Path.lineWidth = 1
    bezier4Path.stroke()

    let sBezier4Path = SKShapeNode()
    sBezier4Path.path=bezier4Path.CGPath
    self.addChild(sBezier4Path)

    //// Bezier 5 Drawing
    let bezier5Path = UIBezierPath()
    bezier5Path.moveToPoint(CGPointMake(CGRectGetMinX(frame) + 48.5, CGRectGetMinY(frame) + 88.5))
    bezier5Path.addCurveToPoint(CGPointMake(CGRectGetMinX(frame) + 58.37, CGRectGetMinY(frame) + 89.05), controlPoint1: CGPointMake(CGRectGetMinX(frame) + 48.5, CGRectGetMinY(frame) + 88.5), controlPoint2: CGPointMake(CGRectGetMinX(frame) + 52.71, CGRectGetMinY(frame) + 89.12))
    bezier5Path.addCurveToPoint(CGPointMake(CGRectGetMinX(frame) + 81.5, CGRectGetMinY(frame) + 81.5), controlPoint1: CGPointMake(CGRectGetMinX(frame) + 65.65, CGRectGetMinY(frame) + 88.95), controlPoint2: CGPointMake(CGRectGetMinX(frame) + 75.31, CGRectGetMinY(frame) + 86.7))
    bezier5Path.addCurveToPoint(CGPointMake(CGRectGetMinX(frame) + 91.5, CGRectGetMinY(frame) + 50.5), controlPoint1: CGPointMake(CGRectGetMinX(frame) + 92.5, CGRectGetMinY(frame) + 72.25), controlPoint2: CGPointMake(CGRectGetMinX(frame) + 91.5, CGRectGetMinY(frame) + 50.5))
    color2.setStroke()
    bezier5Path.lineWidth = 1
    bezier5Path.stroke()

    let sBezier5Path = SKShapeNode()
    sBezier5Path.path=bezier5Path.CGPath
    self.addChild(sBezier5Path)

    //// Bezier 2 Drawing
    let bezier2Path = UIBezierPath()
    bezier2Path.moveToPoint(CGPointMake(CGRectGetMinX(frame) + 9.5, CGRectGetMinY(frame) + 50.5))
    bezier2Path.addCurveToPoint(CGPointMake(CGRectGetMinX(frame) + 22.5, CGRectGetMinY(frame) + 22.5), controlPoint1: CGPointMake(CGRectGetMinX(frame) + 9.5, CGRectGetMinY(frame) + 50.5), controlPoint2: CGPointMake(CGRectGetMinX(frame) + 12.25, CGRectGetMinY(frame) + 30.5))
    bezier2Path.addCurveToPoint(CGPointMake(CGRectGetMinX(frame) + 50.5, CGRectGetMinY(frame) + 15.5), controlPoint1: CGPointMake(CGRectGetMinX(frame) + 32.75, CGRectGetMinY(frame) + 14.5), controlPoint2: CGPointMake(CGRectGetMinX(frame) + 50.5, CGRectGetMinY(frame) + 15.5))
    color4.setStroke()
    bezier2Path.lineWidth = 1
    bezier2Path.stroke()

    let sBezier2Path = SKShapeNode()
    sBezier2Path.path=bezier2Path.CGPath
    self.addChild(sBezier2Path)


    //// Bezier 3 Drawing
    let bezier3Path = UIBezierPath()
    bezier3Path.moveToPoint(CGPointMake(CGRectGetMinX(frame) + 50.5, CGRectGetMinY(frame) + 15.5))
    bezier3Path.addCurveToPoint(CGPointMake(CGRectGetMinX(frame) + 79.5, CGRectGetMinY(frame) + 24.5), controlPoint1: CGPointMake(CGRectGetMinX(frame) + 50.5, CGRectGetMinY(frame) + 15.5), controlPoint2: CGPointMake(CGRectGetMinX(frame) + 69.25, CGRectGetMinY(frame) + 16))
    bezier3Path.addCurveToPoint(CGPointMake(CGRectGetMinX(frame) + 91.5, CGRectGetMinY(frame) + 50.5), controlPoint1: CGPointMake(CGRectGetMinX(frame) + 89.75, CGRectGetMinY(frame) + 33), controlPoint2: CGPointMake(CGRectGetMinX(frame) + 91.5, CGRectGetMinY(frame) + 50.5))
    color3.setStroke()
    bezier3Path.lineWidth = 1
    bezier3Path.stroke()

    let sBezier3Path = SKShapeNode()
    sBezier3Path.path=bezier3Path.CGPath
    self.addChild(sBezier3Path)
}

- Teja Nandamuri

---

谢谢您的回复，我需要将其编写成代码的原因是因为我想定义颜色并检查玩家对象是否接触到正确的颜色。我尝试将您的代码复制粘贴到GameScene.swift中，但出现了多个错误。非常抱歉，我还是个新手。 - Svante

bezierPath() 不可用：请使用对象构造 'UIBezierPath()' Method 'redColor' 被使用作为属性；请添加()调用它。 - Svante

我错了...只需将变量行 var bezierpath 替换为行 let bezierPath = UIBezierPath()。 - Teja Nandamuri

你可以简单地使用 addChild(your bezierpath)。 - Teja Nandamuri

你在哪里添加了那行代码？ - Teja Nandamuri