4

デフォルトのiPadカレンダーのイベントマーカーを複製したいのですが、これは次のようになります。

ここに画像の説明を入力してください 私はこれにコアグラフィックを使用して、丸みを帯びた長方形のパスをペイントしようとしています。これは私が思いついた結果です:

ここに画像の説明を入力してください

ご覧のとおり、iPadのバージョンは丸みを帯びた角ではるかに滑らかに見えます。私は次のように見えるより大きな線幅を使用しようとしました: ここに画像の説明を入力してください

私のコードは次のようになります(このWebサイトから入手):

UIColor* fillColor= [self.color colorByMultiplyingByRed:1 green:1 blue:1 alpha:0.2];

CGContextSetLineWidth(ctx, 1.0);
CGContextSetStrokeColorWithColor(ctx, self.color.CGColor);
CGContextSetFillColorWithColor(ctx, fillColor.CGColor);

CGRect rrect = self.bounds;

CGFloat radius = 30.0;
CGFloat width = CGRectGetWidth(rrect);
CGFloat height = CGRectGetHeight(rrect);

if (radius > width/2.0)
   radius = width/2.0;

if (radius > height/2.0)
   radius = height/2.0;    

CGFloat minx = CGRectGetMinX(rrect);
CGFloat midx = CGRectGetMidX(rrect);
CGFloat maxx = CGRectGetMaxX(rrect);
CGFloat miny = CGRectGetMinY(rrect);
CGFloat midy = CGRectGetMidY(rrect);
CGFloat maxy = CGRectGetMaxY(rrect);
CGContextMoveToPoint(ctx, minx, midy);
CGContextAddArcToPoint(ctx, minx, miny, midx, miny, radius);
CGContextAddArcToPoint(ctx, maxx, miny, maxx, midy, radius);

CGContextAddArcToPoint(ctx, maxx, maxy, midx, maxy, radius);
CGContextAddArcToPoint(ctx, minx, maxy, minx, midy, radius);
CGContextClosePath(ctx);
CGContextDrawPath(ctx, kCGPathFillStroke);

// draw circle on left side

CGRect target= CGRectMake(rect.origin.x + 4.0, 
                          rect.origin.y + 3.0, 
                          7.0, 7.0);

CGContextSetFillColorWithColor(ctx, self.color.CGColor);
CGContextSetAlpha(ctx, 0.4);
CGContextFillEllipseInRect(ctx, target);

CGContextSetAlpha(ctx, 0.9);
CGContextSetStrokeColorWithColor(ctx, self.color.CGColor);
CGContextStrokeEllipseInRect(ctx, target);

誰かが私が結果を元に近づけるのを手伝ってくれる?丸みを帯びた長方形をペイントするために別の手法を使用する必要がありますか、それとも滑らかに見えるように変更できるパラメータはありますか?すでに使ってみましたUIBezierPathが、基本的には同じように見えました。任意のヒント?

[編集]CGRectInsetベースのソリューションは次のようになります。

ここに画像の説明を入力してください

4

2 に答える 2

8

問題は、ストロークがパスの中央に適用され、ビューの外側に描画されるため、ストロークの半分がビューの境界にトリミング/マスクされることです。図面をすべての方向に1点挿入すると、探している結果が得られます。ストロークの幅を大きくする場合は、図面をさらに挿入する必要があります(ストロークの幅の半分だけ(つまり、4ポイント幅のストロークを2ポイント挿入する必要があります)。

これは変更することで簡単に修正できます

CGRect rrect = self.bounds;

の中へ

// Inset x and y by half the stroke width (1 point for 2 point stroke) 
CGRect rrect = CGRectInset(self.bounds, 1, 1);
于 2012-05-11T19:10:21.193 に答える
0

これは、ストロークがパスの中央に配置されているためです。つまり、ストロークの半分が四角形の内側にあり、残りの半分が外側にあります。

これを解決するには、ストローク幅を 2 ​​倍にして、ストロークする前にパスにクリップします。その結果、完全に長方形内に収まる内側のストロークが作成されます。

Quartz で現在のパスにクリッピングすると現在のパスがリセットされるため、パスを CGPath として作成して、追加、クリップ、再度追加、およびストロークできるようにする必要があります。

于 2012-05-11T19:12:53.347 に答える