I have the following method that for some reason does NOT display the image:
- (void)drawRect:(CGRect)rect
{
float cornerRadius = self.bounds.size.width/RADIUS_RATIO;
UIBezierPath *roundedRect = [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:cornerRadius];
[roundedRect addClip];
[[UIColor whiteColor] setFill];
UIRectFill(self.bounds);
[[UIColor blackColor] setStroke];
[roundedRect stroke];
CGRect imageRect = CGRectInset(self.bounds,
self.bounds.size.width * 0.5,
self.bounds.size.height * 0.5);
if (self.faceUp)
{
UIImage *cardFace = [UIImage imageNamed:[NSString stringWithFormat:
#"%#%#.png",[self rankAsStrings],self.suit]];
if (cardFace)
{
NSLog(#"%#%#.png",[self rankAsStrings],self.suit);
[cardFace drawInRect:imageRect];
} else {
NSLog(#"No Image Found: %#%#.png",[self rankAsStrings],self.suit);
}
} else {
[[UIImage imageNamed:#"Back.png"] drawInRect:imageRect];
}
}
Can someone shed some light on this?
P.S. The images are present and I do get the "NSLog(#"%#%#.png",[self rankAsStrings],self.suit);" message in the console.
TIA
I think your imageRect has 0.0 width and 0.0 height. Check the docs for CGRectInset method - it reduces original rect by 2*dx and 2*dy.
I would have done it like this :
myView.backgroundColor = [UIColor colorWithPatternImage: [UIImage imageNamed: #"MyProfilePic.png"]];
Related
I want to use custom code to draw the image for UIButton. How do I go about doing that? I have the code that can go into drawRect, but that's for UIView, not UIButton.
In the Custom view's drawRect:
#implement MyCustomView
- (void)drawRect:(CGRect)rect {
UIColor *color = [UIColor blueColor];
// Vertical stroke
{
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
[bezierPath moveToPoint: CGPointMake(20, 0)];
[bezierPath addLineToPoint: CGPointMake(20, 40)];
[color setStroke];
bezierPath.lineWidth = 1;
[bezierPath stroke];
}
}
- (UIImage *)imageFromView {
[self drawRect:CGRectMake(0, 0, 40, 40)];
UIGraphicsBeginImageContextWithOptions(self.bounds.size, self.opaque, 0.0);
[self.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return img;
}
In the button code:
UIButton *button = [[UIButton alloc] init];
MyCustomView *view = [[MyCustomView alloc] init];
[button setImage:view.imageFromView forState:UIControlStateNormal];
Use your drawing code to draw into an image graphics context opened with UIGraphicsBeginImageContextWithOptions.
Pull out the image using UIGraphicsGetImageFromCurrentImageContext.
Close the image graphics context with UIGraphicsEndImageContext.
Use the image in the button.
Simple example:
UIGraphicsBeginImageContextWithOptions(CGSizeMake(100,100), NO, 0);
UIBezierPath* p =
[UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,100,100)];
[[UIColor blueColor] setFill];
[p fill];
UIImage* im = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
// im is the blue circle image, do something with it here ...
How can I call this function?
I am trying to call this function from -viewDidLoad.
I tried [circularImageWithImage(imageView.image, myclor, 0.2)];
static UIImage *circularImageWithImage(UIImage *inputImage,
UIColor *borderColor,
CGFloat borderWidth)
{
CGRect rect = (CGRect){ .origin=CGPointZero, .size=inputImage.size };
UIGraphicsBeginImageContextWithOptions(rect.size, NO, inputImage.scale); {
// Fill the entire circle with the border color.
[borderColor setFill];
[[UIBezierPath bezierPathWithOvalInRect:rect] fill];
// Clip to the interior of the circle (inside the border).
CGRect interiorBox = CGRectInset(rect, borderWidth, borderWidth);
UIBezierPath *interior = [UIBezierPath bezierPathWithOvalInRect:interiorBox];
[interior addClip];
[inputImage drawInRect:rect];
}
UIImage *outputImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return outputImage;
}
You can try with this code.
UIImage *image = [UIImage imageNamed:#"yourImage.png"];
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 100, 100)];//set your frame
//imageView.center = self.view.center;
UIImage *modifiedImage = circularImageWithImage(image, [UIColor redColor], 1.2);//border width >= 1.0 is better. Otherwise you may not see this
imageView.image = modifiedImage;
[self.view addSubview:imageView];
UIImage *sample = circularImageWithImage(imageView.image, myclor, 0.2);
I am setting a UIButton's ImageView.Image property to an image that was captured from an ImagePickerController. In my app, the image is captured and rounded with a border. The image is saved and I am loading the image into the button. Problem is, the button is showing only a blue circle and not the image inside... This only seems to happen on buttons.
Here is my code to round the image and set the border:
-(UIImage *)makeRoundedImage:(UIImage *) image
radius: (float) radius;
{
CALayer *imageLayer = [CALayer layer];
imageLayer.frame = CGRectMake(0, 0, image.size.width, image.size.height);
imageLayer.contents = (id) image.CGImage;
imageLayer.backgroundColor = [[UIColor clearColor] CGColor];
imageLayer.masksToBounds = YES;
imageLayer.cornerRadius = radius;
imageLayer.borderWidth = 40;
UIColor *ios7BlueColor = [UIColor colorWithRed:0.0 green:122.0/255.0 blue:1.0 alpha:1.0];
imageLayer.borderColor = ios7BlueColor.CGColor;
UIGraphicsBeginImageContext(image.size);
[imageLayer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *roundedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return roundedImage;
}
And here is how I am setting the button image:(player.playerImage is a cordite string with the path to the saved image)
-(void)ViewController:(UIViewController *)sender didUpdatePlayerImage:(NSString *)playerImagePath
{
player.playerImage = playerImagePath;
[_editImageButton setImage:[UIImage imageWithContentsOfFile:player.playerImage] forState:UIControlStateNormal];
}
Is this a limitation to the UIButton's ImageView implementation or am I missing something?
You are not actually writing the original image into the context.
Try the following:
UIGraphicsBeginImageContext(image.size);
[image drawInRect:CGRectMake(0, 0, image.size.width, image.size.height)];
[imageLayer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *roundedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
That should render the image into the context, followed by your layer.
i am trying to imitate the new contact ios7 behavior.
I have a UIScrollView with a UImageView inside.
With this code i can draw the circular shape in front of the image.
-(void)viewWillAppear:(BOOL)animated
{
CGFloat screenHeight = [[UIScreen mainScreen] bounds].size.height;
int position = 0;
if (screenHeight == 568)
{
position = 124;
}
else
{
position = 80;
}
CAShapeLayer *circleLayer = [CAShapeLayer layer];
UIBezierPath *path2 = [UIBezierPath bezierPathWithOvalInRect:
CGRectMake(0.0f, position, 320.0f, 320.0f)];
[path2 setUsesEvenOddFillRule:YES];
[circleLayer setPath:[path2 CGPath]];
[circleLayer setFillColor:[[UIColor clearColor] CGColor]];
path;
path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 320, screenHeight-44) cornerRadius:0];
[path appendPath:path2];
[path setUsesEvenOddFillRule:YES];
fillLayer = [CAShapeLayer layer];
fillLayer.path = path.CGPath;
fillLayer.fillRule = kCAFillRuleEvenOdd;
fillLayer.fillColor = [UIColor blackColor].CGColor;
fillLayer.opacity = 0.8;
[self.view.layer addSublayer:fillLayer];
UILabel *moveLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 10, 320, 50)];
[moveLabel setText:#"Mueva y escale"];
[moveLabel setTextAlignment:NSTextAlignmentCenter];
[moveLabel setTextColor:[UIColor whiteColor]];
[self.view addSubview:moveLabel];
}
I need to get the portion of the image that is inside the circle when the user choose "Use Photo" option.
I wrote this category
#implementation UIImage (PathCropping)
-(UIImage *)imageCroppedWithPath:(UIBezierPath *)path
{
return [self imageCroppedWithPath:path invertPath:NO];
}
-(UIImage *)imageCroppedWithPath:(UIBezierPath *)path
invertPath:(BOOL)invertPath
{
float scaleFactor = [self scale];
CGRect imageRect = CGRectMake(0, 0, self.size.width * scaleFactor, self.size.height *scaleFactor);
CGColorSpaceRef colorSpace = CGImageGetColorSpace(self.CGImage);
CGContextRef context = CGBitmapContextCreate(NULL,
imageRect.size.width,
imageRect.size.height ,
CGImageGetBitsPerComponent(self.CGImage),
0,
colorSpace,
(CGBitmapInfo)CGImageGetAlphaInfo(self.CGImage)
);
CGContextSaveGState(context);
CGContextTranslateCTM(context, 0.0, self.size.height *scaleFactor);
CGContextScaleCTM(context, 1.0 , -1.0);
CGAffineTransform transform = CGAffineTransformMakeScale(scaleFactor, scaleFactor);
[path applyTransform:transform];
if(invertPath){
UIBezierPath *rectPath = [UIBezierPath bezierPathWithRect:imageRect];
CGContextAddPath(context, rectPath.CGPath);
CGContextAddPath(context, path.CGPath);
CGContextEOClip(context);
} else {
CGContextAddPath(context, path.CGPath);
CGContextClip(context);
}
CGContextScaleCTM(context, 1.0, -1.0);
CGContextTranslateCTM(context, 0.0, -self.size.height * scaleFactor);
CGContextDrawImage(context, imageRect, [self CGImage]);
CGImageRef imageRef = CGBitmapContextCreateImage(context);
return [UIImage imageWithCGImage:imageRef scale:scaleFactor orientation:0];
}
#end
The following image was cropped twice with the same path. once inverted, once not inverted. than I merged them again.
NSString *imageName = #"IMG_2345.jpg";
UIImage *image = [UIImage imageNamed:imageName];
UIImage *image2 = [UIImage imageNamed:imageName];
CGSize size = CGSizeMake(320, 320 * image.size.height / image.size.width);
image = [image resizedImage:size interpolationQuality:kCGInterpolationHigh];
image2 = [image2 resizedImage:size interpolationQuality:kCGInterpolationHigh];
image2 = [image2 grayscaledImage];
image = [image imageCroppedWithPath:[self circlePathWithSize: circleSize] invertPath: NO];
image2 = [image2 imageCroppedWithPath:[self circlePathWithSize: circleSize] invertPath: YES];
It is on Github
I'm trying to create a UIbutton that has the following characteristics:
* A custom image as its content
* Rounded corners
* A drop shadow
Using the following code will format the button to appear correctly and function but the highlight action (i.e., the darkening of the button when touched) is lost when the touch occurs. Any ideas?
+(void) styleButton:(UIButton*)button{
UIView *backgroundView = [[UIView alloc] initWithFrame:CGRectMake(button.bounds.origin.x, button.bounds.origin.y, button.bounds.size.width, button.bounds.size.height)];
CALayer *sublayer = [CALayer layer];
sublayer.shadowOffset = CGSizeMake(0, 3);
sublayer.shadowRadius = 5.0;
sublayer.shadowColor = [UIColor blackColor].CGColor;
sublayer.shadowOpacity = 0.8;
sublayer.frame = CGRectMake(button.bounds.origin.x, button.bounds.origin.y, button.bounds.size.width, button.bounds.size.height);
backgroundView.userInteractionEnabled = NO;
[backgroundView.layer addSublayer:sublayer];
[button insertSubview:backgroundView atIndex:0];
CALayer *imageLayer = [CALayer layer];
imageLayer.frame = sublayer.bounds;
imageLayer.cornerRadius = 10.0;
imageLayer.contents = (id) [UIImage imageNamed:#"myImage.png"].CGImage;
imageLayer.cornerRadius = 5.0f;
imageLayer.masksToBounds = YES;
[sublayer addSublayer:imageLayer];
}
Have you tried converting your backgroundView into a UIImage and add it to the button instead of adding backgroundView as a subview? That would preserve the darkening when the button is pressed:
UIGraphicsBeginImageContext(backgroundView.frame.size);
[backgroundView.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[button setImage:image forState:UIControlStateNormal];
Like this (ARC enabled):
UIGraphicsBeginImageContextWithOptions(self.button.bounds.size, NO, [[UIScreen mainScreen] scale]);
CGContextRef context = UIGraphicsGetCurrentContext();
for (UIView *aView in self.button.subviews) {
CGContextSaveGState(context);
CGContextTranslateCTM(context, aView.frame.origin.x, aView.frame.origin.y);
[aView.layer renderInContext:UIGraphicsGetCurrentContext()];
CGContextRestoreGState(context);
}
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[self.button setImage:image forState:UIControlStateNormal];
[self.button.subviews makeObjectsPerformSelector:#selector(removeFromSuperview)];
[self.button setAdjustsImageWhenHighlighted:YES];