원 주위에 선 그리기 및 애니메이션하기

Question

저는 Core Graphics를 처음 접했고 모든 방향으로 원과 선을 그리고 원에서 광선이 나오는 느낌을주는 애니메이션 효과를주고 싶습니다. The

원의 모든 방향에서 선 애니메이션 효과를 얻는 방법을 제안하십시오. 원을 그리는

내 지금까지 코드는 다음과 같습니다

- (void)drawRect:(CGRect)iRect 
{ 
    // Drawing code 
    CGContextRef aContext = UIGraphicsGetCurrentContext(); 
    [self drawMeWithContext:aContext withRect:iRect]; 
    [self drawBadgeGradientWithContext:aContext withRect:iRect]; 


} 



- (void)drawMeWithContext:(CGContextRef)iContext withRect:(CGRect)iRect { 
    CGContextSaveGState(iContext); 

    CGFloat aRadius = CGRectGetMaxY(iRect) * kBadgeCornerRadius; 
    CGFloat aBuffer = CGRectGetMaxY(iRect) * kScreenBuffer; 
    CGFloat aMaxX = CGRectGetMaxX(iRect) - aBuffer; 
    CGFloat aMaxY = CGRectGetMaxY(iRect) - aBuffer; 
    CGFloat aMinX = CGRectGetMinX(iRect) + aBuffer; 
    CGFloat aMinY = CGRectGetMinY(iRect) + aBuffer; 

    CGContextBeginPath(iContext); 
    CGContextSetFillColorWithColor(iContext, [_MyColor CGColor]); 
    CGContextAddArc(iContext, aMaxX - aRadius, aMinY + aRadius, aRadius, M_PI + M_PI/2, 0, 0); 
    CGContextAddArc(iContext, aMaxX - aRadius, aMaxY - aRadius, aRadius, 0, M_PI/2, 0); 
    CGContextAddArc(iContext, aMinX + aRadius, aMaxY - aRadius, aRadius, M_PI/2, M_PI, 0); 
    CGContextAddArc(iContext, aMinX + aRadius, aMinY + aRadius, aRadius, M_PI, M_PI + M_PI/2, 0); 
    CGContextClosePath(iContext); 
    CGContextFillPath(iContext); 
    CGContextRestoreGState(iContext); 
} 


- (void)drawBadgeGradientWithContext:(CGContextRef)iContext withRect:(CGRect)iRect { 
    CGContextSaveGState(iContext); 

    CGFloat aRadius = CGRectGetMaxY(iRect) * kBadgeCornerRadius; 
    CGFloat aBuffer = CGRectGetMaxY(iRect) * kScreenBuffer; 
    CGFloat aMaxX = CGRectGetMaxX(iRect) - aBuffer; 
    CGFloat aMaxY = CGRectGetMaxY(iRect) - aBuffer; 
    CGFloat aMinX = CGRectGetMinX(iRect) + aBuffer; 
    CGFloat aMinY = CGRectGetMinY(iRect) + aBuffer; 

    CGContextBeginPath(iContext); 
    CGContextAddArc(iContext, aMaxX - aRadius, aMinY + aRadius, aRadius, M_PI+(M_PI/2), 0, 0); 
    CGContextAddArc(iContext, aMaxX - aRadius, aMaxY - aRadius, aRadius, 0, M_PI/2, 0); 
    CGContextAddArc(iContext, aMinX + aRadius, aMaxY - aRadius, aRadius, M_PI/2, M_PI, 0); 
    CGContextAddArc(iContext, aMinX + aRadius, aMinY + aRadius, aRadius, M_PI, M_PI+M_PI/2, 0); 
    CGContextClip(iContext); 

    size_t aNumberOfLocations = 2; 
    CGFloat aLocations[2] = {0.0, 0.5}; 
// CGFloat aComponents[8] = {0.98, 0.96, 0.98, 1.0, 0.698, 0.016, 0.075, 1.0}; 

    CGColorSpaceRef aColorSpace; 
    CGGradientRef aGradient; 
    aColorSpace = CGColorSpaceCreateDeviceRGB(); 
    aGradient = CGGradientCreateWithColorComponents (aColorSpace, _MyColorComponent, aLocations, aNumberOfLocations); 
    CGColorGetComponents([[UIColor redColor] CGColor]); 
    CGColorGetComponents([[UIColor whiteColor] CGColor]); 
    CGPoint aStartPoint; 
    CGPoint anEndPoint; 
    aStartPoint.x = 0; 
    aStartPoint.y = 0; 
    anEndPoint.x = 0; 
    anEndPoint.y = aMaxY; 

    CGContextDrawLinearGradient (iContext, aGradient, aStartPoint, anEndPoint, 0); 
    CGColorSpaceRelease(aColorSpace); 
    CGGradientRelease(aGradient); 
    CGContextRestoreGState(iContext); 
} 

Answer 1

하는의 당신이 여섯 선을 그릴 싶어한다고 가정 해 봅시다. 단위 원의 원주는 2π입니다. 따라서 첫 번째 선은 π/3 라디안 (즉 2π을 6으로 나눈 값)의 회전을 가지며 두 번째 선은 2π/3 라디안의 회전을 갖습니다. 각 선에 해당 회전을 적용합니다.

이제 선을 원 밖으로 바꿔야합니다. 자, 각 라인을 원하는 원의 각도 (π/3, 2π/3 ... 2π)와 원의 반지름을 알 수 있습니다. 따라서 극좌표 (예 : (반지름, π/3))를 만들 수 있습니다. 이 극점을 직교 좌표 (예 : (1, 2))로 변환하십시오. 어떻게 할 수 있니? 방법은 다음과 같습니다.

x 좌표를 얻으려면 cos (π/3)을 찾은 다음 반경을 곱하십시오. y에 대해서도 똑같은 일을하고 대신 죄를 사용하십시오.

(2, π/3)은 극성 => (2cos (π/3), 2sin (π/3))은 직교 좌표이다.

이제 x와 y 좌표 쌍이 생겼으므로 각 행을 데카르트 점으로 변환하십시오. 이제 선을 애니메이트해야합니다. iOS의 회전 기능에 익숙하지 않습니다. 원의 중심에 대해 각 선을 회전시킬 수 있습니까? 그렇지 않으면, 각 라인이 다음에 가야 할 원상의 포인트를 다시 계산하고 라인 자체를 회전시켜야합니다.

이것은 상당한 양의 수학을 포함합니다. 추가 도움이 필요하면 알려주세요.