在边框Swift SpriteKit上绘制多个颜色的空圆圈

时间:2015-12-09 17:06:26

标签: ios swift

Except the black there are different colors around the border.

我最近开始使用SpriteKit来玩Swift。

正如标题所说,我试图用Swift在圆形边框周围绘制一个带有多种颜色的空圆圈。

我没有提供任何代码,对此发票我非常抱歉。

提示非常受欢迎。

先谢谢, 斯万。

1 个答案:

答案 0 :(得分:0)

更简单的方法是在photoshop中做这件事并在视图中使用该图像。

要绘制具有多种颜色的圆,您需要有多个贝塞尔曲线路径。

我试图用bezier路径绘制一个四色圆圈。我无法获得完美的圆形切割。

enter image description here

- (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];
}

<强>夫特:

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