2015-12-09 2 views
0

Except the black there are different colors around the border.Draw пустой круг с несколькими цветами на приграничном Swift SpriteKit

Я недавно начал играть с Swift с SpriteKit.

Как говорится в названии, я пытаюсь нарисовать пустой круг с несколькими цветами вокруг границы круга с Swift.

У меня нет никакого кода для поставки, и я ужасно сожалею об этом счете.

Подсказки высоко оценены.

Thanks In Advance, Svante.

+0

может у предоставить образец изображения? несколько цветов означает? с градиентом? –

+0

Что-то вроде этого, кроме черных есть разные цвета: http://i.imgur.com/rDVBiQv.png – Svante

+0

это всего лишь 4 цвета? Легче будет делать это в фотошопе и использовать его в UIView. Вы хотите создать с помощью кода? –

ответ

0

Простым способом было бы сделать это в фотошопе и использовать это изображение в представлении.

Чтобы нарисовать круг с несколькими цветами, вам нужно иметь несколько дорожек безье.

Я попытался нарисовать четырехцветный круг с траекторией безье. Я не мог получить идеальный круг.

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

Спасибо за ответ, причина, по которой мне это нужно в коде, потому что я хочу определить цвета и проверить, касается ли объект игрока подходящего цвета. Я попытался скомпоновать ваш код в GameScene.swift, но я получил несколько ошибок. Мне очень жаль моей новички. – Svante

+0

bezierPath() недоступно: используйте объект construction 'UIBezierPath()' В качестве свойства использовался метод 'redColor'; add(), чтобы вызвать его. – Svante

+0

вы можете опубликовать снимок экрана об ошибке? –

Смежные вопросы