I have an NSTableView in my application with data being drawn in for both the X and Y axes (ie, every row is matched with every column.) I've got the data populating the cells the way I'd like, but it looks terrible with the columns stretched out horizontally.
I would like to turn the NSTextFieldCell on its side, so that the text is written vertically instead of horizontally. I realize that I'm probably going to have to subclass the NSTextFieldCell, but I'm not sure which functions I'm going to need to override in order to accomplish what I want to do.
What functions in NSTextFieldCell draw the text itself? Is there any built-in way to draw text vertically instead of horizontally?
Well, it took a lot of digging to figure this one out, but I eventually came across the NSAffineTransform object, which apparently can be used to shift the entire coordinate system with respect to the application. Once I had figured that out, I subclassed NSTextViewCell and overrode the -drawInteriorWithFrame:inView: function to rotate the coordinate system around before drawing the text.
- (void)drawInteriorWithFrame:(NSRect)cellFrame inView:(NSView *)controlView {
// Save the current graphics state so we can return to it later
NSGraphicsContext *context = [NSGraphicsContext currentContext];
[context saveGraphicsState];
// Create an object that will allow us to shift the origin to the center
NSSize originShift = NSMakeSize(cellFrame.origin.x + cellFrame.size.width / 2.0,
cellFrame.origin.y + cellFrame.size.height / 2.0);
// Rotate the coordinate system
NSAffineTransform* transform = [NSAffineTransform transform];
[transform translateXBy: originShift.width yBy: originShift.height]; // Move origin to center of cell
[transform rotateByDegrees:270]; // Rotate 90 deg CCW
[transform translateXBy: -originShift.width yBy: -originShift.height]; // Move origin back
[transform concat]; // Set the changes to the current NSGraphicsContext
// Create a new frame that matches the cell's position & size in the new coordinate system
NSRect newFrame = NSMakeRect(cellFrame.origin.x-(cellFrame.size.height-cellFrame.size.width)/2,
cellFrame.origin.y+(cellFrame.size.height-cellFrame.size.width)/2,
cellFrame.size.height, cellFrame.size.width);
// Draw the text just like we normally would, but in the new coordinate system
[super drawInteriorWithFrame:newFrame inView:controlView];
// Restore the original coordinate system so that other cells can draw properly
[context restoreGraphicsState];
}
I now have an NSTextCell that draws its contents sideways! By changing the row height, I can give it enough room to look good.
Related
I'm writing an OSX app in Xcode using Objective-C. I have a window, with an NSView inside it, and that NSView is supposed to use data from an NSMutableArray containing NSNumbers to draw corresponding images on a grid such that images are drawn at 0,0; 32,0; 64,0 . . . 0,32; 32,32; etc. Accordingly the array's count is the grid's W*H, in this case 21*21 or 441.
You left click to "place" an image, which really just means updating the array based on where you clicked and then calling setNeedsDisplay:YES so it redraws itself to reflect the updated array. So far, I can get it to draw images based on the array properly.
When you right click, though, it is supposed to rotate the image in the particular grid slot by a certain amount. The only problem I am having here is figuring out how to actually draw the rotated images, in their proper locations. They should rotate about their center points, which would be the relative coordinates of 16,16 (all images are 32x32 pixels in size). As it is, my code is:
- (void)drawRect:(NSRect)dirtyRect
{
[super drawRect:dirtyRect];
//Black background
[[NSColor blackColor] setFill];
NSRectFill(dirtyRect);
// Drawing code here.
NSRect rectToDraw = CGRectMake(0,0,32,32);
NSInteger imageIndex = 0;
NSImage *imageToDraw = nil;
for (int i = 0; i < [objDataArray count]; i++) {
//Loop through data array and draw each image where it should be
if ([objDataArray objectAtIndex:i]==[NSNull null]) continue; //Don't draw anything in this slot
//Math to determine where to draw based on the current for loop index
//0 = 0,0; 1 = 32,0 . . . 20 = 640,0; 21 = 0,32; etc. (grid is 21x21)
rectToDraw.origin.x = (i % 21)*32;
rectToDraw.origin.y = floor(i/21)*32;
//Get the data at this index in the data array
imageIndex = [((NSNumber*)[objDataArray objectAtIndex:i]) integerValue];
//Use the retrieved number to get a corresponding image
imageToDraw = (NSImage*)[objImagesArray objectAtIndex:imageIndex];
//Draw that image at the proper location
[imageToDraw drawInRect:rectToDraw];
}
}
So say that the amount of rotation in degrees is specified by the variable rotationAmount. How do I change the drawInRect line (the last line before the closing braces) so that the image draws at the proper location specified by rectToDraw, but rotated by rotationAmount degrees about its center?
Thanks.
You don't draw the image rotated, as such. You transform the coordinate space and then draw the image.
[NSGraphicsContext saveGraphicsState];
NSAffineTransform* xform = [NSAffineTransform transform];
// Translate the image's center to the view origin so rotation occurs around it.
[xform translateXBy:-NSMidX(rectToDraw) yBy:-NSMidY(rectToDraw)];
[xform rotateByDegrees:rotationAmount];
[xform concat];
[imageToDraw drawInRect:NSOffsetRect(rectToDraw, -NSMidX(rectToDraw), -NSMidY(rectToDraw))];
[NSGraphicsContext restoreGraphicsState];
There's some chance that I have the transform backward. I always forget which way it goes (if it's transforming the view or the content). If your image goes off into never-never land, change the signs of the translation.
This is a code snippet for creating a thumbnail sized image (from an original large image) and placing it appropriately on top of a tableviewcell. As i was studying the code i got stuck at the part where the thumbnail is being given a position by setting its abscissa and ordinate. In the method -(void)setThumbDataFromImage:(UIImage *)image they're setting the dimensions and coordinate for project thumbnail—
-(void)setThumbnailDataFromImage:(UIImage *)image{
CGSize origImageSize= [image size];
// the rectange of the thumbnail
CGRect newRect= CGRectMake(0, 0, 40, 40);
// figure out a scaling ratio to make sure we maintain the same aspect ratio
float ratio= MAX(newRect.size.width/origImageSize.width, newRect.size.height/origImageSize.height);
// Create a transparent bitmap context with a scaling factor equal to that of the screen
UIGraphicsBeginImageContextWithOptions(newRect.size, NO, 0.0);
// create a path that is a rounded rectangle
UIBezierPath *path= [UIBezierPath bezierPathWithRoundedRect:newRect cornerRadius:5.0];
// make all the subsequent drawing to clip to this rounded rectangle
[path addClip];
// center the image in the thumbnail rectangle
CGRect projectRect;
projectRect.size.width=ratio * origImageSize.width;
projectRect.size.height= ratio * origImageSize.height;
projectRect.origin.x= (newRect.size.width- projectRect.size.width)/2;
projectRect.origin.y= (newRect.size.height- projectRect.size.height)/2;
// draw the image on it
[image drawInRect:projectRect];
// get the image from the image context, keep it as our thumbnail
UIImage *smallImage= UIGraphicsGetImageFromCurrentImageContext();
[self setThumbnail:smallImage];
// get the PNG representation of the image and set it as our archivable data
NSData *data= UIImagePNGRepresentation(smallImage);
[self setThumbnailData:data];
// Cleanup image context resources, we're done
UIGraphicsEndImageContext();
}
I got the width and height computation wherein we multiply the origImageSize with scaling factor/ratio.
But then we use the following to give the thumbnail a position—
projectRect.origin.x= (newRect.size.width- projectRect.size.width)/2;
projectRect.origin.y= (newRect.size.height- projectRect.size.height)/2;
This i fail to understand. I cannot wrap my head around it. :?
Is this part of the centering process. I mean, are we using a mathematical relation here to position the thumbnail or is it some random calculation i.e could have been anything.. Am i missing some fundamental behind these two lines of code??
Those two lines are standard code for centering something, although they aren’t quite written in the most general way. You normally want to use:
projectRect.origin.x = newRect.origin.x + newRect.size.width / 2.0 - projectRect.size.width / 2.0;
projectRect.origin.y = newRect.origin.y + newRect.size.height / 2.0 - projectRect.size.height / 2.0;
In your case the author knows the origin is 0,0, so they omitted the first term in each line.
Since to center a rectangle in another rectangle you want the centers of the two axes to line up, you take, say, half the container’s width (the center of the outer rectangle) and subtract half the inner rectangle’s width (which takes you to the left side of the inner rectangle), and that gives you where the inner rectangle’s left side should be (e.g.: its x origin) when it is correctly centered.
- (void)drawRect:(CGRect)rect{
float sliceSize = rect.size.width / imagesShownAtOnce;
//Apply our clipping region and fill it with black
[clippingRegion addClip];
[clippingRegion fill];
//Draw the 3 images (+1 for inbetween), with our scroll amount.
CGPoint loc;
for (int i=0;i<imagesShownAtOnce+1;i++){
loc = CGPointMake(rect.origin.x+(i*sliceSize)-imageScroll, rect.origin.y);
[[buttonImages objectAtIndex:i] drawAtPoint:loc];
}
//Draw the text region background
[[UIColor blackColor] setFill];
[textRegion fillWithBlendMode:kCGBlendModeNormal alpha:0.4f];
//Draw the actual text.
CGRect textRectangle = CGRectMake(rect.origin.x+16,rect.origin.y+rect.size.height*4/5.6,rect.size.width/1.5,rect.size.height/3);
[[UIColor whiteColor] setFill];
[buttonText drawInRect:textRectangle withFont:[UIFont fontWithName:#"Avenir-HeavyOblique" size:22]];
}
clippingRegion and textRegion are UIBezierPaths to give me the rounded rectangles I want (First for a clipping region, 2nd as an overlay for my text)
The middle section is drawing 3 images and letting them scroll along, which im updating every 2 refreshes from a CADisplayLink, and that invalidates the draw region by calling [self setNeedsDisplay], and also increasing my imageScroll variable.
Now that that background information is done, here is my issue:
It runs, and even runs smoothly. But it is using up an absolutely high amount of CPU time (80%+)!! How do I push this off to the GPU on the phone instead? Someone told me about CALayers but I've never dealt with them before
Draw each component of your drawing once into something (a view or layer) and let it hold the cached the drawing. Then you just move or transform each component, and exactly as you say, it's all done by the GPU.
You could do this with individual views or with individual layers, but that doesn't really matter (a view is a layer, under the hood). The point is that there is no need to be constantly redrawing from scratch when all you really want is to move the same persistent pieces around.
Learning about CALayer would be a good idea, as it is in fact the basis of all drawing on iOS. What could be more important to know about than that?
Is there a simple way to add rounded corners to NSRect elements in Objective-C? Currently we're applying a PNG image that simulates corners to this:
NSRect newFrame = NSMakeRect(0, 0, size.width, size.height);
But, performance becomes an issue because there are many instances of this NSRect along with the image being rendered with Core Animation. Perhaps rendering a native NSRect with rounded edges would be better from a performance standpoint? Do said edges look smooth (anti-aliased) when rendered with Core Animation?
NSRect is a struct containing an NSPoint and an NSSize, so I think you mean anything that accepts NSRects (so subclasses of NSView). All NSView subclass layers respond appropriately to -cornerRadius (except something about NSScrollView).
self.view.layer.masksToBounds = YES;
self.view.layer.cornerRadius = 10.0;
I have a window with an subclass of NSView in it. Inside the view, I put an NSImage.
I want to be able to rotate the image by 90 degrees, keeping the (new) upper left corner of the image in the upper left corner of the view. Of course, I will have to rotate the image, and then translate it to put the origin back into place.
In Carbon, I found CGContextRotateCTM which does what I want . However, I can't find the right call in ObjC. setFrameCenterRotation doesn't seem to do anything, and in setFrameRotation, I can't seem to figure out where the origin is, so I can approprately translate.
It seems to move. When I resize the window it puts the image (or part of it, I seem to have a strange clipping issue as wel) and when I scroll, it jumps to a different (and not always the saem) location.
Does this make sense to anyone?
thanks
I rotate text on the screen for an app I work on and the Cocoa (I assume you mean Cocoa and not ObjC in your question) way of doing this is to use NSAffineTransform.
Here's a snippet that should get you started
double rotateDeg = 90;
NSAffineTransform *rotate = [[NSAffineTransform alloc] init];
NSGraphicsContext *context = [NSGraphicsContext currentContext];
[context saveGraphicsState];
[rotate rotateByDegrees:rotateDeg];
[rotate concat];
/* Your drawing code [NSImage drawAtPoint....]for the image goes here
Also, if you need to lock focus when drawing, do it here. */
[rotate release];
[context restoreGraphicsState];
The mathematics on the rotation can get a little tricky here because what the above does is to rotate the coordinate system that you are drawing into. My rotation of 90 degrees is a counter-clockwise rotation.