NSImage and retina display confusion - macos

I want to add crosses on a NSImage, here's my code:
-(NSSize)convertPixelSizeToPointSize:(NSSize)px
{
CGFloat displayScale = [[NSScreen mainScreen] backingScaleFactor];
NSSize res;
res.width = px.width / displayScale;
res.height = px.height / displayScale;
return res;
}
-(void)awakeFromNib
{
CGFloat scale = [[NSScreen mainScreen] backingScaleFactor];
NSLog(#"backingScaleFactor : %f",scale);
NSImage *img = [[[NSImage alloc]initWithContentsOfFile:#"/Users/support/Pictures/cat.JPG"] autorelease];
NSBitmapImageRep *imgRep = [NSBitmapImageRep imageRepWithData:[img TIFFRepresentation]];
NSSize imgPixelSize = NSMakeSize([imgRep pixelsWide],[imgRep pixelsHigh]);
NSSize imgPointSize = [self convertPixelSizeToPointSize:imgPixelSize];
[img setSize:imgPointSize];
NSLog(#"imgPixelSize.width: %f , imgPixelSize.height:%f",imgPixelSize.width,imgPixelSize.height);
NSLog(#"imgPointSize.width: %f , imgPointSize.height:%f",imgPointSize.width,imgPointSize.height);
[img lockFocus];
NSAffineTransform *trans = [[[NSAffineTransform alloc] init] autorelease];
[trans scaleBy:1.0 / scale];
[trans set];
NSBezierPath *path = [NSBezierPath bezierPath];
[[NSColor redColor] setStroke];
[path moveToPoint:NSMakePoint(0.0, 0.0)];
[path lineToPoint:NSMakePoint(imgPixelSize.width, imgPixelSize.height)];
[path moveToPoint:NSMakePoint(0.0, imgPixelSize.height)];
[path lineToPoint:NSMakePoint(imgPixelSize.width, 0.0)];
[path setLineWidth:1];
[path stroke];
[img unlockFocus];
[imageView setImage:img];
imgRep = [NSBitmapImageRep imageRepWithData:[img TIFFRepresentation]];
NSData *imageData = [imgRep representationUsingType:NSJPEGFileType properties:nil];
[imageData writeToFile:#"/Users/support/Pictures/11-5.JPG" atomically:NO];
}
on non-retina display the result is:
and console displayed:
2012-07-06 00:53:09.889 RetinaTest[8074:403] backingScaleFactor : 1.000000
2012-07-06 00:53:09.901 RetinaTest[8074:403] imgPixelSize.width: 515.000000 , imgPixelSize.height:600.000000
2012-07-06 00:53:09.902 RetinaTest[8074:403] imgPointSize.width: 515.000000 , imgPointSize.height:600.000000
but on retina display (I didn't use the real retina display but hidpi mode):
console:
2012-07-06 00:56:05.071 RetinaTest[8113:403] backingScaleFactor : 2.000000
2012-07-06 00:56:05.083 RetinaTest[8113:403] imgPixelSize.width: 515.000000 , imgPixelSize.height:600.000000
2012-07-06 00:56:05.084 RetinaTest[8113:403] imgPointSize.width: 257.500000 , imgPointSize.height:300.000000
If I omit these lines:
NSAffineTransform *trans = [[[NSAffineTransform alloc] init] autorelease];
[trans scaleBy:1.0 / scale];
[trans set];
However if I change [NSAffineTransform scaleBy] to 1.0 the result is right
NSAffineTransform *trans = [[[NSAffineTransform alloc] init] autorelease];
[trans scaleBy:1.0];
[trans set];
Console:
2012-07-06 01:01:03.420 RetinaTest[8126:403] backingScaleFactor : 2.000000
2012-07-06 01:01:03.431 RetinaTest[8126:403] imgPixelSize.width: 515.000000 , imgPixelSize.height:600.000000
2012-07-06 01:01:03.432 RetinaTest[8126:403] imgPointSize.width: 257.500000 , imgPointSize.height:300.000000
Could anyone give an explanation please ? is hidpi mode different from retina display ?

I think I've found the answer. If NSAffineTransform set to NSImage's context, it transforms the coordinate system to pixel dimension, which is 2 x point dimension. Even if it's empty like this:
NSAffineTransform *trans = [[[NSAffineTransform alloc] init] autorelease];
[trans set];
I don't know if it's a bug or it's the way it works though.

Resetting the transformation is no bug (referring to your own answer). Using hidpi makes the default transform be one that lets most high-level code work well as-is. Resetting to the identity transform undoes this to align the coordinate system 1:1 with pixels.
One should rarely need to do this though. Simplifying your code to take out the image reps and the transform change gives you get this:
NSImage *img = [[[NSImage alloc]initWithContentsOfFile:#"/Users/support/Pictures/cat.JPG"] autorelease];
NSSize size = img.size;
NSBezierPath *path = [NSBezierPath bezierPath];
[[NSColor redColor] setStroke];
[path moveToPoint:NSMakePoint(0.0, 0.0)];
[path lineToPoint:NSMakePoint(size.width, size.height)];
[path moveToPoint:NSMakePoint(0.0, size.height)];
[path lineToPoint:NSMakePoint(size.width, 0.0)];
[path setLineWidth:1];
[path stroke];
[img unlockFocus];
[imageView setImage:img];
...
This should work except the line would instead be 2 physical pixels wide (but of course similar width to the image on a regular screen). Try this simpler special case to fix that:
[path setLineWidth:(img.scale > 1) ? 0.5 : 1.0];

Related

iTunes -like status bar

EDITED:
I am trying to show an iTunes-style like information bar. This was subject was covered in detail earlier, for example at iTunes or Xcode style information box at top of window
I only slightly modified the code from the above referenced link, so make it compile under a recent XCode.
My code is below:
- (void)drawRect:(NSRect)dirtyRect
{
// Drawing code here.
static NSShadow *kDropShadow = nil;
static NSShadow *kInnerShadow = nil;
static NSGradient *kBackgroundGradient = nil;
static NSColor *kBorderColor = nil;
if (kDropShadow == nil) {
kDropShadow = [[NSShadow alloc] init];
[kDropShadow setShadowColor:[NSColor colorWithCalibratedWhite:.863 alpha:.75]];
[kDropShadow setShadowOffset:NSMakeSize(0.0, -1.0)];
[kDropShadow setShadowBlurRadius:1.0];
kInnerShadow = [[NSShadow alloc] init];
[kInnerShadow setShadowColor:[NSColor colorWithCalibratedWhite:0.0 alpha:0.52]];
[kInnerShadow setShadowOffset:NSMakeSize(0.0, -1.0)];
[kInnerShadow setShadowBlurRadius:4.0];
kBorderColor = [[NSColor colorWithCalibratedWhite:0.569 alpha:1.0] retain];
// iTunes style
// kBackgroundGradient = [[NSGradient alloc] initWithColorsAndLocations:[NSColor colorWithCalibratedRed:0.929 green:0.945 blue:0.882 alpha:1.0],0.0,[NSColor colorWithCalibratedRed:0.902 green:0.922 blue:0.835 alpha:1.0],0.5,[NSColor colorWithCalibratedRed:0.871 green:0.894 blue:0.78 alpha:1.0],0.5,[NSColor colorWithCalibratedRed:0.949 green:0.961 blue:0.878 alpha:1.0],1.0, nil];
// Xcode style
kBackgroundGradient = [[NSGradient alloc] initWithColorsAndLocations:[NSColor colorWithCalibratedRed:0.957 green:0.976 blue:1.0 alpha:1.0],0.0,[NSColor colorWithCalibratedRed:0.871 green:0.894 blue:0.918 alpha:1.0],0.5,[NSColor colorWithCalibratedRed:0.831 green:0.851 blue:0.867 alpha:1.0],0.5,[NSColor colorWithCalibratedRed:0.82 green:0.847 blue:0.89 alpha:1.0],1.0, nil];
}
NSRect bounds = [self bounds];
NSBezierPath *path = [NSBezierPath bezierPathWithRoundedRect:bounds xRadius:3.5 yRadius:3.5];
[NSGraphicsContext saveGraphicsState];
[kDropShadow set];
[path fill];
[NSGraphicsContext restoreGraphicsState];
[kBackgroundGradient drawInBezierPath:path angle:-90.0];
[kBorderColor setStroke];
[path stroke];
}
It is not working, however. I don't think drawRect() method ever gets called. What am I missing? Please advise.
Thank you
I had an extra line at the end:
[path fill];
Removing it does the trick.

Drawing on NSBitmapImageRep

I'm trying to create in-memory image, draw on it and save to disk.
Current code is:
NSBitmapImageRep *rep = [[NSBitmapImageRep alloc]
initWithBitmapDataPlanes:NULL
pixelsWide:256
pixelsHigh:256
bitsPerSample:8
samplesPerPixel:4
hasAlpha:YES
isPlanar:YES
colorSpaceName:NSDeviceRGBColorSpace
bitmapFormat:NSAlphaFirstBitmapFormat
bytesPerRow:0
bitsPerPixel:8
];
[NSGraphicsContext saveGraphicsState];
[NSGraphicsContext setCurrentContext:[NSGraphicsContext graphicsContextWithBitmapImageRep:rep]];
// Draw your content...
NSRect aRect=NSMakeRect(10.0,10.0,30.0,30.0);
NSBezierPath *thePath=[NSBezierPath bezierPathWithRect:aRect];
[[NSColor redColor] set];
[thePath fill];
[NSGraphicsContext restoreGraphicsState];
NSData *data = [rep representationUsingType: NSPNGFileType properties: nil];
[data writeToFile: #"test.png" atomically: NO];
when trying to draw in current context, I'm getting error
CGContextSetFillColorWithColor: invalid context 0x0
What is wrong here? Why context returned by NSBitmapImageRep is NULL?
What is the best way to create drawn image and save it?
UPDATE:
Finally came to following solution:
NSImage *image = [[NSImage alloc] initWithSize:NSMakeSize(256, 256)];
[image lockFocus];
NSRect aRect=NSMakeRect(10.0,10.0,30.0,30.0);
NSBezierPath *thePath=[NSBezierPath bezierPathWithRect:aRect];
[[NSColor redColor] set];
[thePath fill];
[image unlockFocus];
NSData *data = [image TIFFRepresentation];
[data writeToFile: #"test.png" atomically: NO];
Your workaround is valid for the task at hand, however, it's a more expensive operation than actually getting an NSBitmapImageRep to work! See http://cocoadev.com/wiki/NSBitmapImageRep for a bit of a discussion..
Notice that [NSGraphicsContext graphicsContextWithBitmapImageRep:] documentation says:
"This method accepts only single plane NSBitmapImageRep instances."
You are setting up your NSBitmapImageRep with isPlanar:YES, which therefore uses multiple planes... Set it to NO - you should be good to go!
In other words:
NSBitmapImageRep *rep = [[NSBitmapImageRep alloc]
initWithBitmapDataPlanes:NULL
pixelsWide:256
pixelsHigh:256
bitsPerSample:8
samplesPerPixel:4
hasAlpha:YES
isPlanar:NO
colorSpaceName:NSDeviceRGBColorSpace
bitmapFormat:NSAlphaFirstBitmapFormat
bytesPerRow:0
bitsPerPixel:0
];
// etc...

Draw an Inset NSShadow and Inset Stroke

I have an NSBezierPath and I want to draw in inset shadow (similar to Photoshop) inside the path.
Is there anyway to do this? Also, I know you can -stroke paths, but can you stroke inside a path (similar to Stroke Inside in Photoshop)?
Update 3
static NSImage * graydient = nil;
if (!graydient) {
graydient = [[NSImage alloc] initWithSize: NSMakeSize(22, 22)];
[graydient lockFocus];
NSGradient * gradient = [[NSGradient alloc] initWithColorsAndLocations: clr(#"#262729"), 0.0f, clr(#"#37383a"), 0.43f, clr(#"#37383a"), 1.0f, nil];
[gradient drawInRect: NSMakeRect(0, 4.179, 22, 13.578) angle: 90.0f];
[gradient release];
[graydient unlockFocus];
}
NSColor * gcolor = [NSColor colorWithPatternImage: graydient];
[gcolor set];
NSShadow * shadow = [NSShadow new];
[shadow setShadowColor: [NSColor colorWithDeviceWhite: 1.0f alpha: 1.0f]];
[shadow setShadowBlurRadius: 0.0f];
[shadow setShadowOffset: NSMakeSize(0, 1)];
[shadow set];
[path fill];
[NSGraphicsContext saveGraphicsState];
[[path pathFromIntersectionWithPath: [NSBezierPath bezierPathWithRect: NSInsetRect([path bounds], 0.6, 0)]] setClip];
[gcolor set];
[shadow setShadowOffset: NSMakeSize(0, 1)];
[shadow setShadowColor: [NSColor blackColor]];
[shadow set];
[outer stroke];
[NSGraphicsContext restoreGraphicsState];
[NSGraphicsContext saveGraphicsState];
[[NSGraphicsContext currentContext] setCompositingOperation: NSCompositeSourceOut];
[shadow set];
[[NSColor whiteColor] set];
[inner fill];
[shadow set];
[inner fill];
[NSGraphicsContext restoreGraphicsState];
This is my final result. It looks pretty good. I had to change the shadow to White # 1.0 Alpha to make it work. Even though the shadow alpha norm for menu bar items is 0.5, it doesn't look half bad.
Many thanks go out to Joshua Nozzi.
I think you can do this by setting clip on the bezier path to use it as a mask and stroking the shadow, then adding a normal stroke if desired.
Update based on updated code:
Here you go. I'm feeling procrastinate-y tonight. :-)
// Describe an inset rect (adjust for pixel border)
NSRect whiteRect = NSInsetRect([self bounds], 20, 20);
whiteRect.origin.x += 0.5;
whiteRect.origin.y += 0.5;
// Create and fill the shown path
NSBezierPath * path = [NSBezierPath bezierPathWithRect:whiteRect];
[[NSColor whiteColor] set];
[path fill];
// Save the graphics state for shadow
[NSGraphicsContext saveGraphicsState];
// Set the shown path as the clip
[path setClip];
// Create and stroke the shadow
NSShadow * shadow = [[[NSShadow alloc] init] autorelease];
[shadow setShadowColor:[NSColor redColor]];
[shadow setShadowBlurRadius:10.0];
[shadow set];
[path stroke];
// Restore the graphics state
[NSGraphicsContext restoreGraphicsState];
// Add a nice stroke for a border
[path setLineWidth:1.0];
[[NSColor grayColor] set];
[path stroke];

NSImage transparency

I'm trying to set a custom drag icon for use in an NSTableView. Everything seems to work but I've run into a problem due to my inexperience with Quartz.
- (NSImage *)dragImageForRowsWithIndexes:(NSIndexSet *)dragRows tableColumns:(NSArray *)tableColumns event:(NSEvent *)dragEvent offset:(NSPointPointer)dragImageOffset
{
NSImage *dragImage = [NSImage imageNamed:#"icon.png"];
NSString *count = [NSString stringWithFormat:#"%d", [dragRows count]];
[dragImage lockFocus];
[dragImage compositeToPoint:NSZeroPoint fromRect:NSZeroRect operation:NSCompositeSourceOver fraction:0.5];
[count drawAtPoint:NSZeroPoint withAttributes:nil];
[dragImage unlockFocus];
return dragImage;
}
Essentially what I'm looking to do is render my icon.png file with 50% opacity along with an NSString which shows the number of rows currently being dragged. The issue I'm seeing is that my NSString renders with a low opacity, but not my icon.
The issue is that you’re drawing your icon on top of itself. What you probably want is something like this:
- (NSImage *)dragImageForRowsWithIndexes:(NSIndexSet *)dragRows tableColumns:(NSArray *)tableColumns event:(NSEvent *)dragEvent offset:(NSPointPointer)dragImageOffset
{
NSImage *icon = [NSImage imageNamed:#"icon.png"];
NSString *count = [NSString stringWithFormat:#"%lu", [dragRows count]];
NSImage *dragImage = [[[NSImage alloc] initWithSize:[icon size]] autorelease];
[dragImage lockFocus];
[icon drawAtPoint:NSZeroPoint fromRect:NSZeroRect operation:NSCompositeSourceOver fraction:0.5];
[count drawAtPoint:NSZeroPoint withAttributes:nil];
[dragImage unlockFocus];
return dragImage;
}

Strange artifacts after CILanczosScaleTransform

I'm trying to do image scaling using Core Image, using Lanczos Scale Transform filter.
It is fine when I'm doing scaleup. But on scaledown and saving to JPEG I found a class of images which produces strange noise artifacts and behavior.
For inputScale multiples to 0.5: 0.5, 0.25, 0.125 etc it is always fine.
For others inputScale values,it's broken.
When I'm saving to TIFF,PNG,JPEG2000 or draw on screen - it's fine.
When I'm saving to JPG or BMP - it's broken.
I uploaded sample images:
(original, 4272x2848, 3.4Mb)
[http://www.zoomfoot.com/get/package/517e2423-7795-4239-a166-03d507ec51d8]
(scaled with noise, 1920x1280, 2.2Mb)
[http://www.zoomfoot.com/get/package/6eb64d33-3a30-4e8d-9953-67ce1e7d7ef9]
It also, pretty good reproducible on 'sunset' images.
I've tried couple more ways to scale images. Using CIAffineTransform and drawing using NSImage itself. Both provides results without any noise.
Here is the code I was using for scaling & saving:
================= Lanczos ==============
- (NSImage *) scaleLanczosImage:(NSString *)path
Width:(int) desiredWidth
Height:(int) desiredHeight
{
CIImage *image=[CIImage imageWithContentsOfURL:
[NSURL fileURLWithPath:path]];
CIFilter *scaleFilter = [CIFilter filterWithName:#"CILanczosScaleTransform"];
int originalHeight=[image extent].size.height;
int originalWidth=[image extent].size.width;
float yScale=(float)desiredHeight / (float)originalHeight;
float xScale=(float)desiredWidth / (float)originalWidth;
float scale=fminf(yScale, xScale);
[scaleFilter setValue:[NSNumber numberWithFloat:scale]
forKey:#"inputScale"];
[scaleFilter setValue:[NSNumber numberWithFloat:1.0]
forKey:#"inputAspectRatio"];
[scaleFilter setValue: image
forKey:#"inputImage"];
image = [scaleFilter valueForKey:#"outputImage"];
NSBitmapImageRep* rep = [[NSBitmapImageRep alloc] initWithCIImage:image];
NSMutableDictionary *options=[NSMutableDictionary dictionaryWithObject:[NSDecimalNumber numberWithFloat:1.0]
forKey:NSImageCompressionFactor];
[options setValue:[NSNumber numberWithBool:YES] forKey:NSImageProgressive];
NSData* jpegData = [rep representationUsingType:NSJPEGFileType
properties:options];
[jpegData writeToFile:#"/Users/dmitry/tmp/img_4389-800x600.jpg" atomically:YES];
}
================= NSImage ==============
- (void) scaleNSImage:(NSString *)path
Width:(int) desiredWidth
Height:(int) desiredHeight
{
NSImage *sourceImage = [[NSImage alloc] initWithContentsOfFile:path];
NSImage *resizedImage = [[NSImage alloc] initWithSize:
NSMakeSize(desiredWidth, desiredHeight)];
NSSize originalSize = [sourceImage size];
[resizedImage lockFocus];
[sourceImage drawInRect: NSMakeRect(0, 0, desiredWidth, desiredHeight)
fromRect: NSMakeRect(0, 0, originalSize.width, originalSize.height)
operation: NSCompositeSourceOver fraction: 1.0];
[resizedImage unlockFocus];
NSMutableDictionary *options=[NSMutableDictionary dictionaryWithObject:[NSDecimalNumber numberWithFloat:1.0]
forKey:NSImageCompressionFactor];
[options setValue:[NSNumber numberWithBool:YES] forKey:NSImageProgressive];
NSBitmapImageRep *rep = [[NSBitmapImageRep alloc]
initWithData:[resizedImage TIFFRepresentation]];
NSData* jpegData = [rep representationUsingType:NSJPEGFileType
properties:options];
[jpegData writeToFile:#"~/nsimg_4389-800x600.jpg" atomically:YES];
}
If anyone can explain or suggest something here, i'm really appreciate this.
Thanks.
There are some quirks with scaling with CIImage. Will this post by Dan Wood help?
My understanding is that due to its nature, the hardware Core Image renderer has some odd quirks when rendering for anything but on-screen display. So, you are recommended to use the software renderer for other situations.
http://developer.apple.com/mac/library/qa/qa2005/qa1416.html
That's definitely a CoreImage bug. File it at bugreport.apple.com

Resources