ios - 在边框 Swift SpriteKit 上绘制具有多种颜色的空圆

Question

Except the black there are different colors around the border.

我最近开始用 SpriteKit 玩弄 Swift。

正如标题所说，我正在尝试使用 Swift 在圆圈边界周围绘制一个具有多种颜色的空圆圈。

我没有任何代码可以提供，对此发票我深表歉意。

非常感谢提示。

提前致谢， 斯万特。

Answer 1

更简单的方法是在 photoshop 中执行此操作并在 View 中使用该图像。

要绘制多种颜色的圆，需要有多条贝塞尔曲线路径。

我试着用贝塞尔路径画了一个四色圆圈。我无法得到完美的圆圈切割。

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