34

ここではグラフィックプログラマーではないので、これをつまずこうとしています。私は 9 つの塗りつぶされた円を描画しようとしています。それぞれが異なる色で、それぞれに白い境界線があります。UIView のフレームは CGRectMake (0,0,60,60) です。添付画像を参照してください。

問題は、両側の境界線に「フラット スポット」ができることです。以下は私のコードです（UIViewサブクラスから）：

- (void)drawRect:(CGRect)rect
{
    CGRect borderRect = CGRectMake(0.0, 0.0, 60.0, 60.0);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0);
    CGContextSetRGBFillColor(context, colorRed, colorGreen, colorBlue, 1.0);
    CGContextSetLineWidth(context, 2.0);
    CGContextFillEllipseInRect (context, borderRect);
    CGContextStrokeEllipseInRect(context, borderRect);
    CGContextFillPath(context);
}

drawRect で CGRectMake(0,0,56,56) に変更すると、上と左側だけにフラット スポットができ、下と右側はきれいに見えます。

誰かがこれを修正する方法を提案できますか? 境界線がUIViewによって切り取られているようですが、これについてあまり知らないので、修正方法が本当にわかりません。

グラフィックスの専門家からの提案に感謝します。

ここに画像の説明を入力

4

5 に答える 5

38

@AaronGolden からの回答が気に入っています。追加したいだけです。

CGRect borderRect = CGRectInset(rect, 2, 2);

または、より良い：

CGFloat lineWidth = 2;
CGRect borderRect = CGRectInset(rect, lineWidth * 0.5, lineWidth * 0.5);
于 2013-06-11T07:09:08.503 に答える
17

これらの円は、それらを描画するビューの境界にクリップされています。ビューは、描画する円よりもわずかに大きくする必要があります。CGContextStrokeEllipseInRect呼び出しが半径 30 の円をトレースし、トレースされた曲線の両側に 1 つのピクセルをペイントすることを想像できます。遠端では、これらのピクセルの 1 つがビューの境界のすぐ外側にあることになります。

ビューを 62x62 のようにするか、円の半径を少し小さくして、60x60 ビューに太いストロークの余地を残してください。

于 2013-06-11T07:03:18.967 に答える
7

簡単にたくさんの円が描けるように書きました。

次のコードを .m ファイルに追加します。

- (void) circleFilledWithOutline:(UIView*)circleView fillColor:(UIColor*)fillColor outlineColor:(UIColor*)outlinecolor{
CAShapeLayer *circleLayer = [CAShapeLayer layer];
float width = circleView.frame.size.width;
float height = circleView.frame.size.height;
[circleLayer setBounds:CGRectMake(2.0f, 2.0f, width-2.0f, height-2.0f)];
[circleLayer setPosition:CGPointMake(width/2, height/2)];
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(2.0f, 2.0f, width-2.0f, height-2.0f)];
[circleLayer setPath:[path CGPath]];
[circleLayer setFillColor:fillColor.CGColor];
[circleLayer setStrokeColor:outlinecolor.CGColor];
[circleLayer setLineWidth:2.0f];
[[circleView layer] addSublayer:circleLayer];
}

次に、次のコードをビューに追加して、「yourView」を円を配置するビューに置き換えます。円をたくさん作成したい場合は、ページにいくつかの小さなビューを追加して、以下のコードを繰り返します。円は、作成するビューのサイズになります。

[self circleFilledWithOutline:self.yourView fillColor:[UIColor redColor] outlineColor:[UIColor purpleColor]];
于 2015-06-27T00:07:17.757 に答える
6

塗りつぶし円を描く簡単な方法があります 

CGContextFillEllipseInRect(context, CGRectMake(x,y,width,height))
于 2015-11-25T03:35:12.627 に答える