Как нарисовать звезды с помощью Quartz Core? - PullRequest
Новая
       15

Как нарисовать звезды с помощью Quartz Core?

9 голосов
/ 09 декабря 2011

Я пытаюсь адаптировать пример, предоставленный Apple, для того, чтобы программно нарисовать звезды в строке, код следующий: 

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, aSize);

    for (NSUInteger i=0; i<stars; i++) 
    {

       CGContextSetFillColorWithColor(context, aColor);
       CGContextSetStrokeColorWithColor(context, aColor);

       float w = item.size.width;
       double r = w / 2;
       double theta = 2 * M_PI * (2.0 / 5.0); // 144 degrees

       CGContextMoveToPoint(context, 0, r);

       for (NSUInteger k=1; k<5; k++) 
       {
          float x = r * sin(k * theta);
          float y = r * cos(k * theta);
          CGContextAddLineToPoint(context, x, y);
       }

       CGContextClosePath(context);
       CGContextFillPath(context);
    }

Приведенный выше код рисует идеальную звезду, но 1. отображается вверх ногами 2. черный и без рамки. Чего я хочу добиться, так это нарисовать много звезд на одной линии и с заданным стилем. Я понимаю, что на самом деле я рисую один и тот же путь 5 раз в одной и той же позиции и что мне нужно как-то перевернуть контекст по вертикали, но после нескольких испытаний я сдался! (Мне не хватает необходимых математических и геометрических навыков: P) ... не могли бы вы мне помочь?

UPDATE:

Хорошо, спасибо CocoaFu , это моя переработанная и работающая утилита рисования: 

- (void)drawStars:(NSUInteger)count inContext:(CGContextRef)context;
{
    // constants
    const float w = self.itemSize.width;
    const float r = w/2;
    const double theta = 2 * M_PI * (2.0 / 5.0);
    const float flip = -1.0f; // flip vertically (default star representation)

    // drawing center for the star
    float xCenter = r;

    for (NSUInteger i=0; i<count; i++) 
    {
        // get star style based on the index
        CGContextSetFillColorWithColor(context, [self fillColorForItemAtIndex:i]);
        CGContextSetStrokeColorWithColor(context, [self strokeColorForItemAtIndex:i]);

        // update position
        CGContextMoveToPoint(context, xCenter, r * flip + r);

        // draw the necessary star lines
        for (NSUInteger k=1; k<5; k++) 
        {
            float x = r * sin(k * theta);
            float y = r * cos(k * theta);
            CGContextAddLineToPoint(context, x + xCenter, y * flip + r);
        }

        // update horizontal center for the next star
        xCenter += w + self.itemMargin; 

        // draw current star
        CGContextClosePath(context);
        CGContextFillPath(context);
        CGContextStrokePath(context);
    }
}

Ответы [ 3 ]

29 голосов
/ 09 декабря 2011

Вот код, который будет рисовать 3 звезды по горизонтальной линии, это не красиво, но может помочь: 

-(void)drawRect:(CGRect)rect
{
    int aSize = 100.0;
    const CGFloat color[4] = { 0.0, 0.0, 1.0, 1.0 }; // Blue
    CGColorRef aColor = CGColorCreate(CGColorSpaceCreateDeviceRGB(), color);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(context, aSize);
    CGFloat xCenter = 100.0;
    CGFloat yCenter = 100.0;

    float  w = 100.0;
    double r = w / 2.0;
    float flip = -1.0;

    for (NSUInteger i=0; i<3; i++) 
    {
        CGContextSetFillColorWithColor(context, aColor);
        CGContextSetStrokeColorWithColor(context, aColor);

        double theta = 2.0 * M_PI * (2.0 / 5.0); // 144 degrees

        CGContextMoveToPoint(context, xCenter, r*flip+yCenter);

        for (NSUInteger k=1; k<5; k++) 
        {
            float x = r * sin(k * theta);
            float y = r * cos(k * theta);
            CGContextAddLineToPoint(context, x+xCenter, y*flip+yCenter);
        }
        xCenter += 150.0;
    }
    CGContextClosePath(context);
    CGContextFillPath(context);
}

enter image description here

7 голосов
/ 27 августа 2013

Вот алгоритм для реализации того, что подразумевает Буддаброт: 

- (void)drawStarInContext:(CGContextRef)context withNumberOfPoints:(NSInteger)points center:(CGPoint)center innerRadius:(CGFloat)innerRadius outerRadius:(CGFloat)outerRadius fillColor:(UIColor *)fill strokeColor:(UIColor *)stroke strokeWidth:(CGFloat)strokeWidth {
    CGFloat arcPerPoint = 2.0f * M_PI / points;
    CGFloat theta = M_PI / 2.0f;

    // Move to starting point (tip at 90 degrees on outside of star)
    CGPoint pt = CGPointMake(center.x - (outerRadius * cosf(theta)), center.y - (outerRadius * sinf(theta)));
    CGContextMoveToPoint(context, pt.x, pt.y);

    for (int i = 0; i < points; i = i + 1) {
        // Calculate next inner point (moving clockwise), accounting for crossing of 0 degrees
        theta = theta - (arcPerPoint / 2.0f);
        if (theta < 0.0f) {
            theta = theta + (2 * M_PI);
        }
        pt = CGPointMake(center.x - (innerRadius * cosf(theta)), center.y - (innerRadius * sinf(theta)));
        CGContextAddLineToPoint(context, pt.x, pt.y);

        // Calculate next outer point (moving clockwise), accounting for crossing of 0 degrees
        theta = theta - (arcPerPoint / 2.0f);
        if (theta < 0.0f) {
            theta = theta + (2 * M_PI);
        }
        pt = CGPointMake(center.x - (outerRadius * cosf(theta)), center.y - (outerRadius * sinf(theta)));
        CGContextAddLineToPoint(context, pt.x, pt.y);
    }
    CGContextClosePath(context);
    CGContextSetLineWidth(context, strokeWidth);
    [fill setFill];
    [stroke setStroke];
    CGContextDrawPath(context, kCGPathFillStroke);
}

У меня работает для большинства основных звезд. Испытано от 2 баллов (делает хороший бриллиант!) До 9 звезд.

Если вы хотите звезду с точкой вниз, измените вычитание на сложение.

Чтобы нарисовать кратные числа, создайте цикл и вызовите этот метод несколько раз, каждый раз передавая новый центр. Это должно красиво их выстроить!

4 голосов
/ 20 февраля 2015

Я предпочитаю использовать CAShaperLayer для реализации drawRect, так как он может быть анимирован.Вот функция, которая создаст путь в форме 5-точечной звезды: 

func createStarPath(size: CGSize) -> CGPath {
    let numberOfPoints: CGFloat = 5

    let starRatio: CGFloat = 0.5

    let steps: CGFloat = numberOfPoints * 2

    let outerRadius: CGFloat = min(size.height, size.width) / 2
    let innerRadius: CGFloat = outerRadius * starRatio

    let stepAngle = CGFloat(2) * CGFloat(M_PI) / CGFloat(steps)
    let center = CGPoint(x: size.width / 2, y: size.height / 2)

    let path = CGPathCreateMutable()

    for i in 0..<Int(steps) {
        let radius = i % 2 == 0 ? outerRadius : innerRadius

        let angle = CGFloat(i) * stepAngle - CGFloat(M_PI_2)

        let x = radius * cos(angle) + center.x
        let y = radius * sin(angle) + center.y

        if i == 0 {
            CGPathMoveToPoint(path, nil, x, y)
        }
        else {
            CGPathAddLineToPoint(path, nil, x, y)
        }
    }

    CGPathCloseSubpath(path)
    return path
}

Затем ее можно использовать с CAShapeLayer, например: 

let layer = CAShapeLayer()
layer.path = createStarPath(CGSize(width: 100, height: 100))
layer.lineWidth = 1
layer.strokeColor = UIColor.blackColor().CGColor
layer.fillColor = UIColor.yellowColor().CGColor
layer.fillRule = kCAFillRuleNonZero
...