2014-04-06 12 views
6

Chcę utworzyć prosty węzeł z facebookowym zdjęciem profilowym użytkownika, w którym obraz ma zaokrąglone rogi (lub pełne koło). Tworzę węzeł następująco:Jak utworzyć SKTexture z zaokrąglonymi rogami bez użycia maski

SKNode *friend = [[SKNode alloc] init]; 

SKTexture *texture = [SKTexture textureWithImage:user[@"fbProfilePicture"]];     
SKSpriteNode *profilePic = [SKSpriteNode spriteNodeWithTexture:texture]; 

[friend addChild:profilePic]; 

nie mogłem znaleźć żadnej odpowiedniej dokumentacji, aby utworzyć obraz z zaokrąglonymi narożnikami, inny niż przy użyciu SKCropNode (co wydaje się być złe obejście)

+0

Dlaczego nie utworzyć węzła dwuwarstwowego: awatar użytkownika + obraz png? – AndrewShmig

+0

Od momentu pobrania obrazu z Facebooka, muszę go przyciąć, gdy go otrzymam. Czy masz sugestię, jak to zrobić? – Yuvals

Odpowiedz

5

Spróbuj tego:

// your profile picture 
UIImage *fbProfilePicture = [UIImage imageNamed:@"fbProfilePicture"]; 

// create the image with rounded corners 
UIGraphicsBeginImageContextWithOptions(fbProfilePicture.size, NO, 0); 
CGRect rect = CGRectMake(0, 0, fbProfilePicture.size.width, fbProfilePicture.size.height); 
[[UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:20.0] addClip]; 
[fbProfilePicture drawInRect:rect]; 
UIImage *roundedImage = UIGraphicsGetImageFromCurrentImageContext(); 
UIGraphicsEndImageContext(); 

// use the roundedImage as texture for your sprite  
SKTexture *texture = [SKTexture textureWithImage:roundedImage]; 
SKSpriteNode *profilePic = [SKSpriteNode spriteNodeWithTexture:texture size:CGSizeMake(fbProfilePicture.size.width, fbProfilePicture.size.height)]; 

[self addChild:profilePic]; 

zaokrąglony narożnik część pochodzi z this answer.

+0

Bardzo dobrze, to robi dokładnie to, czego potrzebowałem! – Yuvals

6

Tak to wygląda w Swift, tłumacząc powyższą odpowiedź, odpowiedź Sebastiana. Metoda otrzymuje nazwę obrazu i zwraca węzeł z zaokrąglonymi narożnikami.

class func roundSquareImage(imageName: String) -> SKSpriteNode { 
      let originalPicture = UIImage(named: imageName) 
      // create the image with rounded corners 
      UIGraphicsBeginImageContextWithOptions(originalPicture!.size, false, 0) 
      let rect = CGRectMake(0, 0, originalPicture!.size.width, originalPicture!.size.height) 
      let rectPath : UIBezierPath = UIBezierPath(roundedRect: rect, cornerRadius: 30.0) 
      rectPath.addClip() 
      originalPicture!.drawInRect(rect) 
      let scaledImage = UIGraphicsGetImageFromCurrentImageContext() 
      UIGraphicsEndImageContext(); 

      let texture = SKTexture(image: scaledImage) 
      let roundedImage = SKSpriteNode(texture: texture, size: CGSizeMake(originalPicture!.size.width, originalPicture!.size.height)) 
      roundedImage.name = imageName 
      return roundedImage 
     } 
+0

Jakiekolwiek problemy z wydajnością związane z tym podejściem? Dzięki za tłumaczenie! – Crashalot

1

Do 2017 ...

class YourSprite: SKSpriteNode { 

    func yourSetupFunction() { 

      texture = SKTexture(image: UIImage(named: "cat")!.circleMasked!) 

To takie proste ...

enter image description here

Kod circleMasked:

(Wszystkie projekty, które zajmują się obrazy będą i tak trzeba.)

extension UIImage { 

    var isPortrait: Bool { return size.height > size.width } 
    var isLandscape: Bool { return size.width > size.height } 
    var breadth:  CGFloat { return min(size.width, size.height) } 
    var breadthSize: CGSize { return CGSize(width: breadth, height: breadth) } 
    var breadthRect: CGRect { return CGRect(origin: .zero, size: breadthSize) } 

    var circleMasked: UIImage? { 

     UIGraphicsBeginImageContextWithOptions(breadthSize, false, scale) 
     defer { UIGraphicsEndImageContext() } 

     guard let cgImage = cgImage?.cropping(to: CGRect(origin: 
      CGPoint(
       x: isLandscape ? floor((size.width - size.height)/2) : 0, 
       y: isPortrait ? floor((size.height - size.width)/2) : 0), 
      size: breadthSize)) 
     else { return nil } 

     UIBezierPath(ovalIn: breadthRect).addClip() 
     UIImage(cgImage: cgImage, scale: 1, orientation: imageOrientation) 
      .draw(in: breadthRect) 
     return UIGraphicsGetImageFromCurrentImageContext() 
    } 

// classic 'circleMasked' stackoverflow fragment 
// courtesy Leo Dabius /a/29047372/294884 
} 
Powiązane problemy