1

中央から三角形が切り取られた半透明の黒い長方形を描画しようとしています。

これは、以下のコードで完全に機能します。しかし、三角形の角を丸くしたいのです。

ストロークに CGContextSetLineCap を設定したり、クオーツでパスを作成して CGContextAddArcToPoint を使用したりするなど、丸みを帯びた角を追加するためのさまざまな手法をいくつか試しましたが、うまくいきませんでした。

前述したように、以下のコードは三角形のカットアウトで機能します。三角形の角を丸くする方法を教えてください。

CGContextRef context = UIGraphicsGetCurrentContext();
CGPoint position = CGPointMake(rect.size.width/2, rect.size.height * .7);
CGSize size = CGSizeMake(rect.size.width*.8, rect.size.height*.5);

CGFloat firstPointX = (position.x - (size.width / 2));
CGFloat firstPointY = (position.y - (size.height));
CGPoint firstPoint = CGPointMake(firstPointX, firstPointY);

CGFloat secondPointX = position.x + (size.width / 2);
CGFloat secondPointY = position.y - (size.height);
CGPoint secondPoint = CGPointMake(secondPointX, secondPointY);


UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:position];
[path addLineToPoint:firstPoint];
[path moveToPoint:firstPoint];
[path addLineToPoint:secondPoint];
[path addLineToPoint:position];
[path closePath];

CGContextAddRect(context, rect);
CGContextAddPath(context, path.CGPath);
CGContextEOClip(context);

UIColor *translucentColor = [UIColor colorWithWhite:0 alpha:0.5];
CGContextSetFillColorWithColor(context, translucentColor.CGColor);

CGContextFillRect(context, rect);

UIGraphicsEndImageContext();

編集:これは私が達成しようとしていることの例です。

ここに画像の説明を入力

4

1 に答える 1

3

CGContextAddArc を使いたいと思います。必要に応じて、円の一部に線を引きます。UIView を満たす丸みを帯びたボックスを描画するコードを次に示します。三角形の場合、4 本ではなく 3 本の線が必要です。上に 2 本、下の中央に 1 本です。これは私が持っている roundBoxView クラスからのものです:

CGContextRef context = UIGraphicsGetCurrentContext();
CGRect boxRect = self.bounds;

float bRadius = self.cornerRadius;
float shrink = self.strokeThickness/2;

CGContextBeginPath(context);

// instead of this gray you could later add options for other colors
CGContextSetGrayFillColor(context, 0.0f, self.backgroundOpacity);
CGContextMoveToPoint(context, CGRectGetMinX(boxRect)+shrink + bRadius, CGRectGetMinY(boxRect)+shrink);

CGContextAddArc(context, CGRectGetMaxX(boxRect)-shrink - bRadius, CGRectGetMinY(boxRect)+shrink + bRadius, bRadius, 3 * (float)M_PI / 2, 0, 0);
CGContextAddArc(context, CGRectGetMaxX(boxRect)-shrink - bRadius, CGRectGetMaxY(boxRect)-shrink - bRadius, bRadius, 0, (float)M_PI / 2, 0);
CGContextAddArc(context, CGRectGetMinX(boxRect)+shrink + bRadius, CGRectGetMaxY(boxRect)-shrink - bRadius, bRadius, (float)M_PI / 2, (float)M_PI, 0);
CGContextAddArc(context, CGRectGetMinX(boxRect)+shrink + bRadius, CGRectGetMinY(boxRect)+shrink + bRadius, bRadius, (float)M_PI, 3 * (float)M_PI / 2, 0);

CGContextClosePath(context);
CGContextFillPath(context);

もちろん、boxRect が完全な境界である代わりに、それをメソッドに渡して、必要な境界を使用して描画することもできます。三角形にするには、2 本ではなく 3 本の線しかなく、始点と終点の角度を計算するために計算が必要になる場合があります。ボックスでは、これらの角度は常に 90 度 (ここでは厄介なラジアンが与えられています) ですが、三角形では、その場で角度を計算するか、三角形にプリセットの縦横比を設定して、プリセットの開始角度と終了角度を使用できるようにする必要があります。 . 3 つの等しい角度で描かれている例では、120 度または M_PI / 1.5 サイズのステップを実行します。

于 2013-03-16T06:16:31.073 に答える