CG drawing in UIView to use as UIImage? - objective-c

I am attempting to create a custom back button for UINavigationbar.
I know that I can use backButtonBackgroundImageForState:barMetrics: to set an image.
My problem is that I don't what to have to use an image file. I would rather draw the back button in code.
My question is can I subclass a UIView, override the drawrec: to draw a back button, then use that UIView as an image in backButtonBackgroundImageForState:barMetrics:
I'm thinking that it would go something like:
UIImage * backButtonImage = // somehow get image from my subclassed UIView;
backButtonImage = [backButtonImage stretchableImageWithLeftCapWidth: 15.0 topCapHeight: 30.0];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage: backButtonImage forState: UIControlStateNormal barMetrics: UIBarMetricsDefault];
Is this even the best way to be going about this? Or should I just suck it up and create an image in photoshop?

You can create a bitmap image context using UIGraphicsBeginImageContextWithOptions, without making a subclass of UIView and overriding drawRect:.
UIGraphicsBeginImageContextWithOptions(CGSizeMake(80, 30), NO, 0);
// drawing code here
// Use UIKit functions and objects
// or use CoreGraphics functions on UIGraphicsGetCurrentContext()
UIImage *image = UIGraphicsGetImageFromCurrentContext();
UIGraphicsEndImageContext();

Related

Manipulating UIImage with GestureRecognizers - NOT UIImageView

Using Gesture Recognizers such as Pan, Pinch, and Rotate, is it at all possible to manipulate a UIImage within a UIImageView?
Whenever I try to define the gesture recognizer for the UIImage, I get an error stating
No visible UIImage supports 'addGestureRecognizer:'
With this code:
UIRotationGestureRecognizer *rotateGesture = [[UIRotationGestureRecognizer alloc] initWithTarget:self action:#selector(rotateImage:)];
[imageStrip addGestureRecognizer:rotateGesture];
Is there anyway to transform a UIImage inside of a UIImageView without transforming the UIImageView?
You could add gesture recognizers to any kind of UIView and in your event handling methods you could redraw UIImage to a freshly created CGContextRef. This context would have to be transformed with CGContextRotateCTM, CGContextScaleCTM , CGContextTranslateCTM that would be called with parameters matching the ones you receive from gesture recognizers. That's the hard way.
Alternatively you could create a scratch UIImageView with your image, transform it with gesture recognizers then render it to a CGContextRef and get the transformed image out of this context.
Certainly doable, but not trivial.
UIGestureRecognizer can only be attached to a UIView - UIImage is not a descendant of UIView.
This is because an UIView (or it's descendant) can receive touches - UIImage can not.
Please see Gestures Recognizers Are Attached to a View.
You could recalculate/rerender the UIImage based on parameters after user is done manipulating it. On how to do this: it really depends on what you want to achieve.

cocoa - draw image in NSView

I'm having difficulties understanding why the below code doesn't work, what I want to achieve is an image being displayed in the top left corner of a NSView, but nothing is showing...
NSImage *map0 = [NSImage imageNamed:#"map0.png"];
NSRect rect = NSMakeRect(0, 0, 400, 400);
[map0 drawInRect:rect fromRect:NSZeroRect operation:NSCompositeSourceAtop fraction:1.0f];
[map drawRect:rect];
EDIT:
map is the NSView into which I would like to draw the image into
You never call drawRect: directly. This routine has various pre-conditions that are provided by Cocoa, such as the creation of a CGContextRef. You implement drawRect:. Cocoa calls it.
Your drawInRect:fromRect:operation:fraction: call should be put into the drawRect: of map, which should be a subclass of NSView. This specific problem is usually better solved with an NSImageView rather than a custom NSView, but if the drawing is more complex, then a custom NSView is appropriate.

drawRect cropping in UIScrollView

I am trying to draw an image into a UIView subclass overriding drawRect. This image drawing class needs moving and zooming capabilities, so I made it a subview of a scrollview.
My problem is that my image seems to get cropped, either by the screen or the scrollView bounds (the image is larger than the screen). I don't have a clue why, this seems to e pretty basic stuff.
The view hierarchy in my ViewController looks like this:
View Controller
View
ScrollView
MapView
I've created outlets for the scroll view and the map view (which is the view implementing drawRect).
My ViewController initial setup code for configuring the scroll view looks like this:
- (void)viewDidLoad
{
[super viewDidLoad];
scrollView.delegate = self;
scrollView.contentSize = CGSizeMake(450, 476);
scrollView.minimumZoomScale = 0.6;
scrollView.maximumZoomScale = 6.0;
}
My drawRect implementation:
- (void)drawRect:(CGRect)rect
{
UIImage *myImage = [UIImage imageNamed:#"map.jpg"];
CGRect rectangle = CGRectMake(0,0,450,476);
[myImage drawInRect:rectangle];
}
The image is draggable and zoomable within the scroll view, but it's cropped at what seems to be the screen bounds.
Any help would be appreciated.
drawRect can't draw outside the rect passed as a parameter to the drawRect method, which is determined by the view frame. Make your view 1200,1200 and make sure that clipToBounds is disabled on all the containing views.
Your problem is probably in drawInRect. From documentation of UIImage class:
drawInRect:
Draws the entire image in the specified rectangle, scaling it as needed to fit.
Make that rectangle bigger as you wish and center it in UIImageView. This question is answered here UIScrollView image/photo viewer with paging enabled and zooming

Custom drawing on top of UIButton's background image

What is the method calling sequence of UIButton's drawing?
I have a UIButton subclass, let's call it UIMyButton. I add it to a .xib controller and give it a background image. Then in the UIMyButton.m file I override drawRect method and draw a shape.
Something like:
- (void)drawRect:(CGRect)rect {
CGContextRef c = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(c, [UIColor orangeColor].CGColor);
CGContextFillRect(c, rect);
}
The problem is that it draws the orange rectangle underneath the background image. What methods are responsible for drawing/updating background images (it updates on "tap down" for example)? How do I force the draw on top without adding an additional custom subview to the button (or is the background image a subview itself)?
I'm just trying to get a clear understanding of how the UIButton drawing sequence works.
The solution is to not use a background for the button. Instead, draw the image inside the drawRect method like so:
-(void)drawRect:(CGRect)rect
{
CGContextRef ctx=UIGraphicsGetCurrentContext();
UIImage *image = [UIImage imageNamed:#"image.jpg"];
[image drawInRect:self.bounds];
CGContextSetFillColorWithColor(c, [UIColor orangeColor].CGColor);
CGContextFillRect(c, rect);
}

Overlay an UIImage above an UIImageView, possible? example code?

Is it possible to set an image over an other image,
respectively to overlay an image above an UIImage.
I give some code:
Headerfile:
#property (nonatomic,assign)UIImageView* imageView;
Implementationfile
UIImage *overlayImage = [UIImage imageNamed:#"lamp.png"];
The "imageView.image" has got an image and above that I will have this lamp, but later on it has to be possible to move it.
I searched some methods, but all methods gave me warnings.
Could you help me how to manage it? And is Core Animation an alternative to handle that?
Just add it as a subview. UIImageView is a UIView like any other.
UIImage *overlayImage = [UIImage imageNamed:#"lamp.png"];
UIImageView *overlayImageView = [[UIImageView alloc] initWithImage:overlayImage];
[self.imageView addSubview:overlayImageView];
You should use another UIImageView. A UIImage doesn't refer to an actual view in the interface, it's used as a reference to an image to be reused in code.
UIImageView* lampImageView= [[UIImageView alloc] initWithImage:overlayImage];
This way you can move it around anywhere over the first image view.