NSXのOSXでCore Graphicsを使用したスピードメーターを描画する

Question

OSXでCore Graphicsを使用してスピードゲージの要素を描画しようとしています。私はほとんどそれを持っていますが、ゲージの内側のセンターティックに少しの助けが必要です。ここで私は何をしようとしているのイメージは次のとおりです。ここで

は、私がこれまで持っているもののイメージは次のとおりです。

私は描画する方法を知っていますサークルリングと、このようなゲージの中心の周りに基づいたセグメントを描画する方法：

- (void)drawOuterGaugeRingsInRect:(CGContextRef)contextRef rect:(NSRect)rect { 


    CGContextSetLineWidth(contextRef,self.gaugeRingWidth); 

    CGContextSetStrokeColorWithColor(contextRef, [MyColors SpeedGaugeOuterRingGray].CGColor); 
    CGFloat startRadians = 0; 
    CGFloat endRadians = M_PI*2; 
    CGFloat radius = self.bounds.size.width/2 - 5; 

    CGContextAddArc(contextRef, CGRectGetMidX(rect),CGRectGetMidY(rect),radius,startRadians,endRadians,YES); 
    //Render the outer gauge 
    CGContextStrokePath(contextRef); 

    //Draw the inner gauge ring. 
    radius -= self.gaugeRingWidth; 
    CGContextSetStrokeColorWithColor(contextRef, [MyColors SpeedGaugeInnerRingGray].CGColor); 
    CGContextAddArc(contextRef, CGRectGetMidX(rect),CGRectGetMidY(rect),radius,startRadians,endRadians,YES); 

    //Render the inner gauge 
    CGContextStrokePath(contextRef); 

    radius -= self.gaugeRingWidth; 

    //Draw and fill the gauge background 

    CGContextSetFillColorWithColor(contextRef, [MyColors SpeedGaugeCenterFillBlack ].CGColor); 
    CGContextSetStrokeColorWithColor(contextRef, [MyColors SpeedGaugeCenterFillBlack].CGColor); 
    CGContextAddArc(contextRef, CGRectGetMidX(rect),CGRectGetMidY(rect),radius,startRadians,endRadians,YES); 

    //Render and fill the gauge background 
    CGContextDrawPath(contextRef, kCGPathFillStroke); 


    /*BLUE CIRCULAR DIAL */ 
    //Prepare to draw the blue circular dial. 
    radius -= self.gaugeRingWidth/2; 

    //Adjust gauge ring width 
    CGContextSetLineWidth(contextRef,self.gaugeRingWidth/2); 

    CGContextSetStrokeColorWithColor(contextRef, [MyColors SpeedGaugeBlue].CGColor); 

    CGFloat startingRadians = [MyMathHelper degressToRadians:135]; 
    CGFloat endingRadians = [MyMathHelper degressToRadians:45]; 


    CGContextAddArc(contextRef, CGRectGetMidX(rect),CGRectGetMidY(rect),radius,startingRadians,endingRadians,NO); 

    //Render the blue gauge line 
    CGContextStrokePath(contextRef); 
} 

上記で呼び出されたコードインナーのオフ、私はここで何が起こっているかを理解し

- (void)drawInnerDividerLines:(CGContextRef)context rect:(NSRect)rect { 

    CGFloat centerX = CGRectGetMidX(rect); 
    CGFloat centerY = CGRectGetMidY(rect); 


    CGContextSetLineWidth  (context, 3.0); 
    CGContextSetRGBStrokeColor (context, 37.0/255.0, 204.0/255.0, 227.0/255.0, 0.5); 



    CGFloat destinationX = centerX + (centerY * (cos((135)*(M_PI/180)))); 
    CGFloat destinationY = centerY + (centerX * (sin((135)*(M_PI/180)))); 

    NSPoint destinationPoint = NSMakePoint(destinationX, destinationY); 


    CGContextMoveToPoint(context, centerX, centerY); 

    CGContextAddLineToPoint(context, destinationPoint.x, destinationPoint.y); 

    CGContextStrokePath(context); 

} 

が、私は少し線を描画されて解決しようとしている問題：私のNSView

キー部で方法はこちらのコードです青色の線で、ビューの中心点に向かって延びていますが、中心まで完全に描かれていません。私はこれを達成するために数学と描画ロジックを修正する方法について少し不安です。ここでは、Core Graphics Drawingの角度を基にした単位円です。

私が解決しようとしている主な問題は、次のとおりです。

各ゲージの目盛りのための凝視点として、ライトブルー、内側のラインのオフ適切な出発点を定義する方法

1. 。今、ゲージの中央から端までフルラインを描いています。

2. ティックゲージの長さを青線の原点の中心に向けるように制御する方法を教えてください。

この問題を解決するための正しい方法で私を指摘するヒントやアドバイスはありがたいです。

Answer 1

ベクターの使用をお勧めします。

dirX = cos(angle); 
dirY = sin(angle); 
startPt.x = center.x + innerRadius * dirX; 
startPt.y = center.y + innerRadius * dirY; 
endPt.x = center.x + outerRadius * dirX; 
endPt.y = center.y + outerRadius * dirY; 

あなたはその後、startPtとendPtの間に線を描くことができます：あなたは計算することにより、角度与えられた円上の任意の点までのラインを見つけることができます。

Answer 2

この問題を解決するための正しい方法で私を指摘するヒントや助言があれば幸いです。

あなたが直角三角形を形成することができ、中心付近一定の角度であなたの円の円周上の点を考えると、（半径は斜辺であり、そして他の2辺は、x & Y軸に平行です点が0度、90度、180度または270度にある縮退の場合をしばらく無視する）。与えられた罪& cos式（学校からSOHCAHTOAを覚えている）といくつかの基本的な数学を使って、点の座標を計算し、その中心点から点までの半径を描くことができます。

「ダニ」マークの終点は、異なる半径の円にだけあるので、同じ数学で終点が得られ、ティックを描くことができます。これらのサークルの半径、つまり、最初の半径に沿った距離は、ティックの終点を決める必要があります。

HTH

Answer 3

三角法を避けるもう1つの方法は、変換行列を回転させ、垂直または水平線を描くことです。

// A vertical "line" of width "width" along the y axis at x==0. 
NSRect tick = NSMakeRect(-width/2.0, innerRadius, width, outerRadius - innerRadius); 
NSAffineTransform* xform = [NSAffineTransform transform]; 
// Move the x and y axes to the center of your speedometer so rotation happens around it 
[xform translateXBy:center.x yBy:center.y]; 
// Rotate the coordinate system so that straight up is actually at your speedometer's 0 
[xform rotateByDegrees:135]; 
[xform concat]; 
// Create a new transform to rotate back around for each tick. 
xform = [NSAffineTransform transform]; 
[xform rotateByDegrees:-270.0/numTicks]; 
for (int i = 0; i < numTicks; i++) 
{ 
    NSRectFill(tick); 
    [xform concat]; 
} 

あなたはおそらくあなたが完了したら、その変換行列が復元され[NSGraphicsContext saveGraphicsState]と[NSGraphicsContext restoreGraphicsState]でこれをラップします。

2種類の目盛り（メジャーとマイナー）が必要な場合は、2つの異なる矩形を持ち、i % 10 == 0などに基づいて1つを選択します。たぶん色を切り替えることもあります。その他