Comment dessiner un NSImage arrondi

Question

J'essaie de créer un NSImage ou NSImageCell avec des coins arrondis à l'intérieur d'un NSTableView. Je ne peux rien faire pour travailler. Voici le meilleur que j'ai jusqu'à présent dans ma coutume NSCell:

- (void)drawInteriorWithFrame:(NSRect)frame inView:(NSView *)controlView { 
    if (thumbnailLink) { 
    NSURL *url = [NSURL URLWithString:thumbnailLink]; 
    if (url) { 
     NSRect imageFrame = [self _imageFrameForInteriorFrame:frame]; 
     NSImage *image = [[NSImage alloc] initWithContentsOfURL:url]; 
     [image setScalesWhenResized:YES]; 
     [image setSize:NSMakeSize(IMAGE_HEIGHT, IMAGE_WIDTH)]; 

     [NSGraphicsContext saveGraphicsState]; 
     imageFrame = NSInsetRect(imageFrame, 1, 1); 
     NSBezierPath *clipPath = [NSBezierPath bezierPathWithRoundedRect:imageFrame cornerRadius:5.0]; 
     [clipPath setWindingRule:NSEvenOddWindingRule]; 
     [clipPath addClip]; 
     [NSGraphicsContext restoreGraphicsState]; 
     [image drawInRect:imageFrame fromRect:NSMakeRect(0, 0, 0, 0) operation:NSCompositeSourceIn fraction:1.0]; 
     [image release]; 
    } 
} 
... 

Toutes les idées sur la façon de cela?

Answer 1

Vous devez conserver le jeu de clips lors du dessin de votre image et restaurer le contexte après. Je ne pense pas non plus que vous vouliez utiliser le compositing "in" mais plutôt "over" si vous voulez juste dessiner votre image normalement sans prendre en compte l'opacité de la destination. Essayez quelque chose comme:

[NSGraphicsContext saveGraphicsState]; 

NSBezierPath *path = [NSBezierPath bezierPathWithRoundedRect:imageFrame 
                xRadius:5 
                yRadius:5]; 
[path addClip]; 

[image drawInRect:imageFrame 
     fromRect:NSZeroRect 
     operation:NSCompositeSourceOver 
     fraction:1.0]; 

[NSGraphicsContext restoreGraphicsState]; 

Answer 2

Juste pour donner un peu plus d'informations sur ce que vous avez tort: ​​

Le but de sauver et restaurer la gstate est de pouvoir annuler vos modifications à la gstate. Dans votre cas, la restauration du gsave après écrêtage supprime le clip. C'est pourquoi la solution (comme expliqué par Rhult) est de dessiner ce que vous voulez clippé avant vous restaurez le gstate.

Answer 3

+ (NSImage*)roundCorners:(NSImage *)image 
{ 

NSImage *existingImage = image; 
NSSize existingSize = [existingImage size]; 
NSSize newSize = NSMakeSize(existingSize.width, existingSize.height); 
NSImage *composedImage = [[[NSImage alloc] initWithSize:newSize] autorelease]; 

[composedImage lockFocus]; 
[[NSGraphicsContext currentContext] setImageInterpolation:NSImageInterpolationHigh]; 

NSRect imageFrame = NSRectFromCGRect(CGRectMake(0, 0, 1024, 1024)); 
NSBezierPath *clipPath = [NSBezierPath bezierPathWithRoundedRect:imageFrame xRadius:200 yRadius:200]; 
[clipPath setWindingRule:NSEvenOddWindingRule]; 
[clipPath addClip]; 

[image drawAtPoint:NSZeroPoint fromRect:NSMakeRect(0, 0, newSize.width, newSize.height) operation:NSCompositeSourceOver fraction:1]; 

[composedImage unlockFocus]; 

return composedImage; 
} 

Answer 4

Version Swift:

func roundCorners(image: NSImage, width: CGFloat = 192, height: CGFloat = 192) -> NSImage { 
    let xRad = width/2 
    let yRad = height/2 
    let existing = image 
    let esize = existing.size 
    let newSize = NSMakeSize(esize.width, esize.height) 
    let composedImage = NSImage(size: newSize) 

    composedImage.lockFocus() 
    let ctx = NSGraphicsContext.currentContext() 
    ctx?.imageInterpolation = NSImageInterpolation.High 

    let imageFrame = NSRect(x: 0, y: 0, width: width, height: height) 
    let clipPath = NSBezierPath(roundedRect: imageFrame, xRadius: xRad, yRadius: yRad) 
    clipPath.windingRule = NSWindingRule.EvenOddWindingRule 
    clipPath.addClip() 

    let rect = NSRect(x: 0, y: 0, width: newSize.width, height: newSize.height) 
    image.drawAtPoint(NSZeroPoint, fromRect: rect, operation: NSCompositingOperation.CompositeSourceOver, fraction: 1) 
    composedImage.unlockFocus() 

    return composedImage 
} 

// then 
roundCorners(image) 
roundCorners(image, width: 512, height: 512)