SORU
15 ŞUBAT 2010, PAZARTESİ


UİView kullanarak CALayers - sadece bazı köşeleri - Ne kadar yuvarlak?

Benim uygulamada dört düğmeleri aşağıdaki gibi adlandırılır.

  • Üst - sol
  • ALT - sol
  • - Sağ üst
  • Alt - sağ

Bu düğmelerden ya da UİView kullanabileceğimiz / bir resim görünümü vardır.

Şimdi, varsayalım kullanıcı musluklar - üst - sol düğme. Yukarıdaki görüntü / görünüm, belirli bir köşesinden yuvarlatılmış olmalıdır.

Bu UİView için yuvarlak köşeler uygulanmasında bazı zorluklar yaşıyorum.

Şu anda aşağıdaki Kod görünümünde her köşesine yuvarlak köşeleri uygulamak için kullanıyorum. İşte burada.

    // 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]];

Yukarıda kodu verilen görüş köşeleri her yuvarlaklığını uyguluyor. Bunun yerine ben - üst / üst / alt sağ sol vs gibi sadece seçili köşelerine yuvarlaklık başvuru yapmak istedi.

Mümkün mü ? O zaman evet İSE, Nasıl?

Bilgi paylaşımı için şimdiden teşekkür ederiz.

Sagar.

CEVAP
29 NİSAN 2011, Cuma


Başlangıç 3.2, UIBezierPaths işlevselliğini out-of-the-box yuvarlak bir dörtgen oluşturmak için kullanabileceğiniz tek köşe belirttiğiniz yuvarlanır) iOS. O zaman görüşün katman için bir maske olarak bu: ** 5, ve bir kullanım yolu olarak kullanabilirsiniz

// Create the path (with only the top-left corner rounded)
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:imageView.bounds 
                                               byRoundingCorners:UIRectCornerTopLeft
                                                     cornerRadii:CGSizeMake(10.0, 10.0)];

// Create the shape layer and set its path
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = imageView.bounds;
maskLayer.path = maskPath.CGPath;

// Set the newly created shape layer as the mask for the image view's layer
imageView.layer.mask = maskLayer;

Ve bu Çekirdek Grafikleri el ile tanımlama şekilleri düşünsen, Photoshop maskeleme görüntü oluşturma hayır. Tabakası bile geçersiz ihtiyacı yok. Yuvarlak köşe uygulayarak veya yeni bir köşeye değiştirme UIBezierPath yeni tanımlama ve CGPath maske olarak katmanın yolunu kullanmak kadar basit. bezierPathWithRoundedRect:byRoundingCorners:cornerRadii: yöntemi corners parametre bir bit Maskesi ve çoklu köşeler onları bir araya ORing tarafından toplanmıştı.


EDİT: Ekleme bir gölge

Eğer bu gölge eklemek için arıyorsanız, biraz daha fazla çalışmak gerekiyor.

"imageView.layer.mask = maskLayer" bir maske, normalde bunun dışında görünmez bir gölge uygular. Hile şeffaf bir görünümü kullanmak için, ve daha sonra iki alt katman (CALayers) manzara katmanı ekleyin: shadowLayer roundedLayer. Her iki UIBezierPath kullanmak gerekir. Görüntü roundedLayer içerik olarak eklenir.

// Create a transparent view
UIView *theView = [[UIView alloc] initWithFrame:theFrame];
[theView setBackgroundColor:[UIColor clearColor]];

// Create the path (with only the top-left corner rounded)
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:theView.bounds 
                                               byRoundingCorners:UIRectCornerTopLeft
                                                     cornerRadii:CGSizeMake(10.0f, 10.0f)];

// Create the shadow layer
CAShapeLayer *shadowLayer = [CAShapeLayer layer];
[shadowLayer setFrame:theView.bounds];
[shadowLayer setMasksToBounds:NO];
[shadowLayer setShadowPath:maskPath.CGPath];
// ...
// Set the shadowColor, shadowOffset, shadowOpacity & shadowRadius as required
// ...

// Create the rounded layer, and mask it using the rounded mask layer
CALayer *roundedLayer = [CALayer layer];
[roundedLayer setFrame:theView.bounds];
[roundedLayer setContents:(id)theImage.CGImage];

CAShapeLayer *maskLayer = [CAShapeLayer layer];
[maskLayer setFrame:theView.bounds];
[maskLayer setPath:maskPath.CGPath];

roundedLayer.mask = maskLayer;

// Add these two layers as sublayers to the view
[theView.layer addSublayer:shadowLayer];
[theView.layer addSublayer:roundedLayer];

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Jonathan D.

    Jonathan D.

    3 Kasım 2006
  • majesticdubstep

    majesticdubs

    3 Kasım 2011
  • Sergio Lafuente Rubio

    Sergio Lafue

    11 Aralık 2008