StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>There are many different way to achieve this. I would start by using a NSBox object and give it the right shape. Next I would programmatically create an image that shows the different colors and mask it with another image to cut out all the edges. Then i would create a NSImageView inside the box and display the masked image there. I can add some code if you want.</p> <p>EDIT:</p> <p>Some code.</p> <p>I've tried it using a simple static picture that is made up of 2 colors and a transparent rest. I just add it to the outlet like so:</p> <pre><code>-(void) awakeFromNib{ NSImage* img = [self maskImage:[NSImage imageNamed:@"Static image from Bundle"] withMask:[NSImage imageNamed:@"Static image mask"]]; [imgView setImage:img]; </code></pre> <p>}</p> <p>And the maskImage:withMask: method looks like this:</p> <pre><code>- (NSImage*) maskImage:(NSImage *)image withMask:(NSImage *)maskImage { CGImageSourceRef sourceRef = CGImageSourceCreateWithData((__bridge CFDataRef)[maskImage TIFFRepresentation], NULL); CGImageRef maskRef = CGImageSourceCreateImageAtIndex(sourceRef, 0, NULL); sourceRef = CGImageSourceCreateWithData((__bridge CFDataRef)[image TIFFRepresentation], NULL); CGImageRef imageRef = CGImageSourceCreateImageAtIndex(sourceRef, 0, NULL); CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef), CGImageGetHeight(maskRef), CGImageGetBitsPerComponent(maskRef), CGImageGetBitsPerPixel(maskRef), CGImageGetBytesPerRow(maskRef), CGImageGetDataProvider(maskRef), NULL, false); CGImageRef masked = CGImageCreateWithMask(imageRef, mask); return [[NSImage alloc] initWithCGImage:masked size:NSZeroSize]; </code></pre> <p>}</p> <p>For the mask image I used a simple black and white photoshop picture of the size of the NSBox object and blacked out everything that should become transparent. The only problem with this method is the shadows of the NSBox are not rendered. To achieve this you need to create a gradient in your mask. This should be actually pretty straight forward.</p> <p>I have been using these pictures: <a href="http://postimage.org/gallery/ertbeca/" rel="nofollow">http://postimage.org/gallery/ertbeca/</a></p> <p>Source image: <a href="http://postimage.org/image/pdgs4abop/" rel="nofollow">http://postimage.org/image/pdgs4abop/</a> Mask image: <a href="http://postimage.org/image/54teikcdl/" rel="nofollow">http://postimage.org/image/54teikcdl/</a></p> <p>And it ended up looking like this: <a href="http://postimage.org/image/s8tvb5fop/" rel="nofollow">http://postimage.org/image/s8tvb5fop/</a></p> <p>Hope that helps.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload