1. ホーム
  2. iphone

[解決済み] CALayersを使ったUIViewの丸め方 - 角の一部だけ - How?

2022-08-03 14:21:58

質問

私のアプリケーションでは、次のような名前の4つのボタンがあります。

  • 上 - 左
  • 下段 - 左
  • 上部 - 右
  • 底面 - 右

ボタンの上には、イメージビュー(またはUIView)があります。

さて、ユーザーが左上のボタンをタップしたとします。このとき、画像ビューはその角で丸くなるはずです。

UIViewに角丸を適用するのに少し苦労しています。

今現在、私は以下のコードを使用して、各ビューに角丸を適用しています。

    // imgVUserImg is a image view on IB.
    imgVUserImg.image=[UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:@"any Url Here"];
    CALayer *l = [imgVUserImg layer];
    [l setMasksToBounds:YES];
    [l setCornerRadius:5.0];  
    [l setBorderWidth:2.0];
    [l setBorderColor:[[UIColor darkGrayColor] CGColor]];

上記のコードは、供給されたビューの各コーナーに丸みを適用しています。代わりに、私はちょうど選択されたコーナーに丸みを適用したかった - トップ/トップ+左/ボトム+右など。

それは可能ですか?どのように?

どのように解決するのですか?

での回答を参考にしました。 iPhone で角丸の UILabel を作成するにはどうすればよいですか? のコードと iPhoneで透明度のある角丸の矩形表示はどのように行うのですか? を参考に、このようなコードにしました。

その後、間違った回答をしていた(UIImageではなく丸みを帯びたUILabelを与えていた)ことに気づいたので、このコードで変更しました。

http://discussions.apple.com/thread.jspa?threadID=1683876

ViewテンプレートでiPhoneプロジェクトを作成します。ビューコントローラーに、次のように追加します。

- (void)viewDidLoad
{
    CGRect rect = CGRectMake(10, 10, 200, 100);
    MyView *myView = [[MyView alloc] initWithFrame:rect];
    [self.view addSubview:myView];
    [super viewDidLoad];
}

MyView は、単に UIImageView のサブクラスです。

@interface MyView : UIImageView
{
}

グラフィックのコンテキストを使ったことがなかったのですが、なんとかこのコードを書き上げることができました。角の2つのコードが欠けています。コードを読めば、私がどのようにこれを実装したのかがわかります (いくつかの CGContextAddArc の呼び出しを削除し、コード内の半径の値をいくつか削除しています。すべてのコーナーのコードはそこにあるので、それを出発点として、必要ないコーナーを作る部分を削除してください。必要であれば、2つまたは3つの丸い角を持つ長方形も作ることができることに注意してください。

コードは完璧ではありませんが、少しは整頓できるはずです。

static void addRoundedRectToPath(CGContextRef context, CGRect rect, float radius, int roundedCornerPosition)
{

    // all corners rounded
    //  CGContextMoveToPoint(context, rect.origin.x, rect.origin.y + radius);
    //  CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y + rect.size.height - radius);
    //  CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + rect.size.height - radius, 
    //                  radius, M_PI / 4, M_PI / 2, 1);
    //  CGContextAddLineToPoint(context, rect.origin.x + rect.size.width - radius, 
    //                          rect.origin.y + rect.size.height);
    //  CGContextAddArc(context, rect.origin.x + rect.size.width - radius, 
    //                  rect.origin.y + rect.size.height - radius, radius, M_PI / 2, 0.0f, 1);
    //  CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y + radius);
    //  CGContextAddArc(context, rect.origin.x + rect.size.width - radius, rect.origin.y + radius, 
    //                  radius, 0.0f, -M_PI / 2, 1);
    //  CGContextAddLineToPoint(context, rect.origin.x + radius, rect.origin.y);
    //  CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + radius, radius, 
    //                  -M_PI / 2, M_PI, 1);

    // top left
    if (roundedCornerPosition == 1) {
        CGContextMoveToPoint(context, rect.origin.x, rect.origin.y + radius);
        CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y + rect.size.height - radius);
        CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + rect.size.height - radius, 
                        radius, M_PI / 4, M_PI / 2, 1);
        CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, 
                                rect.origin.y + rect.size.height);
        CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y);
        CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y);
    }   

    // bottom left
    if (roundedCornerPosition == 2) {
        CGContextMoveToPoint(context, rect.origin.x, rect.origin.y);
        CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y + rect.size.height);
        CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, 
                                rect.origin.y + rect.size.height);
        CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y);
        CGContextAddLineToPoint(context, rect.origin.x + radius, rect.origin.y);
        CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + radius, radius, 
                        -M_PI / 2, M_PI, 1);
    }

    // add the other corners here


    CGContextClosePath(context);
    CGContextRestoreGState(context);
}


-(UIImage *)setImage
{
    UIImage *img = [UIImage imageNamed:@"my_image.png"];
    int w = img.size.width;
    int h = img.size.height;

    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef context = CGBitmapContextCreate(NULL, w, h, 8, 4 * w, colorSpace, kCGImageAlphaPremultipliedFirst);

    CGContextBeginPath(context);
    CGRect rect = CGRectMake(0, 0, w, h);


    addRoundedRectToPath(context, rect, 50, 1);
    CGContextClosePath(context);
    CGContextClip(context);

    CGContextDrawImage(context, rect, img.CGImage);

    CGImageRef imageMasked = CGBitmapContextCreateImage(context);
    CGContextRelease(context);
    CGColorSpaceRelease(colorSpace);
    [img release];

    return [UIImage imageWithCGImage:imageMasked];
}

altテキスト http://nevan.net/skitch/skitched-20100224-092237.png

これが動作するためには、QuartzCoreフレームワークを入れる必要があることを忘れないでください。