I have an image in a custom cell. Is there any api to add a gray border to an image?
Thanks in advance!
If you are on iPhone OS 3.0, you can use the borderWidth and borderColor properties of your image view's CALayer to add a border over the image, as follows:
imageView.layer.borderWidth = 4.0f;
CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB();
CGFloat values[4] = {0.5, 0.5, 0.5, 1.0};
CGColorRef grey = CGColorCreate(space, values);
imageView.layer.borderColor = grey;
CGColorRelease(grey);
CGColorSpaceRelease(space);
This creates a 4-pixel-wide border with a fully opaque color having RGB values midway between white and black.
you can try this
[imageView.layer setBorderColor: [[UIColor blackColor] CGColor]];
[imageView.layer setBorderWidth: 2.0];
for this you need import <QuartzCore/QuartzCore.h>
I don't think so, but you can put a gray UIView instead of your image, and then add the image as child of this gray UIView. Make the image a little smaller, and put it in the center, by setting its frame appropriately, so that you'll only see a few pixels from the UIView behind. This way, it will appear as if the image has a border.
Related
I have two rectangles (two closed sub cgpaths).
Rectangle B is small and is present inside Rectangle A. All edges within it.
Is there a direct way to fill color area external to the rectangle B.
CAShapeLayer fillExternalColor something like that? If not a direct way, how to do this programmatically?
A - Purple color
B - Yellow color
So I tried drawing A and then drawing B. I wanted B to be of clear color (for now I put Yellow) but then I see purple color of A..
I found CGRectIntersection method that gives AnB and CGRectUnion method that gives AuB.
Is there a method that gives the rest of the area which is AuB - AnB?
You are using a CAShapeLayer. If your fillColor and your strokeColor are both opaque (alpha 1.0), you can simply set the layer's backgroundColor to fill those pixels that are within the layer's bounds but outside of its stroked and filled path.
My test code:
#implementation ViewController {
CAShapeLayer *layer;
}
- (void)viewDidLoad {
[super viewDidLoad];
layer = [CAShapeLayer layer];
layer.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 250, 250)].CGPath;
layer.fillColor = [UIColor yellowColor].CGColor;
layer.strokeColor = [UIColor whiteColor].CGColor;
layer.lineWidth = 4;
layer.backgroundColor = [UIColor purpleColor].CGColor;
[self.view.layer addSublayer:layer];
}
- (void)viewDidLayoutSubviews {
layer.frame = self.view.bounds;
}
#end
Result:
I wanted to add red border inner rectangle on UIImage with masked outer part.
I came through this page. The following code is using CGContextEOFillPath can be helpful to others like me. (Some of the code is gathered from other pages.)
-(UIImage ) imageByDrawingBorderRectOnImage:(UIImage )image theRect:(CGRect)theRect
{
// begin a graphics context of sufficient size
UIGraphicsBeginImageContext(image.size);
// draw original image into the context
[image drawAtPoint:CGPointZero];
// get the context for CoreGraphics
CGContextRef ctx = UIGraphicsGetCurrentContext();
// set stroking color and to draw rect
[[UIColor redColor] setStroke];
// drawing with a red stroke color
CGContextSetRGBStrokeColor(ctx, 1.0, 0.0, 0.0, 1.0);
// the line width to 3
CGContextSetLineWidth(ctx, 3.0);
// Add Stroke Rectangle,
CGContextStrokeRect(ctx, theRect);
// Now draw fill outside part with partial alpha gray color
// drawing with a gray stroke color
CGMutablePathRef aPath = CGPathCreateMutable();
// outer rectangle
CGRect rectangle = CGRectMake( 0, 0, image.size.width, image.size.height);
CGPathAddRect(aPath, nil, rectangle);
// innter rectangle
CGPathAddRect(aPath, nil, theRect);
// set gray transparent color
CGContextSetFillColorWithColor(ctx, [UIColor colorWithRed:0.75 green:0.75 blue:0.75 alpha:0.5].CGColor);
// add the path to Context
CGContextAddPath(ctx, aPath);
// This method uses Even-Odd Method to draw in outer rectangle
CGContextEOFillPath(ctx);
// make image out of bitmap context
UIImage *retImage = UIGraphicsGetImageFromCurrentImageContext();
// free the context
UIGraphicsEndImageContext();
return retImage;
}
Regards.
Assuming A is the bigger shape, B is the smaller, inner shape, and bounds refers to the containing rect of A (probably the bounds of the view)
Clip shape B to the context (-addClip should do it)
CGContextClearRect the bounds
Fill shape A
Edit, found the source of this code
Given HoleView : UIView you must set:
self.opaque = NO;
self.backgroudColor = [UIColor clearColor];
and in drawRect:
[[UIColor purpleColor] setFill];
UIRectFill(A);
CGRect gapRectIntersection = CGRectIntersection(B, A);
[[UIColor clearColor] setFill];
UIRectFill(gapRectIntersection);
kCAFillRuleEvenOdd
Specifies the even-odd winding rule. Count the total number of path crossings. If the number of crossings is even, the point is outside the path. If the number of crossings is odd, the point is inside the path and the region containing it should be filled.
Available in OS X v10.6 and later.
Declared in CAShapeLayer.h.
Refer to :CAShapeLayer Class reference
I have to draw many shapes like rectangle, circle, triangle etc.I am drawing them trough core graphics.
It is working fine.
I want to ask suppose I am having an image (square image of say 1024*1024), and now I want my circle to draw as image means like I draw red color circle or other color, so if it is possible to show my image as drawn in the circle, like the image is circle,
My code for normal circle drawing:-
- (void)drawRect:(CGRect)rect{
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(ctx, [ [UIColor colorWithRed:255.0/255.0 green:0.0/255.0 blue:0.0/255.0 alpha:1] CGColor]);
CGContextSetAlpha(ctx, 0.7);
CGContextMoveToPoint(ctx, radius, radius);
CGContextAddArc(ctx, radius,radius, radius, radians(0), radians(360), 0);
CGContextClosePath(ctx);
CGContextFillPath(ctx);
}
I want to draw my image as circle.
Basically I want like we can fill colors in core graphics drawing whether circle, arc, triangle. so is that possible to fill my shape with my image instead of any solid colors.
Is this possible and if yes please suggest me how to achieve this.
Thanks in advance.
try this out for setting color in CGContextSetFillColorWithColor function [[UIColor alloc]initWithPatternImage:[UIImage imageNamed:#"pattern.jpg"]CGColor];
Add a UIView with and rectangular on the image.
In this view, you must draw the hole.
Now i not have the mac and i cannot check, but try to substitute
CGContextSetFillColorWithColor(ctx, [ [UIColor colorWithRed:255.0/255.0 green:0.0/255.0 blue:0.0/255.0 alpha:1] CGColor]);
with
CGContextSetBlendMode(currentContext, kCGBlendModeClear);
let me know
Unwanted white 1 px line appears on the left side of my UIViewImage. I'm using QuartzCore to apply border:
...
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
[imageView.layer setBorderColor: [[UIColor BORDERCOLOR4ALLVIEWS] CGColor]];
[imageView.layer setBorderWidth: BORDERSIZE4ALL];
...
The image view is inside ScrollView. I have a thumbnail image list at the bottom on the screen. When user taps a thumbnail I'm loading an image and passing it to the MyUIImageView.image. Here is the code that gets executed on tap:
MyUIImageView.image = [UIImage imageNamed:imageName];
CGRect rect = MyUIImageView.frame;
rect.size.width = MyUIImageView.image.size.width; //also tried with - 1;
rect.size.height = MyUIImageView.image.size.height //also tried with - 1;
MyUIImageView.frame = rect;
// also tried redraw a border on the image view:
[MyUIImageView.layer setBorderColor: [[UIColor BORDERCOLOR4ALLVIEWS] CGColor]];
[MyUIImageView.layer setBorderWidth: BORDERSIZE4ALL];
Have noticed that line appears only on one image. However, if I'm additionally making image view frame size smaller by subtracting with -1 then white lines appear on the other images too. Here's an example of an image with a white line:
After setting MyUIImageView.clipsToBounds to YES the white line dissapeared :)
I guess the white line is the scrollView's background color showing through. Try setting the scrollviews background color to black.
And if that doesn't help try to set the imageview's background color to clearColor.
The above is a UITableViewCell containing two UILabels. The cell has a transparent background using [UIColor clearColor] and the background pattern (you may need to look closely to see it) is set on the UITableView using UIColor's initWithPatternImage.
What I'd like to be able to do is blend the text with the background pattern so that the text has the texture coming through. The only thing is I'm not sure of is the best way of achieving this.
I know I can use NSString instead of UILabels and draw the text directly into an image, but can this then be blended with the background even though it's not being drawn in the same drawRect (i.e. the text image would be drawn in a subclass of UITableViewCell where as the background is being drawn by the UITableView instance)?
The other way is to create an image mask from the text, have another image which is already textured (with the top half white and the bottom half dark grey) and then use that to draw the text, as outlined in this Cocoa with Love tutorial.
Whilst I can obviously use the tutorial to achieve the second implementation, I'm more inclined to explore the first as it'd use no external images and may be more efficient.
Your thoughts, links and code examples will be greatly appreciated.
Please Note: Setting a low alpha value on the UILabels does not achieve the desired effect
If you set the labels as non opaque and an alpha value less than 1.0 it should work. These can be set in either Interface Builder or as code like this:
[theIncidentLabel setOpaque:NO];
[theIncidentLabel setAlpha:0.5];
You can even just set the text color to a color with an alpha value less than 1.0.
[theIncidentLabel setTextColor:[UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.5]];
Using these settings I do see the background texture through labels in a project I'm working on. In my project the list UITableView is also transparent, and the background texture comes from an image loaded in a UIImageView behind the UITableView.
This is simple alpha blending. We figured out through a discussion in comments that this is inadequate for your needs. Instead you can use the alpha masking as explained in the tutorial mentioned.
Alternatively, you could forgo alpha masks and just draw the text to a CGImage, then draw that image on your background pattern with a different blend mode, maybe kCGBlendModeScreen. Here's the drawRect method from the above mentioned tutorial rewritten with this technique:
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
// Draw a black background
[[UIColor blackColor] setFill];
CGContextFillRect(context, rect);
// Draw the text upside-down
CGContextSaveGState(context);
CGContextTranslateCTM(context, 0, rect.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
[[UIColor lightGrayColor] setFill];
[text drawInRect:rect withFont:[UIFont fontWithName:#"HelveticaNeue-Bold" size:40.0]];
// Draw it again in a darker color.
[[UIColor darkGrayColor] setFill];
CGContextTranslateCTM(context, 0, 50.0);
[text drawInRect:rect withFont:[UIFont fontWithName:#"HelveticaNeue-Bold" size:40.0]];
CGContextRestoreGState(context);
// Create an text image from what we've drawn so far
CGImageRef textImage = CGBitmapContextCreateImage(context);
// Draw a white background (overwriting the previous work)
[[UIColor whiteColor] setFill];
CGContextFillRect(context, rect);
// Draw the background image
CGContextSaveGState(context);
[[UIImage imageNamed:#"shuttle.jpg"] drawInRect:rect];
// Set the blend mode. Try different options to meet your tastes.
CGContextSetBlendMode(context, kCGBlendModeScreen);
// Draw the text.
CGContextDrawImage(context, rect, textImage);
// Clean up.
CGContextRestoreGState(context);
CGImageRelease(textImage);
}
I have a UIScrollView that contains a subview that I want to fill with a texture.
- (void)drawRect:(CGRect)rect {
CGImageRef image_to_tile_ret_ref = CGImageRetain(wood.CGImage);
CGRect tile_rect;
tile_rect.size = wood.size;
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextBeginPath(context);
CGContextMoveToPoint(context, 0, 0);
CGContextDrawTiledImage(context, tile_rect, image_to_tile_ret_ref);
// Something here to make it fill a big area
CGContextFillPath(context);
CGImageRelease(image_to_tile_ret_ref);
}
This just seems to fill the visible area of the scroll view and when I scroll, the rest is white. How do I draw a rectangle beyond the bounds of the rect? Is that bad?
If you want to draw a background color in this is too much. UIScrollView can have a background color. That color can be created from a patter that is an image.
You can create a pattern color
UIColor * bgColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"imgname.png"]];
scrollView.backgroundColor = bgColor;